Add script to generate CSP script hash, fix CSP

LucaScorpion commented 1 year ago

Closes #93

Fixed the CSP tag. I've also made it so that this hash is generated as part of the build. It extracts the script content from the template, uses Node's crypto module to generate the hash, and passes it as a template variable.

Note: \r characters are removed from the script content, which should make it so it also properly works on Windows (whenever Git doesn't do newline normalization). I'm not able to test this myself though.

netlify[bot] commented 1 year ago

Deploy Preview for the-infi-way ready!

Name	Link
Latest commit	a8c272d9c8dffceda0f4b81075bb6d42f2b8335b
Latest deploy log	https://app.netlify.com/sites/the-infi-way/deploys/653287f8ca59fd0008f69fe4
Deploy Preview	https://deploy-preview-100--the-infi-way.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 Accessibility: 100 Best Practices: 100 SEO: 92 PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

jeroenheijmans commented 1 year ago

It works very well, both on my Windows machine and on the Netlify Deploy Preview. The latter is especially interesting, because you can see the value of CSP's there:

❌ Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-dH+oOZOdDv+MWU0F8bCZOoFHX0jFM4+bwNqOKujbv90='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

❌Refused to load the script 'https://netlify-cdp-loader.netlify.app/netlify.js' because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-jyzZu1NRXxjywCWum83E9qLzP6ggtV+81kmeYoDYhRE='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Granted, we may actually want to whitelist those scripts from Netlify because we deem them useful. But the value of CSP's is apparent: no one gets by the policy without whitelisting them. Good stuff! 🧡

Also: big thanks for moving it into the js. The replace-on-build option is exactly perfect. No additional dependencies, a few custom lines of code: love it!

Merging this PR.

infi-nl / the-infi-way