AngularJS, uzantı sayfasında URL'leri "güvenli değil:" olarak değiştirir

Angular'ı bir uygulama listesiyle kullanmaya çalışıyorum ve her biri bir uygulamayı daha ayrıntılı olarak görmek için bir bağlantı ( apps/app.id):

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

Bu bağlantılardan birini her tıkladığımda Chrome URL'yi şu şekilde gösterir:

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

Nereden unsafe:geliyor?

Normal bir ifade kullanarak Angular'ın beyaz listesine URL protokollerini açıkça eklemeniz gerekir. Sadece http, https, ftpve mailtovarsayılan olarak etkindir. Açısal, unsafe:gibi bir protokol kullanılırken beyaz listeye eklenmemiş bir URL'nin önüne ön ek ekler chrome-extension:.

chrome-extension:Protokolü beyaz listeye eklemek için iyi bir yer modülünüzün yapılandırma bloğunda olacaktır:

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

Aynı prosedür, file:ve gibi protokolleri kullanmanız gerektiğinde de geçerlidir tel:.

Daha fazla bilgi için lütfen AngularJS $ compileProvider API belgelerine bakın.

Herhangi birinin resimlerde de bu sorunu olması durumunda:

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

Sadece posta, tel ve sms için ihtiyacınız varsa bunu kullanın:

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

Google Chrome, uzantılarının işbirliği yapmasını gerektirir Content Security Policy (CSP).

Öğesinin gereksinimlerini karşılamak için uzantınızı değiştirmeniz gerekir CSP.

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

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

Ayrıca, angularJS'nin ngCspkullanmanız gereken yönergesi vardır.

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

        }]);

İçin 's yöntemini Angular 2+kullanabilirsiniz .DomSanitizerbypassSecurityTrustResourceUrl

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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