Chrome App - CSP 问题 - AngularJS中的本地图像加载

Question

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

使用 Angular 和 jQuery 的 UI

调试器（F12）上的问题消息

拒绝加载图像 "不安全：铬 extension://omlogoojoebcjhbnnbhdehopicfcoljf/public/assets/img/avatars/avatar_02_tn.png" 因为它违反了以下内容安全策略指令： "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

@aWebDeveloper的答案导致了正确的方法，但在我添加chrome扩展之前它对我不起作用：

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

Answer 2

Chrome应用程序带有默认的CSP，您无法回避。它更像是一个上限，您可以使用 csp 元标记来减少它，但不能增加。

如果是角度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//);
}