I am trying to use a nonce in my Content Security Policy in an Angular app.
My content security policy includes:
script-src 'self' 'unsafe-inline' 'strict-dynamic' 'nonce-blahblah'
And a simplified version of my index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<script nonce="blahblah" type="text/javascript">console.log("hello!");</script>
</head>
<body>
<app-root ngCspNonce="blahblah"></app-root>
</body>
</html>
The simple script with the "hello!" print works fine. My understanding was that the ngCspNonce attribute would be added to the other script tags that Angular generates. However when I serve my site, this is the page source in my browser:
<!doctype html>
<html lang="en" data-critters-container="">
<head>
<meta charset="utf-8">
<base href="/">
<script nonce="blahblah" type="text/javascript">console.log("hello!");</script>
<style nonce="blahblah">@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#2d2d2d;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:45, 45, 45;--bs-secondary-rgb:108, 117, 125;--bs-success-rgb:25, 135, 84;--bs-info-rgb:13, 202, 240;--bs-warning-rgb:255, 193, 7;--bs-danger-rgb:220, 53, 69;--bs-light-rgb:248, 249, 250;--bs-dark-rgb:33, 37, 41;--bs-primary-text-emphasis:#121212;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#d5d5d5;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#ababab;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255, 255, 255;--bs-black-rgb:0, 0, 0;--bs-font-sans-serif:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-font-monospace:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33, 37, 41;--bs-body-bg:#fff;--bs-body-bg-rgb:255, 255, 255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0, 0, 0;--bs-secondary-color:rgba(33, 37, 41, .75);--bs-secondary-color-rgb:33, 37, 41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233, 236, 239;--bs-tertiary-color:rgba(33, 37, 41, .5);--bs-tertiary-color-rgb:33, 37, 41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248, 249, 250;--bs-heading-color:inherit;--bs-link-color:#007bff;--bs-link-color-rgb:0, 123, 255;--bs-link-decoration:underline;--bs-link-hover-color:#0062cc;--bs-link-hover-color-rgb:0, 98, 204;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, .175);--bs-border-radius:.375rem;--bs-border-radius-sm:.25rem;--bs-border-radius-lg:.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 .5rem 1rem rgba(0, 0, 0, .15);--bs-box-shadow-sm:0 .125rem .25rem rgba(0, 0, 0, .075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, .175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, .075);--bs-focus-ring-width:.25rem;--bs-focus-ring-opacity:.25;--bs-focus-ring-color:rgba(45, 45, 45, .25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}html{overflow-x:hidden;font-size:14px}</style>
<link rel="stylesheet" href="styles.09ca5b46bf96a485.css" media="print" ngcspmedia="all"><noscript><link rel="stylesheet" href="styles.09ca5b46bf96a485.css"></noscript>
<script nonce="blahblah">(() => {
const children = document.head.children;
function onLoad() {this.media = this.getAttribute('ngCspMedia');}
for (let i = 0; i < children.length; i++) {
const child = children[i];
child.hasAttribute('ngCspMedia') && child.addEventListener('load', onLoad);
}
})();</script></head>
<body>
<app-root ngcspnonce="blahblah"></app-root>
<script src="runtime.6791e51006df24ff.js" type="module"></script>
<script src="polyfills.2149b2c3f7920599.js" type="module"></script>
<script src="scripts.3e75d50128144df1.js" defer=""></script>
<script src="main.9328a66c7aa91680.js" type="module"></script></body>
</html>
I can see that the nonce has added to the script tag that Angular inserted in the head, but not the scripts in the body (runtime.6791e51006df24ff.js, etc), so I get CSP errors when loading those scripts.
How can I get the nonce added to those also?
The Angular issue that causes this is supposedly fixed in version 19, but for now I'm on version 18.
I used this blatant hack as a workaround, doing a search and replace when the HTML file is served.
The relevant parts of my index.html:
<!doctype html>
<html lang="en">
<head>
<script nonce="CSP_NONCE_PLACEHOLDER" type="text/javascript" src="myscript.js"></script>
</head>
<body>
<app-root ngCspNonce="CSP_NONCE_PLACEHOLDER"></app-root>
</body>
</html>
And in my express server:
// generate CSP nonce
app.use((_req, res, next) => {
res.locals.cspNonce = crypto.randomBytes(16).toString('hex');
next();
});
let indexSrcText = fs.readFileSync(`${distDir}/index.html`).toString();
app.get("/*", (req, res, next) => {
let suffixes = ['.html', '.png', '.jpg', '.jpeg', '.svg', '.mp4', '.ico', '.json', '.js', '.css' ];
if (!suffixes.some(o => req.url.endsWith(o))) {
// set CSP nonce in index.html
let indexText = indexSrcText.replace(new RegExp('CSP_NONCE_PLACEHOLDER', 'g'), res.locals.cspNonce);
res.send(indexText);
}
else {
next();
}
});