UPDATE (1)
My understanding of how to generate the CSP nonces was wrong. What I initially posted was a confusion between nonces and hashes. Sorry. The blog post has been updated to use hashing.
UPDATE (2)
Shortly after publishing this I changed my mind entirely. I decided I don't want any inline scripts no matter how small. Reasons are: 1) with HTTP2 it's cheap to send another file and thus that critical precious first HTML document becomes smaller and 2) when you load it as an external you have the power to load it async if it's applicable.
Check out this new script, it's hackish but works: uninline_scripts.js
UPDATE (Oct 18, 2018)
If you use INLINE_RUNTIME_CHUNK=false yarn run build no scripts, independent of size, are inlined. See this pull request for details.
END UPDATES
I have an app that is hosted on github-pages and because I can't control Content Security Policy HTTP headers I have to do it with a <meta http-equiv="Content-Security-Policy" content="${csp}"> tag in the HTML. That's working fine and the way I do it is that I have a script that looks like this:
#!/usr/bin/env node
const fs = require("fs");
const crypto = require("crypto");
const CSP_TEMPLATE = `
default-src 'none';
connect-src 'self' kinto.workon.app peterbecom.auth0.com;
frame-src peterbecom.auth0.com;
img-src 'self' avatars2.githubusercontent.com https://*.googleusercontent.com;
script-src 'self'%SCRIPT_HASHES%;
style-src 'self' 'unsafe-inline';
font-src 'self' data:;
manifest-src 'self'
`.trim();
const htmlFile = process.argv[2];
if (!htmlFile) throw new Error("missing file argument");
let html = fs.readFileSync(htmlFile, "utf8");
let hashes = "";
let csp = CSP_TEMPLATE;
const matches = html.match(/<script>.*<\/script>/g);
if (matches) {
matches.forEach(scriptTag => {
const hash = crypto.createHash("sha256");
hash.update(scriptTag.replace(/<script>/, "").replace("</script>", ""));
const digest = hash.digest("hex");
hashes += ` 'sha256-${digest.toString("base64")}'`;
});
}
csp = csp.replace(/%SCRIPT_HASHES%/, hashes);
const metatag = `
<meta http-equiv="Content-Security-Policy" content="${csp}">
`
.replace(/\n/g, "")
.trim();
if (html.search(metatag) > -1)
throw new Error("already has CSP metatag in HTML");
const anchor = '<meta charset="utf-8">';
const newHtml = html.replace(anchor, `${anchor}${metatag}`);
fs.writeFileSync(htmlFile, newHtml, "utf8");
Laugh all you like at my hurried node scripting but it works. It finds any <script>ANYTHING</script> tags (which means it disregards any <script src="... tags), calculates a sha256 hash string out of it and then puts that into the CSP block.
The output becomes something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none';script-src 'self' 'sha256-bb84aa7f904e73495b9e99f08531053f3a86f3c1b2e232e3abbac252bf723f1f';">
</head>
<body>
...
<script>....</script>
</body>
</html>
I don't know if I've done it right but at least what didn't use to work now works; the page loads in my browsers now.
Comments