AngularJS在扩展页面中将URL更改为"unsafe:"

Question

我正在尝试将Angular与应用列表一起使用,每个应用都是一个链接,可以更详细地查看应用(apps/app.id):

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

每次我点击其中一个链接时,Chrome都会将网址显示为

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

它unsafe:来自哪里？

Answer 1

您需要使用正则表达式向Angular的白名单中明确添加URL协议.只有http,https,ftp并mailto默认启用.unsafe:当使用诸如协议之类的协议时,Angular将为非白名单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文档.

Answer 2

万一有人对图像有这个问题,以及:

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

Answer 3

如果你只需要邮件,电话和短信使用这个:

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