javascript - AngularJSは、拡張ページでURLを「unsafe：」に変更します

Question

アプリのリストで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:から来たの？

score 363 · Accepted Answer

正規表現を使用して、URLプロトコルをAngularのホワイトリストに明示的に追加する必要があります。デフォルトではhttp、、、およびのみが有効になっています。Angularは、などのプロトコルを使用する場合、ホワイトリストに登録されていないURLの前にプレフィックスを付けます。httpsftpmailtounsafe: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 $compileProviderAPIのドキュメントを参照してください。

score 57 · Accepted Answer

誰かが画像でこの問題を抱えている場合も同様です：

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

score 6 · Accepted Answer

メールだけが必要な場合は、telとsmsはこれを使用します。

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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

        }]);

score 2 · Accepted Answer

Angular 2+あなたはの方法を使うことができDomSanitizerますbypassSecurityTrustResourceUrl。

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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

javascript - AngularJSは、拡張ページでURLを「unsafe：」に変更します

6 に答える 6

Related

Reference