reactjsiframedomexception

ReactDom.render is DOMException: The operation is insecure in <iframe>?

I am getting this error DOMException: The operation is insecure. and the whole thing seems to start at this simple init code:

import React from 'react';
import ReactDOM from 'react-dom';

import App from './src/app/App';

ReactDOM.render(<App />, document.querySelector('#root'));

It only happens in an <iframe src="... - my locally served page with React - ..."> and only in Firefox (104).

The JavaScript files are served with the following headers:

Content-Security-Policy:    default-src 'self'; style-src 'self' 'unsafe-inline'; object-src 'none'
Content-Type:   application/javascript

Any help is appreciated, I am out of ideas!

Solution

  • The reason was an access to localStorage.

    Users might allow third party cookies in Firefox or - in our case - we can omit get/set of cookies for the URLs, which can be used in <iframe>s.

    So we do location/path checking.

    So this approach is interesting for cases, in which you can somehow detect that your app runs in an iframe and you can omit the usage of localStorage, sessionStorage and relatives.