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

2020/10/20 05:21 · javascript ·  · 0评论

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

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

每次我点击这些链接之一时,Chrome会将网址显示为

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

哪里unsafe:来的?

您需要使用正则表达式将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文档以获取更多信息。

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

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

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

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

        }]);

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

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

    constructor(
        private sanitizer: DomSanitizer){
        this.sanitizedURL = this.sanitizer.bypassSecurityTrustResourceUrl(); 
    }
}
本文地址:http://javascript.askforanswer.com/angularjszaikuozhanyemianzhongjiangurlgenggaiweibuanquan.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!