Contexto
Tenho este CSP em uma página (em um aplicativo VITE React):
frame-src http://localhost:3080; style-src 'self' 'unsafe-inline' http://localhost:3080
Na página, um iframe de http://localhost:3080
está incorporado. Não tenho controle sobre esse iframe, pois ele é gerado por um aplicativo de terceiros em execução em um contêiner localmente. Os cabeçalhos CSP do próprio iframe são semelhantes aos seguintes:
default-src 'none'; script-src 'self' https://maps.google.com https://accounts.google.com https://www.google-analytics.com 'sha256-xxxx=' 'sha256-xxxx=' 'sha256-xxxx='; child-src 'self' https://accounts.google.com; style-src 'self' 'nonce-xxxx' https://accounts.google.com; font-src *; img-src * 'self' data:; connect-src 'self' https://accounts.google.com service.us10.list-manage.com www.google-analytics.com https://service.example.com ; manifest-src 'self'; frame-ancestors 'none';
O problema
No aplicativo principal do Vite, quando tento ajustar a altura do iframe filho, recebo este erro no navegador:
Uncaught SecurityError: Failed to read a named property 'document' from 'Window': Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.
também este erro (o que é interessante, pois não estou fazendo nada diretamente com https://accounts.google.com ):
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-xxxx' https://accounts.google.com". Either the 'unsafe-inline' keyword, a hash ('sha256-xxxx='), or a nonce ('nonce-...') is required to enable inline execution.
Pergunta
Existe um CSP, dado o cenário acima, que o aplicativo vite pode implementar, que permitirá que a altura do iframe seja atualizada , ou isso é uma impossibilidade? Não consigo dizer se o código está errado ou se isso é realmente tecnicamente inviável.
Se você estiver executando o aplicativo de terceiros em uma porta diferente do seu aplicativo principal, estará sujeito às restrições do navegador entre domínios.
A solução fácil é colocar um proxy reverso (Nginex) na frente do seu aplicativo e do aplicativo e servidor de terceiros, ambos do mesmo domínio, porta e protocolo.