Chrome App - CSP issue - local image loading in AngularJS

1
votes

Images loading issue when I try to put local image and try to access in app from path i will show below error on debugger

UI using Angular and jQuery

Issue message on Debugger(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"
    ]
}
2
imagegoogle-chrome-appcontent-security-policy
Note: you can't have the content_security_policy key in an app's manifest - Xan
The "unsafe:" part of the URL hints that you are using Angular. Is that correct? - Xan
@Xan : yes, true I am using angular. Now what to do ? - Ankur Loriya
@Xan: I also refer developer.chrome.com/extensions/manifest - Ankur Loriya
found anything ankur - aWebDeveloper

2 Answers

1
votes

@aWebDeveloper's answer leads to the right way but it didn't work for me until I added chrome-extension:

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

Final code:

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\//);
    }
]);
1
votes

Chrome apps come with a default csp which you can't sidestep. It's more like a upper ceiling which you can reduce by using the csp meta tag but can't increase.

In case of angular js just add the following to allow local images to be loaded

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