AngularJS меняет URL-адреса на "unsafe:" на странице расширения

Question

Я пытаюсь использовать Angular со списком приложений, и каждое из них является ссылкой, чтобы увидеть приложение более подробно (apps/app.id):

<a id="{{app.id}}" href="apps/{{app.id}}" >{{app.name}}</a>

Каждый раз, когда я нажимаю на одну из этих ссылок, Chrome показывает URL-адрес как

unsafe:chrome-extension://kpbipnfncdpgejhmdneaagc.../apps/app.id

Где unsafe: родом из?

Answer 1

Вам необходимо явно добавить URL-протоколы в белый список Angular с помощью регулярного выражения. Только http, https, ftp а также mailto включены по умолчанию. Angular будет добавлять префикс URL-адреса, не входящего в белый список, с unsafe: при использовании протокола, такого как chrome-extension:,

Хорошее место, чтобы внести в белый список chrome-extension: протокол будет в конфигурационном блоке вашего модуля:

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

Та же самая процедура также применяется, когда вам нужно использовать протоколы, такие как file: а также tel:,

Пожалуйста, обратитесь к документации AngularJS $ compileProvider API для получения дополнительной информации.

Answer 2

В случае, если у кого-то есть эта проблема с изображениями, а также:

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

Answer 3

Если вам просто нужна почта, тел и смс используйте это:

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

Answer 4

<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):/);

        }]);

Answer 5

За Angular 2+ ты можешь использовать DomSanitizer"s bypassSecurityTrustResourceUrl метод.

import {DomSanitizer} from '@angular/platform-browser';

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

    constructor(
        private sanitizer: DomSanitizer){
        this.sanitizedURL = this.sanitizer.bypassSecurityTrustResourceUrl(); 
    }
}

Answer 6

Google Chrome требует, чтобы его расширения сотрудничали с Content Security Policy (CSP),

Вы должны изменить свое расширение, чтобы выполнить требования CSP,

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

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

Кроме того, angularJS имеет ngCsp директива, которую вам нужно использовать.

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