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

[Splaktar]

📚 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

[gautamsingal]

@Splaktar Can I pick this up?

[Splaktar]

@gautamsingal thank you for volunteering to help with this. Ideally, I would like to get some discussion going here.

I am curious if others have additional best practices or recommendations.

Of course, some of that discussion could happen in a PR as well.

[dsm0880]

@gautamsingal @Splaktar Just came across this. Just wanted to give an up vote. In the guidance I would highly recommend ensuring people utilize the report-only at first. In addition what would be interesting is looking at this from an attacker perspective. I know Angular does do some sanitization, but how does CSP help with other vulnerabilities? The explanations help us devs talk with Stakeholders who will typically just want to know "are you secure or not." On top of this high level question, these scoring websites that give you A,B,C,D... are very attractive to them (accurate or not). When the CSP header requires style-src unsafe we need to come up with a good explanation. Going through implementation of CSP on my site now, if I find anything interesting will post.

[gautamsingal]

Thanks @dsm0880 for the feedback.

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

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

[Splaktar]

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.

This issue is about updating the documentation. The issue you are seeing appears to be #6361. In that issue, there is a workaround, but multiple people report that it is not effective. I don't believe that there is a workaround that has been verified to work.

The Angular team doesn't give ETAs on features or bug fixes. So I would advise that you do not make business decisions based on the hope that something changes/gets fixed in the future. Note that the issue has been known and unfixed for 4 years now.

That said, your mention of a security team blocking deployment based on CSP violations should help to increase the priority of #6361 (if you post the details in that issue).

[AElmoznino]

Having very little knowledge of CSP and understanding it's implications, I find the documentation hard to read and implement.
IMO it should be either secure by default, or super easy to implement. I can't find any simple guide/docs on how to implement a nonce or hash for the inline styles.
I face the same problem as @jyotitushir - our security team not allowing to have unsafe inline values in CSP.

[Splaktar]

An update to this:

• [innerHTML] triggers CSP alert/report was fixed in v10.1.0 via b950d46
  • However, I don't think that there was any associated documentation update related to that work.

[Splaktar]

More updates!

There is a lot of discussion on angular/angular-cli#21711 (Feature Request : Add Support for Strict Content Security Policy).

Also there's an open PR #43553 to start to make the Angular CSP docs a little more useful.

[bob-watson]

It's hard to tell what remains to be done on this.
I'm closing it out, but if there's more to do, reopen it and describe the remaining work, please.

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