search

officert / vue-friendly-iframe

A Vue js component for creating super fast loading, non-blocking iframes.
https://officert.github.io/vue-friendly-iframe/
307 stars 57 forks source link

Content Security Policy (CSP) requires allowing 'unsafe-inline' #44

Open Preston-Landers opened 2 years ago

Preston-Landers commented 2 years ago

Hello. This is a useful plugin for my needs but there is one issue I am wondering about. We are looking at applying a Content Security Policy (CSP) header to our Vue app. However this component requires use of inline script and style, thus we have to put 'unsafe-inline' in our CSP. As far as I can tell vue-friendly-iframe is the only place in our app that needs it. We use iframe to display another older component within our system inside a Vue component.

I'm not an expert in this but I'm wondering if something can be done in vue-friendly-iframe to avoid the use of inline scripting to build the iframe content. I'm talking about stuff like this:

iframeDoc.open().write('\n          <body onload="window.location.replace(\'' + this.src + '\'); parent.postMessage(\'' + this.iframeLoadedMessage + '\', \'*\')"></body>\n          <script>\n            window.document.onreadystatechange = function () {\n              if (window.document.readyState === \'complete\') {\n                parent.postMessage(\'' + this.iframeOnReadyStateChangeMessage + '\', \'*\')\n              }\n            };\n          </script>\n          ');

Do you think there's any feasible means to avoid building things inline like this? Thanks!