Chrome 应用程序 - CSP 问题 - 在 AngularJS 中加载本地图像

Question

当我尝试放置本地图像并尝试从路径访问应用程序时出现图像加载问题，我将在调试器上显示以下错误

UI 使用 Angular 和 jQuery

在调试器 (F12) 上发出消息

Refused to load the image 'unsafe:chrome-extension://omlogoojoebcjhbnnbhdehopicfcoljf/public/assets/img/avatars/avatar_02_tn.png' because it violates the following Content Security Policy directive: "img-src 'self' blob: filesystem: data: chrome-extension-resource:".

{
    "name": "System App",
    "description": "My first Chrome App.",
    "version": "0.22",
    "manifest_version": 2,
    "app": {
        "background": {
            "scripts": ["background.js"]
        }
    },
    "icons": {
        "16": "calculator-16.png",
        "128": "calculator-128.png"
    },
    "content_security_policy": "img-src 'self' blob: filesystem: data: chrome-extension-resource:;",
    "permissions": [
        "history",
        "unlimitedStorage",
        "storage",
        "filesystem",
        "debugger"
    ]
}

Answer 1

Chrome 应用程序带有一个您无法回避的 default csp。它更像是一个上限，您可以通过使用 csp 元标记来降低但不能增加。

如果是 angular js 只需添加以下内容以允许加载本地图像

.config(function($compileProvider) {
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|content|blob)|data:image\/|\/?img\//);
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|ghttps?|ms-appx|chrome-extension)|\/?app\//);
}

Answer 2

@aWebDeveloper 的回答引出了正确的方法，但在我添加 chrome-extension:

之前它对我不起作用

$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|content|blob|chrome-extension)|data:image\/|\/?img\//);

最终代码：

app.config( [
    '$compileProvider',
    function( $compileProvider )
    {   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
        $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|content|blob|chrome-extension)|data:image\/|\/?img\//);
    }
]);

Chrome 应用程序 - CSP 问题 - 在 AngularJS 中加载本地图像

Chrome App - CSP issue - local image loading in AngularJS

image

content-security-policy

google-chrome-app