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会将非白名单网址加上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 documentation。

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

Answer 4

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

Answer 5

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

        }]);

Answer 6

对于Angular 2+，您可以使用DomSanitizer的{{1}}方法。

bypassSecurityTrustResourceUrl

AngularJS在扩展页面中将URL更改为“unsafe：”

6 个答案: