current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

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"
    ]
}
share|improve this question
    
Note: you can't have the content_security_policy key in an app's manifest – Xan Jan 27 at 17:07
1  
The "unsafe:" part of the URL hints that you are using Angular. Is that correct? – Xan Jan 27 at 17:10
    
@Xan : yes, true I am using angular. Now what to do ? – Ankur Loriya Jan 28 at 5:10
    
@Xan: I also refer developer.chrome.com/extensions/manifest – Ankur Loriya Jan 28 at 5:12
    
found anything ankur – aWebDeveloper Feb 26 at 11:01
up vote 0 down vote

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\//);
}
share|improve this answer
up vote 0 down vote

@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\//);
    }
]);
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.