内容安全策略Chrome应用程序（img-src）

Question

内容安全策略Chrome应用程序（img-src）

3

我有一个小问题。我需要在我的应用程序中连接来自互联网的图像，但我遇到了错误。

由于违反以下内容安全策略指令："img-src 'self' data: chrome-extension-resource:"，拒绝加载图像'http//testdomain/test_img.jpg'。

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>

- vovcyan

2个回答

1

因为您正在尝试从外部来源加载图像，这违反了您在其中设置的 CSP。

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

完全删除CSP。

- Ross Joo

我从manifest.json中删除了字符串("content_security_policy": "img-src 'self' data: chrome-extension-resource:;",)，但问题仍然存在... 我可能做错了什么吗？ - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andyrandy · Accepted Answer

我曾尝试使用不同选项设置或删除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中。这很好，因为在我的情况下，主机是动态的。