Angular изменяет URL-адреса на "небезопасные:" на странице расширения

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

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

Каждый раз, когда я нажимаю на одну из этих ссылок, Chrome показывает URL как небезопасный: chrome-extension://kpbipnfncdpgejhmdneaagc...../apps/app.id

Откуда появляется небезопасный?

Ответы

Ответ 1

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

будет префикс URL без привязки unsafe:.

Хорошее место для белого списка протокола 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:.

Дополнительную информацию см. в документации по API-интерфейсу AngularJS $compileProvider.

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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