I am is developing a plugin for Shopify CMS. This plugin use webcomponents.js to load Polymer scripts via
script.src = "data:text/javascript;charset=utf-8," + encodeURIComponent(scriptContent);
webcomponentsjs/src/HTMLImports/parser.js line 307
In FireFox I get the following errors:
Content Security Policy: The page’s settings blocked the loading of a resource at data:text/javascript;charset=utf-8,/**script code*/(“script-src https://domainurl https://* 'unsafe-inline' 'unsafe-eval'”)
The original Content security policy header (I can't change this header on the server, because Shopify is a hosted platform and I don't have any control on it)
Content-Security-Policy:
default-src 'self' https://*;
child-src 'self' https://* blob: data:;
connect-src 'self' https://* wss://*;
font-src 'self' https://* blob: data:;
img-src 'self' https://* blob: data:;
media-src'self' https://* blob: data:;
object-src 'self' https://* blob: data:;
script-src 'self' https://* 'unsafe-inline' 'unsafe-eval';
style-src 'self' https://* 'unsafe-inline';
I am trying to overload this header by meta tag
<meta http-equiv="Content-Security-Policy" content="
default-src * data: 'unsafe-inline' 'unsafe-eval';
script-src * data: 'unsafe-inline' 'unsafe-eval';
" />
Is it possible to overload header value by meta tag?
I found that I can't manage Content security policy.
I have patched webcomponents.js file.I had removed script.src = "data:text/javascript;charset=utf-8," + encodeURIComponent(scriptContent);
.
Now I am loading script by script.textContent.