This is the fix for both image and base64. Need to add img-src ‘self’ blob: data:; As follow: <meta http-equiv=”Content-Security-Policy” content=” worker-src blob:; child-src blob: gap:; img-src ‘self’ blob: data:; default-src * ‘self’ ‘unsafe-inline’ ‘unsafe-eval’ data: gap: content:”>
Have you tried adding the CSP line to your manifest as per your CSP link? “content_security_policy”: “script-src ‘self’ ‘unsafe-eval’; object-src ‘self'”
Your code is not working because it violates the default Content Security Policy. I’ve created a screencast of one minute to show what’s wrong: First, I’ve shown how to debug the problem. Right-click on your popup button, and click on “Inspect popup”. After doing that, you will see the following error message: Refused to execute … Read more
default-src, frame-ancestors, and frame-src are all part of the Content-Security-Policy response header. frame-src Restricts what domains and page can load in an iframe. The HTTP Content-Security-Policy (CSP) frame-src directive specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>. For example: If the website at https://example.com has a response header … Read more
The unsafe-inline option is to be used when moving or rewriting inline code in your current site is not an immediate option but you still want to use CSP to control other aspects (such as object-src, preventing injection of third-party js etc.). You are correct in that unsafe-inline does not offer much security as it … Read more
I had the same problem. I’m sad to say this was the best we have done. We basically identified what we use and don’t use. We even had to put unsafe-eval in some instructions because we were using third party controls that couldn’t work without it. At least we avoid calls to external urls. default-src … Read more
For recent versions of Chrome (46+), the previously accepted answer is no longer true. unsafe-inline still has no effect (in the manifest and in meta header tags), but per the documentation, you can use the technique described here to relax the restriction. Hash usage for <script> elements The script-src directive lets developers whitelist a particular … Read more
Edited answer for @angular/cli>=8.2 From this Github thread, one can use the index property in angular.json to control the generation of the application’s HTML index: build: { … “configurations”: { “production”: { “index”: { “input”: “src/index.production.html”, “output”: “index.html” }, … } } } Original answer I’ve found a way to have restrictive CSP on my … Read more
The best way to fix this would be to take that $.ajax(…) call out of the document and move it into an external file called ajax-call.js, and then do the following: <script src=”ajax-call.js”></script> The reason that’s better is, if you’re already going to the effort of setting a CSP policy for your document, then you … Read more
Unfortunately, there aren’t many ways around this. Resources require either whitelisting (in the case of remote resources, like this one) or inlining tricks (i.e. nonce or sha256-…) when CSP is active. At the end of the day, though, CSP can probably still make your site safer and protect most resources. Depending on what you are … Read more