AngularJS змінює URL-адреси на "небезпечні:" на сторінці розширення

Я намагаюся використовувати 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:?

Потрібно чітко додати протоколи URL-адрес до білого списку Angular, використовуючи регулярний вираз. Тільки http, https, ftpі mailtoвключені за замовчуванням. Кутовий буде встановлювати префікс 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:.

Для отримання додаткової інформації див. Документацію API AngularJS $ compileProvider API .

Якщо у когось є проблема із зображеннями:

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

Якщо вам просто потрібна пошта, tel та sms, скористайтеся цим:

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

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

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

        }]);

Для цього Angular 2+можна використовувати метод DomSanitizer's bypassSecurityTrustResourceUrl.

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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