Update docs to reflect support status of trusted types

[bbreijer]

🐞 bug report

Affected Package

Angular-CLI (webpack) and CSP trusted types integration.

Is this a regression?

Not that I can determine. I started testing the issue with v9.1.x; It was also present there.

Description

For security reasons it is important to have proper Content-Security-Policy (CSP) headers present. The Angular documentation suggests the use of trusted typed. The suggested configuration works well as long as no lazy loaded modules are used.
Once lazy loaded modules are used and loading of one of the modules is triggered, the modules load violates the CSP rules. Suggested CSP settings should also work with lazy loading or a secure alternative would be helpfull.

🔬 Minimal Reproduction

• Create a new project: ng new --routing --strict --style scss csp-lazy-loading
• Generate a new module ng g m lazymod --routing --route lazymod --module app.module
• Add the CSP header in angular.json (in serve.options): "headers" : {"Content-Security-Policy": "trusted-types angular; require-trusted-types-for 'script';"}

result of steps above is available in https://github.com/bbreijer/ng11-csp-lazy-loading

• start development server: ng serve --prod
• navigate to http://localhost:4200/lazymod in Chrome

🔥 Exception or Error

In runtime.js

This document requires 'TrustedScriptURL' assignment.

In main.js

ERROR Error: Uncaught (in promise): TypeError: Failed to set the 'src' property on 'HTMLScriptElement': This document requires 'TrustedScriptURL' assignment.
TypeError: Failed to set the 'src' property on 'HTMLScriptElement': This document requires 'TrustedScriptURL' assignment.
    at Function.i.e (runtime.js:formatted:56)
    at loadChildren (main.js:1)
    at Ln.loadModuleFactory (main.js:1)
    at Ln.load (main.js:1)
    at c.project (main.js:1)
    at c._tryNext (main.js:1)
    at c._next (main.js:1)
    at c.next (main.js:1)
    at t._subscribe (main.js:1)
    at t._trySubscribe (main.js:1)
    at Z (polyfills.js:1)
    at Z (polyfills.js:1)
    at polyfills.js:1
    at l.invokeTask (polyfills.js:1)
    at Object.onInvokeTask (main.js:1)
    at l.invokeTask (polyfills.js:1)
    at i.runTask (polyfills.js:1)
    at m (polyfills.js:1)

🌍 Your Environment

Angular Version:

Angular CLI: 11.2.8
Node: 14.5.0
OS: darwin x64

Angular: 11.2.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.8
@angular-devkit/build-angular   0.1102.8
@angular-devkit/core            11.2.8
@angular-devkit/schematics      11.2.8
@angular/cli                    11.2.8
@schematics/angular             11.2.8
@schematics/update              0.1102.8
rxjs                            6.6.7
typescript                      4.1.5

Anything else relevant?
Documentation:

• https://angular.io/guide/security#enforcing-trusted-types
• https://angular.io/guide/lazy-loading-ngmodules

Related issues:

• CSP/require-trusted-types/lazy-loading error angular-cli#20113
• docs(security): add useful guidance to the CSP section of the guide #37631

Reproduced in Chrome 89.0.

[alan-agius4]

Trusted types API is still in it's draft phase and are not supported in a number of browsers, see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types. Webpack 5, which the Angular CLI uses under the hood as bundler see webpack/webpack#9856 (comment).

I'll this up for discussion with the rest of the team to decide on a way forward.

[bbreijer]

@alan-agius4 Thanks for taking this up for discussion.
According to the trusted types documentation, the browser i tested on is supported. The main issue is that, for the supported browsers, trusted headers do not work with lazy loading. Therefore i think that the short term fix would be to remove the recommendation for the Security documentation and the long term fix would be to either have trusted types work with lazy loading or have some way to use nonce. What do you think?

[alan-agius4]

Had a chat with @mgechev, and indeed we should remove trusted types from being recommended in angular.io until this issue is resolved upstream.

[jelbourn]

@aikidave the context here is that one of our dependencies (Webpack) has an issue with supported trusted types that makes them difficult/impossible to use for some use-cases, even though everything seemed to be squared away on the Angular side. We probably need to update the docs to reflect this newly discovered limitation.

[aikithoughts]

I will have a PR that removes the content about Trusted Types ready in a day or so.

[aikithoughts]

We have removed Trusted Types from our documentation until the product team confirms it works as intended with WebPack. See #41754.

[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.}