Failed to load image because it's violating content security policy

Question

In chrome app I am trying to load images from external link but getting error

Refused to load the image 'unsafe:https://www.google.co.in/images/srpr/logo11w.png' because it violates the following Content Security Policy directive: "img-src 'self' blob: filesystem: data: chrome-extension-resource:

I already added content_security_policy in manifest.json file

"content_security_policy": "img-src 'self' https://www.google.co.in/ blob: filesystem: data: chrome-extension-resource:;"

and

also explicitly added URL protocols to Angular's whitelist using a regular expression

.config(['$compileProvider',
    function ($compileProvider) {
        var currentImgSrcSanitizationWhitelist = $compileProvider.imgSrcSanitizationWhitelist();
        var newImgSrcSanitizationWhiteList = currentImgSrcSanitizationWhitelist.toString().slice(0, -1)
        + '|chrome-extension:'
        + currentImgSrcSanitizationWhitelist.toString().slice(-1);

        console.log("Changing imgSrcSanitizationWhiteList from " + currentImgSrcSanitizationWhitelist + " to " + newImgSrcSanitizationWhiteList);
        $compileProvider.imgSrcSanitizationWhitelist(newImgSrcSanitizationWhiteList);
    }
        ]);

but still error is there.

Xan Xan · Accepted Answer · 2016-05-11T10:28:35

You cannot override CSP for Chrome Apps (that key is only for extensions).

You will need to adapt your App to fetch then locally cache the images - you can't embed them directly. See Google's guide on Referencing external resources.

Also, take another look at this question - if you're getting unsafe: in your URLs you aren't doing it correctly.

Failed to load image because it's violating content security policy

1 Answers