javascript - AngularJS changes URLs to "unsafe:" in extension page

ID : 20392

viewed : 24

Tags : javascriptangularjssecuritygoogle-chrome-extensionjavascript

Top 5 Answer for javascript - AngularJS changes URLs to "unsafe:" in extension page

vote vote

92

You need to explicitly add URL protocols to Angular's whitelist using a regular expression. Only http, https, ftp and mailto are enabled by default. Angular will prefix a non-whitelisted URL with unsafe: when using a protocol such as chrome-extension:.

A good place to whitelist the chrome-extension: protocol would be in your module's config block:

var app = angular.module( 'myApp', [] ) .config( [     '$compileProvider',     function( $compileProvider )     {            $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);         // Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)     } ]); 

The same procedure also applies when you need to use protocols such as file: and tel:.

Please see the AngularJS $compileProvider API documentation for more info.

vote vote

86

In case anyone has this problem with images, as well:

app.config(['$compileProvider', function ($compileProvider) {     $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/); }]); 
vote vote

71

If you just need for mail, tel and sms use this:

app.config(['$compileProvider', function ($compileProvider) {     $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|sms|tel):/); }]); 
vote vote

69

Google Chrome require its extensions to cooperate with Content Security Policy (CSP).

You need to modify your extension to fulfill the requirements of CSP.

https://developer.chrome.com/extensions/contentSecurityPolicy.html

https://developer.mozilla.org/en-US/docs/Security/CSP

Also, angularJS has ngCsp directive which you need to use.

http://docs.angularjs.org/api/ng.directive:ngCsp

vote vote

57

<a href="{{applicant.resume}}" download> download resume</a>   var app = angular.module("myApp", []);      app.config(['$compileProvider', function($compileProvider) {          $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);         $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);          }]); 

Top 3 video Explaining javascript - AngularJS changes URLs to "unsafe:" in extension page

Related QUESTION?