확장 페이지에서 AngularJS가 URL을 "unsafe:"로 변경합니다.

확장 페이지에서 AngularJS가 URL을 "unsafe:"로 변경합니다.

앱 목록과 함께 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는 디폴트로 유효하게 되어 있습니다.Angular는 화이트리스트가 아닌 URL 앞에 다음과 같이 붙습니다.unsafe:다음과 같은 프로토콜을 사용할 때chrome-extension:.

화이트리스트를 작성하기 좋은 장소chrome-extension:protocol은 모듈의 구성 블록에 있습니다.

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:.

Angular를 참조하십시오.자세한 내용은 JS $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):/);
}]);

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

        }]);

Google Chrome은 다음과 같이 협력하기 위해 확장 기능을 필요로 합니다.Content Security Policy (CSP).

다음 요건을 충족하기 위해 내선번호를 변경해야 합니다.CSP.

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

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

또한 각진JS는ngCsp사용할 필요가 있는 지시문입니다.

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

위해서Angular 2+사용할 수 있습니다.DomSanitizer의bypassSecurityTrustResourceUrl방법.

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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

언급URL : https://stackoverflow.com/questions/15606751/angularjs-changes-urls-to-unsafe-in-extension-page