欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angularjs中图片等链接unsafe的问题解决

程序员文章站 2022-05-23 18:06:50
angular对href是有安全检查的,只能生成它认为安全的链接,所以在我们加载绑定base64的图片或者一些tel,sml链接的时候,会报出类似下面的错误 解决办法很简单,...

angular对href是有安全检查的,只能生成它认为安全的链接,所以在我们加载绑定base64的图片或者一些tel,sml链接的时候,会报出类似下面的错误

Angularjs中图片等链接unsafe的问题解决

解决办法很简单,AngularJS内置的provider——$compileProvider

$compileProvider.aHrefSanitizationWhitelist([regexp])可以设置urls安全列表的正则表达式,就不会报上面的问题了。

例如:解决图片中base64图片加载失败的问题:

angular.module('app').config( [
    '$compileProvider',
    function( $compileProvider )
    {   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(data):/);
        // Angular v1.2 之前使用 $compileProvider.urlSanitizationWhitelist(/^\s*(data):/)
    }
]);

这样就可以解决了

更多url设置如:

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https|ftp|mailto|tel|file|sms|data):/);
$compileProvider.aHrefSanitizationWhitelist([regexp]):

恢复或者覆盖白名单urls安全列表的正则表达式,主要用于阻止通过html链接进行的xss攻击。任何将要通过数据绑定到a[href]的urls首先都要经过初始化并转化为一个绝对url,如果这个url匹配aHrefSanitizationWhitelist的正则表达式规则,则会被添加到DOM中,否则转化后的url将会加上’unsafe:‘前缀后才能被加入到DOM中。

参数:
    regexp:RegExp,新的白名单正则表达式。
return:
    如果参数不存在则返回现在的正则表达式,否则返回自身以供链式调用。