未能加载图像，因为它违反了内容安全策略

Question

在 chrome 应用程序中，我尝试从外部 link 加载图像，但出现错误

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:

我已经在 manifest.json 文件中添加了 content_security_policy

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

和

还使用正则表达式将 URL 协议显式添加到 Angular 的白名单中

.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);
    }
        ]);

但还是有错误。

Answer 1

您不能覆盖CSP for Chrome Apps（该密钥仅用于扩展）。

您需要调整您的应用程序以获取然后在本地缓存图像 - 您不能直接嵌入它们。请参阅 Google 关于 Referencing external resources 的指南。

此外，再看一下 - 如果您的网址中出现 unsafe:，则说明您的操作不正确。

未能加载图像，因为它违反了内容安全策略

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

angularjs

content-security-policy

google-chrome-app