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

Question

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

Answer 1

您需要使用正则表达式将 URL 协议显式添加到 Angular 的白名单中。默认情况下仅启用http、https和。当使用诸如.ftpmailtounsafe: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):/);
}]);

Answer 4

谷歌浏览器需要它的扩展来配合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'bypassSecurityTrustResourceUrl方法。

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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