Content Security Policy Chrome App (img-src)

2
votes

I have little problem. I need to connect image from the internet in my app, but I encounter error.

Refused to load the image 'http//testdomain/test_img.jpg' because it violates the following Content Security Policy directive: "img-src 'self' data: chrome-extension-resource:".

manifest.json

{
  "name": "TEST",
  "description": "TEST for TEST",
  "version": "0.1",
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "permissions": [
  "storage",
  "fullscreen",
],
"content_security_policy": "img-src 'self' data: chrome-extension-resource:;",
  "icons": {"128": "icon.png" }
}

index.html

<html><img src="http://testdomain/test_img.jpg"></html>
2
javascriptgoogle-chrome

2 Answers

5
votes

Setting or removing content_security_policy with different options did not work at all for me, but there is a very good explanation in the chrome dev docs:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://supersweetdomainbutnotcspfriendly.com/image.png', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  var img = document.createElement('img');
  img.src = window.URL.createObjectURL(this.response);
  document.body.appendChild(img);
};
xhr.send();

Source: https://developer.chrome.com/apps/app_external#webview

You just need to load the image with XMLHttpRequest. I did NOT need to add the host to the permissions though. Which is good, because in my case the host is dynamic.

1
votes

Because you're trying to load an image from an external source, it violates the CSP you have in there:

img-src 'self' data: chrome-extension-resource

Just remove the CSP entirely.