angularjs - 无法加载图像，因为它违反了内容安全策略

Question

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

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 协议(protocol)显式添加到 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 (该 key 仅适用于扩展)。

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

另外，再看看this question - 如果您的网址中出现unsafe:，则表示您的做法不正确。