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

【问题标题】：AngularJS changes URLs to "unsafe:" in extension pageAngularJS 在扩展页面中将 URL 更改为“不安全：”
【发布时间】：2013-03-14 11:00:38
【问题描述】：

我正在尝试将 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: 来自哪里？

【问题讨论】：

请记住，在这种情况下您应该使用ng-href 而不仅仅是href：docs.angularjs.org/api/ng/directive/ngHref
我只是使用控制器方法function gotoURL(url) { $window.location.href = url; }

标签： javascript angularjs security google-chrome-extension

【解决方案1】：

谷歌浏览器要求其扩展与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

【讨论】：

我已经拥有该页面的 ngCsp 指令“”。这是我清单中的 CSP："content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", 我需要更改清单中的 csp 吗？

【解决方案2】：

您需要使用正则表达式将 URL 协议显式添加到 Angular 的白名单中。默认仅启用http、https、ftp 和mailto。当使用诸如chrome-extension: 之类的协议时，Angular 会在未列入白名单的 URL 前加上 unsafe:。

将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 了解更多信息。

【讨论】：

在 Angular 1.2 中方法名变成了$compileProvider.aHrefSanitizationWhitelist
默认 imgSrcSanitizationWhitelist Angular 1.2-rc2 为 /^\s*(https?|ftp|file):|data:image\//，要访问 chrome 打包应用程序的本地文件系统 |filesystem:chrome-extension: 应添加到正则表达式的末尾。
请注意，在 Angular 1.2 中，实际上有两种方法——一种用于链接 (aHrefSanitizationWhitelist)，另一种用于图像 (imgSrcSanitizationWhitelist)。这让我停留了一段时间。
对于 Chrome 打包应用程序，您需要在末尾添加 |blob:chrome-extension:。
注意文件协议与blob协议不同：$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|blob|ftp|mailto|chrome-extension):/);

【解决方案3】：

如果有人对图像也有这个问题：

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

【讨论】：

我尝试使用正则表达式将我使用 html2canvas 捕获的图像屏幕截图列入白名单，现在没有错误显示 unsafe:data;但图像没有被捕获。知道我应该使用什么正则表达式吗？我正在将图像/png 捕获为 base64 url。现在 html 看起来像：而不是实际的 base64 url

【解决方案4】：

如果您只需要邮件、电话和短信，请使用：

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

【讨论】：

【解决方案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):/);

        }]);

【讨论】：

【解决方案6】：

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

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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

【讨论】：

嗨，你能提供一个更详细的例子吗？
嗨@JayeshChoudhary，你能告诉我你具体在寻找什么，我也许可以更好地帮助你。