Question

我没什么问题。我需要在我的应用程序中连接互联网上的图像，但我遇到错误。

拒绝加载图片'http // testdomain / test_img.jpg'，因为它违反了以下内容安全策略指令：“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>

Answer 1

使用不同选项设置或删除content_security_policy对我来说根本不起作用，但Chrome开发文档中有一个非常好的解释：

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();

来源：https://developer.chrome.com/apps/app_external#webview

您只需要使用XMLHttpRequest加载图片。我不需要将主机添加到permissions。哪个好，因为在我的情况下主机是动态的。

Answer 2

因为您尝试从外部来源加载图片，所以它违反了您在那里的CSP：

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

完全删除CSP。

内容安全政策Chrome应用（img-src）

的manifest.json

的index.html

2 个答案: