[javascript] 확장 페이지에서 AngularJS가 URL을 “안전하지 않은”으로 변경합니다.

Program / 글쓴이

앱 목록과 함께 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는와 unsafe:같은 프로토콜 을 사용할 때 허용되지 않는 URL을 앞에 붙 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 설명서 를 참조하십시오.

답변

누구든지 이미지 에이 문제가있는 경우 :

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

답변

우편, 전화 및 SMS가 필요한 경우 다음을 사용하십시오.

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

답변

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의 bypassSecurityTrustResourceUrl방법을.

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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

답변