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


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


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


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


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

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

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

vote vote


<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