AngularJS在扩展页面中将URL更改为“不安全:”


186

我正在尝试将Angular与一系列应用程序配合使用,并且每个链接都是一个链接,用于更详细地查看应用程序(apps/app.id):

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

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

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

哪里unsafe:来的?


1
请记住,ng-href在这种情况下,您不仅应该使用hrefdocs.angularjs.org/api/ng/directive/ngHref
hartz89 '16

我只是使用一种控制器方法function gotoURL(url) { $window.location.href = url; }
Todd Hale,

Answers:


362

您需要使用正则表达式将URL协议显式添加到Angular的白名单中。只有httphttpsftpmailto默认启用。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文档以获取更多信息。


11
在Angular 1.2中,方法名称变为$compileProvider.aHrefSanitizationWhitelist
Mart

6
默认的imgSrcSanitizationWhitelist Angular 1.2-rc2为/^\s*(https?|ftp|file):|data:image\//,用于访问chrome打包应用的本地文件系统|filesystem:chrome-extension:应添加到正则表达式的末尾。
亨宁

29
请注意,在Angular 1.2中,实际上有两种方法-一种用于链接(aHrefSanitizationWhitelist),一种用于图像(imgSrcSanitizationWhitelist)。这让我停留了一段时间。
mdierker

1
对于Chrome打包的应用,您需要添加|blob:chrome-extension:到末尾。
adam8810

1
请注意,文件协议不同于Blob协议: $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|blob|ftp|mailto|chrome-extension):/);
Arnaud Leyder 2015年

56

如果有人也有图像问题,请执行以下操作:

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

我尝试使用正则表达式将我用html2canvas捕获的图像屏幕快照白名单,现在没有错误说出unsafe:data;。但没有捕获图像。知道我将使用什么正则表达式吗?我正在捕获image / png作为base64网址。现在的html看起来像:<img ng-src =“ data :,” class =“ img-responding” src =“ data:,”>而不是实际的base64网址
hakuna

6

如果您只需要邮件,电话和短信,请使用以下命令:

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

2

Google Chrome需要其扩展程序才能与协作Content Security Policy (CSP)

您需要修改扩展名才能满足的要求CSP

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

https://developer.mozilla.org/zh-CN/docs/Security/CSP

另外,angularJS具有ngCsp您需要使用的指令。

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


我已经对该页面'<html ng-app =“ myApp” ng-csp>'使用了ngCsp指令。这是清单中的CSP:"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", 是否需要更改清单中的csp?
ebi 2013年

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

        }]);

2

对于Angular 2+您可以使用DomSanitizerbypassSecurityTrustResourceUrl方法。

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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

嗨,您能提供一个更详细的示例吗?
Jayesh Choudhary

嗨,@ JayeshChoudhary,您能否让我知道您在寻找什么,我可能会为您提供更好的帮助。
拉曼
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.