Javascript AngularJS将URL更改为；不安全：“；在扩展页中

我正在尝试将Angular与应用程序列表一起使用，每一个应用程序都是查看应用程序更详细信息的链接（

apps/app.id

）：

---

不安全：

来自哪里？

谷歌浏览器要求其扩展与

内容安全策略（CSP）

合作

您需要修改扩展以满足

CSP

的要求

另外，angularJS有您需要使用的

ngCsp

指令

---

您需要使用正则表达式将URL协议显式添加到Angular的白名单中。默认情况下，仅启用了

http

、

https

、

ftp

和

mailto

。Angular在使用协议（如

chrome扩展名：

）时，将在非白名单URL前面加上

不安全：

将

chrome扩展：

协议列入白名单的好地方是在模块的配置块中：

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。

如果有人对图像有此问题，也请参阅：

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

---

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

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

var-app=angular.module（“myApp”，[]）；
app.config（['$compileProvider'，函数（$compileProvider）{
$compileProvider.ahrefsanitationwhitelist（/^\s*（https？| local | data | chrome扩展）：/）；
$compileProvider.imgsrcsanitationwhitelist（/^\s*（https？| local | data | chrome扩展）：/）；
}]);

对于

Angular 2+

您可以使用

DomSanitizer

的

绕过安全信任资源URL

方法

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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

---

我已经有了该页面“”的ngCsp指令。这是我清单中的CSP:

“内容安全策略”：“脚本src'self”https://ssl.google-analytics.com；对象src“self”，

是否需要更改清单中的csp？在Angular 1.2中，方法名称变成了

$compileProvider.ahrefSanitationWhiteList

默认IMGSRCSanitationWhiteList Angular 1.2-rc2是

/^\s*（https？| ftp |文件）：|数据：image\/

，要访问chrome打包应用程序的本地文件系统，应将文件系统：chrome扩展名：添加到正则表达式的末尾。请注意，在Angular 1.2中，实际上有两种方法—一种用于链接（AHREFSanizationWhiteList），另一种用于图像（IMGSRCSanitationWhiteList）。这让我陷入了一段时间。对于Chrome打包的应用程序，您需要在末尾添加

|blob:Chrome扩展名：

。请注意，文件协议与blob协议不同：

$compileProvider.ahrefsanitationwhitelist（/^\s*（https？| file | blob | ftp | mailto | Chrome扩展名）：/）我尝试使用正则表达式列出我用html2canvas捕获的图像屏幕截图，现在没有显示不安全的错误：数据；但是图像没有被捕捉到。你知道我应该用什么正则表达式吗？我正在捕获一个图像/png作为base64 url。现在html看起来是这样的：与实际的base64 url不同，请记住，在这种情况下，您应该使用
ng href
，而不仅仅是
href
：我只使用一个控制器方法
函数gotour（url）{$window.location.href=url；}
嗨，您能为同样的方法提供一个更详细的示例吗，你能告诉我你特别想要什么，我也许能更好地帮助你。
app.config(['$compileProvider', function ($compileProvider) {
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|sms|tel):/);
}]);

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

        }]);

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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