docs(security): add useful guidance to the CSP section of the guide

📚 Docs or angular.io bug report

Description

In the Security Guide for Angular, the section on Content Security Policy (CSP) provides no useful guidance or information on the specific requirements, impediments, or issues related to using a CSP with an Angular application.

🔬 Minimal Reproduction

What’s the affected URL?**

https://angular.io/guide/security#content-security-policy

Reproduction Steps**

This is the entire guide for using Angular with a Content Security Policy (CSP):

---

Content security policy

Content Security Policy (CSP) is a defense-in-depth technique to prevent XSS. To enable CSP, configure your web server to return an appropriate Content-Security-Policy HTTP header. Read more about content security policy at An Introduction to Content Security Policy on the HTML5Rocks website.

---

Expected vs Actual Behavior**

We should clearly state some of the known limitations and configurations for using Angular with a CSP.

Here are some related, known issues that have been around for 1-4 years now

1. [innerHTML] triggers CSP alert/report
2. Inline <style> elements violate style-src Content Security Policy
3. feat: add a customizable nonce attribute for injected style elements
4. Empty style tag generated when one or more components don’t have styles

Suggested Steps

1. We should clearly state that allowing 'unsafe-inline' in style-src is required for Angular applications.
2. We should clearly state that 'self' is required for style-src and script-src in Angular applications.
3. We should recommend upgrade-insecure-requests.
4. We should document that connect-src must be configured with 'self' and any other font, script, or style sources that are retrieved by @angular/service-worker.

If there are some little-known work arounds for any of these issues, they should be documented in this guide.

🌍 Your Environment

Browser info

Chrome 85

Anything else relevant?

WebPageTest.org now gives web sites/apps a security grade based on a scan by Snyk.

https://angular.io/guide/security#content-security-policy gets the following score

[anno1985]

Some Google Security Engineers are pushing CSP +nonces quite a bit (instead of whitelists), so maybe also add a note about if/how that works (re webpack’s __webpack_nonce__)? And maybe add a link to the cli docs that mention that it supports SRI (subresource integrity hashes) with an explanation what that does (and maybe that you can also send hashes instead of nonces in CSP headers - with CSP 3 even for external scripts)…

[jyotitushir]

Similar issue is being faced in our application. Our angular7 application is not working without unsafe-inline with ‘style-src’. Our security team is not allowing to have unsafe inline values in CSP… Is there a work around for this? or by when can we expect a fix from angular.