Chrome 应用程序中的“拒绝加载图像”答案

【问题标题】："Refused to load the image" in a Chrome AppChrome 应用程序中的“拒绝加载图像”
【发布时间】：2015-08-13 04:09:36
【问题描述】：

我在飞镖中有这个问题

拒绝加载图片“https://**.png”，因为它违反了以下内容安全策略指令：“img-src 'self' 数据： chrome-extension-resource:"。

当尝试在图像元素中设置 src 时

ImageButtonInputElement button = new ImageButtonInputElement();
button.className="button_element";
button.src=el["imageUrl"]; //like "https://**.png"

使用这个 manifest.json

"content_security_policy":"img-src https://server.example.org"

有人知道帮助我吗？

谢谢

对不起我的英语不好

编辑

我也有同样的问题

<iframe id="iframe" src="https://server.example.org/example.html"></iframe>

拒绝框架 https://server.example.org/example.html 因为它违反了以下内容安全政策指令： "frame-src 'self' 数据：chrome-extension-resource:"。

【问题讨论】：

您的 CSP 字符串中有准确的服务器名称吗？我的意思是"img-src https://server.example.org"？因为 CSP 文档说如下：不允许使用 https:、https://* 和 https://*.com 等通用通配符；允许使用子域通配符，例如 https://*.example.com。
是的，我使用 (https://**.png) 作为示例，但在我的代码中我使用了完整链接。
为了清楚起见，我的意思是 CSP 字符串，而不是您尝试加载的图像 url。在您的示例中，https:// 没有其他任何内容，恕我直言，这是不允许的
是的，我使用了类似 "content_security_policy":"img-src server.example.org" 的代码。抱歉，编辑

标签： dart google-chrome-app content-security-policy

【解决方案1】：

应用程序cannot override the CSP。该清单密钥仅用于扩展。

See documentation 用于加载远程显示内容。

同样，您必须在 Chrome 应用中使用 <webview> 而不是 iframe。

【讨论】：

谢谢！我尝试用我采用的解决方案来回答。

【解决方案2】：

这是我最后采用的解决方案：

var imgRequest = new HttpRequest();
imgRequest.open('GET', url);
imgRequest.responseType = 'blob';
imgRequest.onReadyStateChange.listen((var request){
  if (imgRequest.readyState == HttpRequest.DONE &&
      imgRequest.status == 200) {
      FileReader reader = new FileReader();
      reader.onLoad.listen((fe) { 
        button.src = reader.result;
      });
      reader.readAsDataUrl(imgRequest.response); 
    }  

});

imgRequest.send();

【讨论】：