[react-error-overlay] Add an Optional Runtime Option Style iFrame with a Class

[dav-is]

To be more CSP compliant, inline styles should be avoided. I added an alternative to using inline styles on the iframe itself so it doesn't violate CSP.

(Tested in Next.js)

Note: the tests are failing due to things outside the scope of this PR.

[mrmckeb]

Thanks for this PR, @dav-is. Are you able to put together a quick demonstration project with this in place?

[dav-is]

@mrmckeb I implemented it inside of next.js so it'd be hard to load all the changes locally, but basically I copied the styles that are added to the iframe <iframe styles= and moved it to <iframe class= if the option is set. The corresponding CSS becomes the app's responsibility and is inserted in a stylesheet from the server in dev mode.

https://github.com/dav-is/next.js/blob/d1017f8f84579169182ae9558cd9d25c8e496397/packages/next/pages/_document.js#L133
https://github.com/dav-is/next.js/blob/d1017f8f84579169182ae9558cd9d25c8e496397/packages/next/client/dev-error-overlay/hot-dev-client.js#L74

[mrmckeb]

Sorry @dav-is, I missed your response here (lost in emails). It would be great to get a demo of this to test before merging, if you could put one together?

This is an area of CRA I'm not intimately familiar with, so that would help in testing.

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This pull request has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue. Thank you for your contribution!