Inject script to pass CSP security header

[vanntile]

Currently, when using this package and having a restrictive CSP header (including a hash), you get the following error:

Refused to execute inline script because it violates the following Content Security Policy directive:
"script-src 'self' 'sha256-8vI1As+YvGPUUpPp6RL6G2wI9FGjUN3x9MU3jdupP4s='". Either the 'unsafe-inline' keyword,
a hash ('sha256-ZxiMCbcVxDCutNT7QrHdr+d0Z99vF3DED6pLitElTag='), or a nonce ('nonce-...')
is required to enable inline execution.

As the error says, including a nonce in the script header here would fix the error most likely. An optional parameter passed down from the ThemeProvider.

[vanntile]

For reference, as a developer using this script won't frequently change the script configurations, you can compute on your own the sha value for your own production script and add it to your CSP. It's a solution as good as any other. For me, for example, it's the above

sha256-ZxiMCbcVxDCutNT7QrHdr+d0Z99vF3DED6pLitElTag=

[shivamjjha]

In my case, following error comes up:

Refused to load the script 'data:text/javascript;base64,IWZ1bmN0aW9uKCl7dHJ5IHt2YXIgZD1kb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xhc3NMaXN0O2QucmVtb3ZlKCdsaWdodCcsJ2RhcmsnKTt2YXIgZT1sb2NhbFN0b3JhZ2UuZ2V0SXRlbSgndGhlbWUnKTtpZigic3lzdGVtIj09PWV8fCghZSYmdHJ1ZSkpe3ZhciB0PSIocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspIixtPXdpbmRvdy5tYXRjaE1lZGlhKHQpO2lmKG0ubWVkaWEhPT10fHxtLm1hdGNoZXMpe2Quc3R5bGUuY29sb3JTY2hlbWUgPSAnZGFyayc7ZC5hZGQoJ2RhcmsnKX1lbHNle2Quc3R5bGUuY29sb3JTY2hlbWUgPSAnbGlnaHQnO2QuYWRkKCdsaWdodCcpfX1lbHNlIGlmKGUpe2QuYWRkKGV8fCAnJyl9aWYoZT09PSdsaWdodCd8fGU9PT0nZGFyaycpZC5zdHlsZS5jb2xvclNjaGVtZT1lfWNhdGNoKGUpe319KCk=' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' 'unsafe-inline' *.youtube.com *.twitter.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Security Policies Used:

// https://securityheaders.com
const ContentSecurityPolicy = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline' *.youtube.com *.twitter.com cdn.usefathom.com;
  child-src *.youtube.com *.google.com *.twitter.com;
  style-src 'self' 'unsafe-inline' *.googleapis.com;
  img-src * blob: data:;
  media-src 'none';
  connect-src *;
  font-src 'self';
`;

const securityHeaders = [
  // https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
  {
    key: 'Content-Security-Policy',
    value: ContentSecurityPolicy.replace(/\n/g, '')
  },
  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
  {
    key: 'Referrer-Policy',
    value: 'origin-when-cross-origin'
  },
  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
  {
    key: 'X-Frame-Options',
    value: 'DENY'
  },
  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff'
  },
  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control
  {
    key: 'X-DNS-Prefetch-Control',
    value: 'on'
  },
  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=31536000; includeSubDomains; preload'
  },
  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
  // Opt-out of Google FLoC: https://amifloced.org/
  {
    key: 'Permissions-Policy',
    value: 'camera=(), microphone=(), geolocation=(), interest-cohort=()'
  }
];

@vanntile Any idea how to fix this ?
The link you mentioned does not work now
Thanks

[vanntile]

You should add a SHA-256 value of the script, as I said above. Chrome can recommend you the actual computed value.

[shivamjjha]

I searched the option to pass SHA downn the ThemeProvider but didd not find any. Can you tell me / recommend some link?

[brokul-dev]

Related to: #106
You can't add hash exception for base64 encoded script (current approach). You could add data: to script-src directive for now.

[shivamjjha]

Thanks @brokul-dev. Following worked for me:
script-src 'self' 'unsafe-eval' 'unsafe-inline' *.youtube.com *.twitter.com data:;

[snaka]

For your information, I have commented below on the method I used to obtain the hash value.

#106 (comment)