在使用AngularJS的Chrome应用中,我可以直接将ngSrc指令用于内部

发布时间：2020-12-17 08:53:46 所属栏目：安全来源：网络整理

导读：我正在使用AngularJS编写Chrome应用程序.我知道在访问外部图像时,您必须执行跨源 XMLHttpRequest并将它们作为blob提供. 我有一堆内部图像(本地应用程序资源),它们遵循我想在ngRepeat中显示的模式. 我可以通过以下方式静态加载图像： img src="images/image1.

我正在使用AngularJS编写Chrome应用程序.我知道在访问外部图像时,您必须执行跨源 XMLHttpRequest并将它们作为blob提供.

我有一堆内部图像(本地应用程序资源),它们遵循我想在ngRepeat中显示的模式.

我可以通过以下方式静态加载图像：

<img src="images/image1.png"/>

但是,当我尝试在这样的重复中使用它们时：

<div ng-repeat="item in myList">
    <img ng-src="{{item.imageUrl}}"/>
</div>

我得到每个图像的错误(尽管错误中的图像确实存在),如下所示：

Refused to load the image 'unsafe:chrome-extension://hcdb...flhk/images/image1.png' because it violates the following Content Security Policy directive: "img-src 'self' data: chrome-extension-resource:".

我已经能够使用ng-src和XHR成功加载外部资源.对于动态加载的内部资源,是否必须遵循相同的模式？

更新 – 另一个简单示例

从最简单的Chrome应用程序(https://github.com/GoogleChrome/chrome-app-samples/tree/master/hello-world)开始,以下内容将在Chrome应用程序之外(在浏览器中)运行,但不在Chrome应用程序中：

的index.html

<!DOCTYPE html>
<html ng-app ng-csp>
<head>
    <title>Hello World</title>
    <script src="js/angular.min.js"></script>
    <script src="js/test.js"></script>
</head>
<body ng-controller="Ctrl">
    <img ng-src="{{imageUrl}}"/>
</body>
</html>

test.js

function Ctrl($scope) {
    $scope.imageUrl = 'hello_world.png';
}

我刚刚在另一个堆栈溢出问题中找到答案：

Angular changes urls to “unsafe:” in extension page

Angular有一个白名单正则表达式,图像src url必须匹配才能更改src. chrome-extension：// url默认情况下不匹配,因此您必须更改它.浏览此处获取更多信息：

http://docs.angularjs.org/api/ng/provider/ $compileProvider

我添加了以下代码以允许chrome-extension // urls到白名单(使用其他stackoverflow问题答案中的代码)：

angular.module('myApp',[])
.config( [
    '$compileProvider',function( $compileProvider ) {
        var currentImgSrcSanitizationWhitelist = $compileProvider.imgSrcSanitizationWhitelist();
        var newImgSrcSanitizationWhiteList = currentImgSrcSanitizationWhitelist.toString().slice(0,-1)
        + '|chrome-extension:'
        +currentImgSrcSanitizationWhitelist.toString().slice(-1);

        console.log("Changing imgSrcSanitizationWhiteList from "+currentImgSrcSanitizationWhitelist+" to "+newImgSrcSanitizationWhiteList);
        $compileProvider.imgSrcSanitizationWhitelist(newImgSrcSanitizationWhiteList);
    }
]);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!