Setting contentSecurityPolicy but img-src being ignored

Question

Initial Problem:

Chrome "refused to load the image 'data:image/svg+xml:.........'

It is referring to the arrows image that datatables uses for the sorting control. The solution appears to be to loosen up CSP a little.

Attempted fix: (in application.conf) contentSecurityPolicy = "img-src 'self' data:; script-src 'self' 'unsafe-eval' 'unsafe-inline' jquery-3.1.1.min.js *.facebook.net;"

Result: Chrome still refuses to load the image and it still says "Note that img-src was not explicitly set, so 'default-src' is used as a fallback.

Question:

In Play Framework, how does one specify multiple directives in contentSecurityProvider such that the browser will respect my img-src. Even if I do not have the security level set to the proper level, I would expect the browser to acknowledge that I have set img-src.

Infos:

Play Framework 2.6 (Java) DataTables 1.10.19 JQuery 3.3.1

Thank you for any advice.

Your pal, latj

Answer 1

You should use img-src 'self' data: *; exact or even something like img-src 'self' data: *.example.com;.

So in your case it would look like this:

"img-src 'self' data: *; script-src 'self' 'unsafe-eval' 'unsafe-inline' jquery-3.1.1.min.js *.facebook.net;"

If that won't help, please show your Google Chrome console log then.