feat(@angular-devkit/build-angular): add CSP support for inline styles

[crisbeto]

Companion change to angular/angular#49444. Adds an HTML processor that finds the ngCspNonce attribute and copies its value to any inline style tags in the HTML. The processor runs late in the processing pipeline in order to pick up any style tag that might've been added by other processors (e.g. critical CSS).

[alan-agius4]

I am not certain that creating a new plugin is the right direction.

The plugin addresses only one use case (CSR), but it does not add nonce to the app-shell, which uses extended Critters directly. See:

angular-cli/packages/angular_devkit/build_angular/src/builders/app-shell/index.ts

Lines 95 to 107 in 5a171dd

	if (inlineCriticalCssProcessor) {
	const { content, warnings, errors } = await inlineCriticalCssProcessor.process(html, {
	outputPath,
	});
	html = content;
	if (warnings.length || errors.length) {
	spinner.stop();
	warnings.forEach((m) => context.logger.warn(m));
	errors.forEach((m) => context.logger.error(m));
	spinner.start();
	}
	}

Extending this class and doing the logic in here IMHO would be better as we’ll share the same logic and it would be easier to port this change to Universal https://github.com/angular/universal/blob/main/modules/common/tools/src/inline-css-processor.ts.

I was under the impression, that we were going to add nonce support in Critters, as adding nonce to the style elements is also not sufficient to make the page CSP complaint, crtitters adds onload events to link elements, as such we will need to modify critters to output this is a CSP complaint way.

Currently critters will change

<link rel="stylesheet" href="styles.css”>

to

<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

Now, we need to amend the above and make it CSP complaint when nonce is provided (Or we can do the same logic irrespective if CSP is enabled.)

<link rel="stylesheet" href=“styles.css” ngAsyncStyle>
<script nonce=“..">
  document.querySelectorAll('link[ngAsyncStyle]’)
      .forEach(s => s.addEventListener(‘load’, () => s.media = ‘all'));
</script>

All the above, would be complex to do with this sort of plugin created, but should be more doable using by extended Critters.

[crisbeto]

The change I was planning to make to Critters was to allow for custom attributes to be specified and we can achieve the same without touching Critters at all using the changes in this PR. I can bake this logic into the Critters plugin, but I think that it makes sense to apply it to all inline style tags, not just the ones generated by Critters.

I think that the link use case would require a much larger change to Critters so for now I would rather focus only on the style tags.

[alan-agius4]

I can bake this logic into the Critters plugin, but I think that it makes sense to apply it to all inline style tags, not just the ones generated by Critters.

Fair enough.

[crisbeto]

Comments have been addressed.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}