CODEWITHSUNDEEP
htmlcanvasionic-frameworkcontent-security-policy
Rafael de Castro
Rafael de Castro

Reputation: 1098

Content Security Policy: "img-src 'self' data:"

I have an app, in which the user would be able to copy an image URL, paste it unto an input and the image will be loaded on a box.

But my app, keeps triggering this message:

Refused to load the image 'LOREM_IPSUM_URL' because it violates the following Content Security Policy directive: "img-src 'self' data:".

That's my meta tag:

<meta http-equiv="Content-Security-Policy" content="default-src *; 
img-src 'self' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; 
style-src  'self' 'unsafe-inline' *">

I'm using html2Canvas within the app, and when I remove this: "img-src 'self' data:"

It fires this error:

html2canvas.js:3025 Refused to load the image 'data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg'></svg>' because it violates
the following Content Security Policy directive: "default-src *". 
Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

Along with a bunch of other errors.

Upvotes: 79

Views: 247610

Answers (7)

run_the_race
run_the_race

Reputation: 2408

If img-src 'self' data: is not working for you because you manipulate image with JavaScript, try also adding blob objects with img-src * 'self' data: blob: ;

Upvotes: 1

Ved Prakash
Ved Prakash

Reputation: 121

I was facing this same issue with my jspdf and html2canvas. I had used nginx too, and had configured "Content-Security-Policy" in my "conf/nginx-template.conf" file. Below changes fixed it for me:

add_header Content-Security-Policy <...>; img-src 'self' data: https:; frame-src 'self' data:;

Upvotes: 2

Charleskimani
Charleskimani

Reputation: 510

For helmet users. Better practice instead of setting contentSecurityPolicy to false which should be the most last option. I used this in my app and it solves the issue very well. My app is hosted here. Checkout my source code here.

app.use(
  helmet.contentSecurityPolicy({
    useDefaults: true,
    directives: {
      "img-src": ["'self'", "https: data:"]
    }
  })
)

Upvotes: 10

Isiaka Mosudi
Isiaka Mosudi

Reputation: 15

This simply solves the problem:

img-src 'self' data:

But ensure multiple directives are separated using a semicolon (;)

Upvotes: -3

Hazel Z
Hazel Z

Reputation: 31

In addition to what has been contributed above by @manzapanza, you need to make sure if the CSP hasn't been configured in your application's web config file because if the setting exists it will override your meta tag setting in your index file like in the example below:

Index meta tag:

<meta http-equiv="Content-Security-Policy" content="default-src *;img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

Being overridden by a CSP setting in your web config file.

Web config setting:

<add name="Content-Security-Policy" value="default-src https: http: 'unsafe-inline'; img-src * 'self' data: https:;" />

In a case like this, consider having one set mostly in the system's web config file.

Upvotes: 3

Donald Shahini
Donald Shahini

Reputation: 925

img-src * 'self' data: https:; is not a good solution as it can make your app vulnerable against XSS attacks. The best solution here should be: img-src 'self' data:image/svg+xml. If it doesn't work try: img-src 'self' data:Consider changing it if you still have your directive as img-src * 'self' data: https:;

Upvotes: 45

manzapanza
manzapanza

Reputation: 6235

Try replacing this part:

img-src * 'self' data: https:;

So the complete tag:

<meta http-equiv="Content-Security-Policy" content="default-src *;
   img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
   style-src  'self' 'unsafe-inline' *">

Content Security Policy Reference

Upvotes: 77

Related Questions