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


186

Я пытаюсь использовать 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:взялся?


1
Имейте в виду, что вы должны использовать ng-hrefв этом случае, а не просто href: docs.angularjs.org/api/ng/directive/ngHref
hartz89

Я просто использую метод контроллераfunction gotoURL(url) { $window.location.href = url; }
Тодд Хейл

Ответы:


362

Вам необходимо явно добавить 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 для получения дополнительной информации.


11
В угловой 1.2 названии методы стало$compileProvider.aHrefSanitizationWhitelist
Март

6
По умолчанию imgSrcSanitizationWhitelist Angular 1.2-rc2 используется /^\s*(https?|ftp|file):|data:image\//для доступа к локальной файловой системе для упакованного приложения Chrome |filesystem:chrome-extension:в конце регулярного выражения.
Хеннинг

29
Обратите внимание, что в Angular 1.2 на самом деле есть два метода - один для ссылок (aHrefSanitizationWhitelist) и один для изображений (imgSrcSanitizationWhitelist). Это застряло на некоторое время.
mdierker

1
Для Chrome Packaged App вам нужно добавить |blob:chrome-extension:в конец.
adam8810

1
Обратите внимание, что протокол файла отличается от протокола BLOB-объекта: $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|blob|ftp|mailto|chrome-extension):/);
Арно Лейдер,

56

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

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

Я попытался использовать регулярное выражение для белого списка снимков экрана, которые я снимаю с помощью html2canvas, теперь нет ошибки, которая говорит unsafe: data; но изображение не захватывается. Любая идея, что регулярное выражение я буду использовать? Я захватил изображение / PNG как base64 URL. Теперь HTML выглядит так: <img ng-src = "data :," class = "img-отзывчивый" src = "data:,"> вместо действительного url base64
hakuna

6

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

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

2

Для работы 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


У меня уже есть директива ngCsp для этой страницы '<html ng-app = "myApp" ng-csp>'. Это CSP из моего манифеста: "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", мне нужно изменить csp в манифесте?
Эби

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

        }]);

2

Для Angular 2+Вы можете использовать DomSanitizer«S bypassSecurityTrustResourceUrlметод.

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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

Привет, Можете ли вы предоставить более сложный пример для того же.
Джаеш Чоудхари

Привет @JayeshChoudhary, пожалуйста, дайте мне знать, что вы конкретно ищете, и я мог бы помочь вам лучше.
Раман
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.