Приложение Chrome - проблема CSP - загрузка локального изображения в AngularJS

Проблема с загрузкой изображений, когда я пытаюсь поместить локальное изображение и пытаюсь получить доступ к приложению из пути, я покажу ниже ошибку в отладчике

Пользовательский интерфейс с использованием Angular и jQuery

Сообщение о проблеме в отладчике (F12)

Отказано в загрузке изображения «unsafe:chrome-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"
    ]
}

image content-security-policy google-chrome-app
person Ankur Loriya    schedule 27.01.2016    source источник
comment
Примечание. У вас не может быть ключа content_security_policy в манифесте приложения.   -  person Xan    schedule 27.01.2016
comment
Небезопасная часть URL намекает на то, что вы используете Angular. Это правильно?   -  person Xan    schedule 27.01.2016
comment
@Xan: да, правда, я использую angular. Что теперь делать?   -  person Ankur Loriya    schedule 28.01.2016
comment
@Xan: я также ссылаюсь на developer.chrome.com/extensions/manifest   -  person Ankur Loriya    schedule 28.01.2016
comment
нашел что-нибудь анкур   -  person aWebDeveloper    schedule 26.02.2016
comment
@aWebDeveloper: все еще неправильный путь.   -  person Ankur Loriya    schedule 26.02.2016

Ответы (2)


arrow_upward
1
arrow_downward

Ответ @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\//);
    }
]);
person Xero Kael    schedule 20.03.2016

arrow_upward
1
arrow_downward

Приложения Chrome поставляются с 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\//);
}
person aWebDeveloper    schedule 26.02.2016