I have this CSP on a page (in a vite react app):
frame-src http://localhost:3080; style-src 'self' 'unsafe-inline' http://localhost:3080
On the page, an iframe from http://localhost:3080
is embedded. I don't have control over that iframe as it is generated by a 3rd party app running in a container locally.
The iframe's own CSP headers are similar to the following:
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';
In the main vite app, when I try to adjust the height of the child iframe, I get this error in the browser:
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.
also this error (which is interesting as I'm not directly doing anything with 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.
Is there a CSP, given the above scenario, that the vite app can implement, that will allow the iframe's height to be updated, or is this an impossibility? I can't tell whether the code is wrong or if this is actually technically infeasible.
If you're running the 3rd party app on a different port to your main application, then you fall fowl of the cross-domain browser restrictions.
The easy solution is to put a reverse proxy (Nginex) in front of both your app and the 3rd party app and server both from the same domain, port and protocol.