Inject script to pass CSP security header about next-themes HOT 7 CLOSED

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=

from next-themes.

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.

from next-themes.

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

from next-themes.

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

from next-themes.

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

from next-themes.

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

from next-themes.

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

#106 (comment)

from next-themes.