Search code examples
javascriptfirefoxshopifyweb-componentcontent-security-policy

Content security policy. webcomponent. script src DataURI .Can I override HTTP HEADER by META tag?


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?


Solution

  • 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.