frame-src and object-src required for SVG images in Chrome about ember-cli-content-security-policy HOT 5 CLOSED

In addition to what I wrote above there has been some recent discussion on object-src and Flash[1]. Basically I think 'none' is a good default value for object-src (this is just a default value, the idea with CSP is to modify it to fit an individual site) and will close this issue for now.

Again, if you have thoughts on how to improve the documentation around this I'm all ears.

[1] https://static.googleusercontent.com/media/research.google.com/en//pubs/archive/45542.pdf

from ember-cli-content-security-policy.

I'm of the opinion that this is a good thing. SVG has so many potential attack vectors that it really boggles the mind. I didn't realize the problem until I started using this addon, got some violations, and dug into it. There's also the issue of very different SVG support, even between Firefox and Chrome. We could certainly change the settings such that SVG works out of the box, but then no one is slaughtering a goat in your console and prompting you to learn about how SVG and CSP combine (or don't, in some cases).

Here's a good SVG doing bad things resource: https://www.blackhat.com/docs/us-14/materials/us-14-DeGraaf-SVG-Exploiting-Browsers-Without-Image-Parsing-Bugs.pdf It includes some discussion of CSP, probably CSP level 1 or 1.1 given the age of the presentation.

@rwjblue do you have an opinion?

from ember-cli-content-security-policy.

@jfelchner I think this is outside the scope of this addon (the question concerns browsers and CSP).

from ember-cli-content-security-policy.

@sandstrom the other one I agreed with, but I have no idea who you are.

from ember-cli-content-security-policy.

@jfelchner Sorry for being brief, I should have explained better.

I agree it's bad that the console looks like a slaughtered 🐐 . However, accepting various uses of SVG by default would require relaxing a few directives. You mention object-src and frame-src. One could also add data: * and 'unsafe-inline' to that list (for other SVG + CSP issues, see below).

This would indeed make it work better with SVG out of the box, but would also open it up quite a bit. The idea with CSP is to start with a restrictive policy and whitelist things as needed for each particular site.

This Github blog post gives a few examples on how permissive CSP-policies can be dangerous.

Since the CSP policy is configurable you can adjust it as needed. But I'm not convinced loosening the defaults is the right way.

Perhaps better documentation around SVG in the readme could help.

Let me know what you think!

Examples of SVG + CSP issues:
https://forum.ionicframework.com/t/refuse-to-load-the-image-svg-issue-with-search-bar-icons/47234
https://pokeinthe.io/2016/04/09/black-icons-with-svg-and-csp/

from ember-cli-content-security-policy.