我正在使用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);
}
]);
