Skip to content

Commit a4b0928

Browse files
aaronshimaaronshim
committed
refactor(@angular/build): Auto-CSP support as an index file transformation.
Auto-CSP is a feature to rewrite the `<script>` tags in a index.html file to either hash their contents or rewrite them as a dynamic loader script that can be hashed. These hashes will be placed in a CSP inside a `<meta>` tag inside the `<head>` of the document to ensure that the scripts running on the page are those known during the compile-time of the client-side rendered application.
1 parent 446fd94 commit a4b0928

File tree

2 files changed

+459
-0
lines changed

2 files changed

+459
-0
lines changed

‎packages/angular/build/src/utils/index-file/auto-csp.ts‎

Lines changed: 289 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,289 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
9+
import { htmlRewritingStream, StartTag } from './html-rewriting-stream';
10+
import * as crypto from 'node:crypto';
11+
12+
/**
13+
* The hash function to use for hash directives to use in the CSP.
14+
*/
15+
const HASH_FUNCTION = 'sha256';
16+
17+
/**
18+
* Store the appropriate attributes of a sourced script tag to generate the loader script.
19+
*/
20+
interface SrcScriptTag {
21+
src: string;
22+
type?: string;
23+
async: boolean;
24+
defer: boolean;
25+
}
26+
27+
/**
28+
* Get the specified attribute or return undefined if the tag doesn't have that attribute.
29+
*
30+
* @param tag StartTag of the <script>
31+
* @returns
32+
*/
33+
function getScriptAttributeValue(tag: StartTag, attrName: string): string | undefined {
34+
return tag.attrs.find((attr) => attr.name === attrName)?.value;
35+
}
36+
37+
/**
38+
* Checks whether a particular string is a MIME type associated with JavaScript, according to
39+
* https://developer.mozilla.org/en-US/docs/Web/HTTP/MIME_types#textjavascript
40+
*
41+
* @param mimeType a string that may be a MIME type
42+
* @returns whether the string is a MIME type that is associated with JavaScript
43+
*/
44+
function isJavascriptMimeType(mimeType: string): boolean {
45+
return mimeType.split(';')[0] === 'text/javascript';
46+
}
47+
48+
/**
49+
* Which of the type attributes on the script tag we should try passing along
50+
* based on https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type
51+
* @param scriptType the `type` attribute on the `<script>` tag under question
52+
* @returns whether to add the script tag to the dynamically loaded script tag
53+
*/
54+
function shouldDynamicallyLoadScriptTagBasedOnType(scriptType: string | undefined): boolean {
55+
return (
56+
scriptType === undefined ||
57+
scriptType === '' ||
58+
scriptType === 'module' ||
59+
isJavascriptMimeType(scriptType)
60+
);
61+
}
62+
63+
/**
64+
* Calculates a CSP compatible hash of an inline script.
65+
* @param scriptText Text between opening and closing script tag. Has to
66+
* include whitespaces and newlines!
67+
* @returns The hash of the text formatted appropriately for CSP.
68+
*/
69+
export function hashTextContent(scriptText: string): string {
70+
const hash = crypto.createHash(HASH_FUNCTION).update(scriptText, 'utf-8').digest('base64');
71+
return `'${HASH_FUNCTION}-${hash}'`;
72+
}
73+
74+
/**
75+
* Finds all `<script>` tags and creates a dynamic script loading block for consecutive `<script>` with `src` attributes.
76+
* Hashes all scripts, both inline and generated dynamic script loading blocks.
77+
* Inserts a `<meta>` tag at the end of the `<head>` of the document with the generated hash-based CSP.
78+
*
79+
* @param html Markup that should be processed.
80+
* @returns The transformed HTML that contains the `<meta>` tag CSP and dynamic loader scripts.
81+
*/
82+
export async function autoCsp(html: string): Promise<string> {
83+
const { rewriter, transformedContent } = await htmlRewritingStream(html);
84+
85+
let openedScriptTag: StartTag | undefined = undefined;
86+
let scriptContent: SrcScriptTag[] = [];
87+
let hashes: string[] = [];
88+
89+
/**
90+
* Generates the dynamic loading script and puts it in the rewriter and adds the hash of the dynamic
91+
* loader script to the collection of hashes to add to the <meta> tag CSP.
92+
*/
93+
function emitLoaderScript() {
94+
const loaderScript = createLoaderScript(scriptContent);
95+
hashes.push(hashTextContent(loaderScript));
96+
rewriter.emitRaw(`<script>${loaderScript}</script>`);
97+
scriptContent = [];
98+
}
99+
100+
rewriter.on('startTag', (tag, html) => {
101+
if (tag.tagName === 'script') {
102+
openedScriptTag = tag;
103+
const src = getScriptAttributeValue(tag, 'src');
104+
105+
if (src) {
106+
// If there are any interesting attributes, note them down.
107+
const scriptType = getScriptAttributeValue(tag, 'type');
108+
if (shouldDynamicallyLoadScriptTagBasedOnType(scriptType)) {
109+
scriptContent.push({
110+
src: src,
111+
type: scriptType,
112+
async: getScriptAttributeValue(tag, 'async') !== undefined,
113+
defer: getScriptAttributeValue(tag, 'defer') !== undefined,
114+
});
115+
return; // Skip writing my script tag until we've read it all.
116+
}
117+
}
118+
}
119+
// We are encountering the first start tag that's not <script src="..."> after a string of
120+
// consecutive <script src="...">. <script> tags without a src attribute will also end a chain
121+
// of src attributes that can be loaded in a single loader script, so those will end up here.
122+
//
123+
// The first place when we can determine this to be the case is
124+
// during the first opening tag that's not <script src="...">, where we need to insert the
125+
// dynamic loader script before continuing on with writing the rest of the tags.
126+
// (One edge case is where there are no more opening tags after the last <script src="..."> is
127+
// closed, but this case is handled below with the final </body> tag.)
128+
if (scriptContent.length > 0) {
129+
emitLoaderScript();
130+
}
131+
rewriter.emitStartTag(tag);
132+
});
133+
134+
rewriter.on('text', (tag, html) => {
135+
if (openedScriptTag && !getScriptAttributeValue(openedScriptTag, 'src')) {
136+
hashes.push(hashTextContent(html));
137+
}
138+
rewriter.emitText(tag);
139+
});
140+
141+
rewriter.on('endTag', (tag, html) => {
142+
if (tag.tagName === 'script') {
143+
const src = getScriptAttributeValue(openedScriptTag!, 'src');
144+
const scriptType = getScriptAttributeValue(openedScriptTag!, 'type');
145+
openedScriptTag = undefined;
146+
// Return early to avoid writing the closing </script> tag if it's a part of the
147+
// dynamic loader script.
148+
if (src && shouldDynamicallyLoadScriptTagBasedOnType(scriptType)) {
149+
return;
150+
}
151+
}
152+
153+
if (tag.tagName === 'body' || tag.tagName === 'html') {
154+
// Write the loader script if a string of <script>s were the last opening tag of the document.
155+
if (scriptContent.length > 0) {
156+
emitLoaderScript();
157+
}
158+
}
159+
rewriter.emitEndTag(tag);
160+
});
161+
162+
const rewritten = await transformedContent();
163+
164+
// Second pass to add the header
165+
const secondPass = await htmlRewritingStream(rewritten);
166+
secondPass.rewriter.on('startTag', (tag, _) => {
167+
secondPass.rewriter.emitStartTag(tag);
168+
if (tag.tagName === 'head') {
169+
// See what hashes we came up with!
170+
secondPass.rewriter.emitRaw(
171+
`<meta http-equiv="Content-Security-Policy" content="${getStrictCsp(hashes)}">`,
172+
);
173+
}
174+
});
175+
return secondPass.transformedContent();
176+
}
177+
178+
/**
179+
* Returns a strict Content Security Policy for mitigating XSS.
180+
* For more details read csp.withgoogle.com.
181+
* If you modify this CSP, make sure it has not become trivially bypassable by
182+
* checking the policy using csp-evaluator.withgoogle.com.
183+
*
184+
* @param hashes A list of sha-256 hashes of trusted inline scripts.
185+
* @param enableTrustedTypes If Trusted Types should be enabled for scripts.
186+
* @param enableBrowserFallbacks If fallbacks for older browsers should be
187+
* added. This is will not weaken the policy as modern browsers will ignore
188+
* the fallbacks.
189+
* @param enableUnsafeEval If you cannot remove all uses of eval(), you can
190+
* still set a strict CSP, but you will have to use the 'unsafe-eval'
191+
* keyword which will make your policy slightly less secure.
192+
*/
193+
function getStrictCsp(
194+
hashes?: string[],
195+
// default CSP options
196+
cspOptions: {
197+
enableBrowserFallbacks?: boolean;
198+
enableTrustedTypes?: boolean;
199+
enableUnsafeEval?: boolean;
200+
} = {
201+
enableBrowserFallbacks: true,
202+
enableTrustedTypes: false,
203+
enableUnsafeEval: false,
204+
},
205+
): string {
206+
hashes = hashes || [];
207+
let strictCspTemplate: Record<string, string[]> = {
208+
// 'strict-dynamic' allows hashed scripts to create new scripts.
209+
'script-src': [`'strict-dynamic'`, ...hashes],
210+
// Restricts `object-src` to disable dangerous plugins like Flash.
211+
'object-src': [`'none'`],
212+
// Restricts `base-uri` to block the injection of `<base>` tags. This
213+
// prevents attackers from changing the locations of scripts loaded from
214+
// relative URLs.
215+
'base-uri': [`'self'`],
216+
};
217+
218+
// Adds fallbacks for browsers not compatible to CSP3 and CSP2.
219+
// These fallbacks are ignored by modern browsers in presence of hashes,
220+
// and 'strict-dynamic'.
221+
if (cspOptions.enableBrowserFallbacks) {
222+
// Fallback for Safari. All modern browsers supporting strict-dynamic will
223+
// ignore the 'https:' fallback.
224+
strictCspTemplate['script-src'].push('https:');
225+
// 'unsafe-inline' is only ignored in presence of a hash or nonce.
226+
if (hashes.length > 0) {
227+
strictCspTemplate['script-src'].push(`'unsafe-inline'`);
228+
}
229+
}
230+
231+
// If enabled, dangerous DOM sinks will only accept typed objects instead of
232+
// strings.
233+
if (cspOptions.enableTrustedTypes) {
234+
strictCspTemplate['require-trusted-types-for'] = ['script'];
235+
}
236+
237+
// If enabled, `eval()`-calls will be allowed, making the policy slightly
238+
// less secure.
239+
if (cspOptions.enableUnsafeEval) {
240+
strictCspTemplate['script-src'].push(`'unsafe-eval'`);
241+
}
242+
243+
return Object.entries(strictCspTemplate)
244+
.map(([directive, values]) => {
245+
return `${directive} ${values.join(' ')};`;
246+
})
247+
.join('');
248+
}
249+
250+
/**
251+
* Returns JS code for dynamically loading sourced (external) scripts.
252+
* @param srcList A list of paths for scripts that should be loaded.
253+
*/
254+
function createLoaderScript(srcList: SrcScriptTag[], enableTrustedTypes = false): string {
255+
if (!srcList.length) {
256+
throw new Error('Cannot create a loader script with no scripts to load.');
257+
}
258+
const srcListFormatted = srcList
259+
.map(
260+
(s) =>
261+
`['${encodeURI(s.src).replaceAll("'", "\\'")}', ${s.type ? "'" + s.type + "'" : undefined}, ${s.async ? 'true' : 'false'}, ${s.defer ? 'true' : 'false'}]`,
262+
)
263+
.join();
264+
return enableTrustedTypes
265+
? `
266+
var scripts = [${srcListFormatted}];
267+
var policy = self.trustedTypes && self.trustedTypes.createPolicy ?
268+
self.trustedTypes.createPolicy('angular#auto-csp', {createScriptURL: function(u) {
269+
return scripts.includes(u) ? u : null;
270+
}}) : { createScriptURL: function(u) { return u; } };
271+
scripts.forEach(function(scriptUrl) {
272+
var s = document.createElement('script');
273+
s.src = policy.createScriptURL(scriptUrl[0]);
274+
s.type = scriptUrl[1];
275+
s.async = !!scriptUrl[2];
276+
s.defer = !!scriptUrl[3];
277+
document.body.appendChild(s);
278+
});\n`
279+
: `
280+
var scripts = [${srcListFormatted}];
281+
scripts.forEach(function(scriptUrl) {
282+
var s = document.createElement('script');
283+
s.src = scriptUrl[0];
284+
s.type = scriptUrl[1];
285+
s.async = !!scriptUrl[2];
286+
s.defer = !!scriptUrl[3];
287+
document.body.appendChild(s);
288+
});\n`;
289+
}

0 commit comments

Comments
 (0)