我正在尝试在我的网站上显示图片。
这是我的main.js：
var myApp = angular.module('myApp', ['ngSanitize']);
myApp.factory('Cards', function() {
var Cards = {};
Cards.sets = [
{
"name":"Theros",
"code":"THS",
"releaseDate":"2013-09-27",
"border":"black",
"type":"expansion",
"block":"Theros",
"cards":[
{
"layout":"normal",
"type":"Creature -- Demon",
"types":[
"Creature"
],
"colors":[
"Black"
],
"multiverseid":373661,
"name":"Abhorrent Overlord",
"subtypes":[
"Demon"
],
"cmc":7,
"rarity":"Rare",
"artist":"Slawomir Maniak",
"power":"6",
"toughness":"6",
"manaCost":"{5}<img src=\"resources/images/manaSymbols/black.png\"><img src=\"resources/images/manaSymbols/black.png\">",
"text":"Flying<br /><br />When Abhorrent Overlord enters the battlefield, put a number of 1/1 black Harpy creature tokens with flying onto the battlefield equal to your devotion to black. (Each <img src=\"resources/images/manaSymbols/black.png\"> in the mana costs of permanents you control counts toward your devotion to black.)<br /><br />At the beginning of your upkeep, sacrifice a creature.",
"number":"75",
"imageName":"abhorrent overlord"
}
]
}
];
return Cards;
})
这是我的index.html：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Magic Cards</title>
<link rel="stylesheet" href="foundation/css/foundation.min.css">
</head>
<body>
<div ng-app="myApp">
<div ng-controller="CardsCtrl">
<input type="text" ng-model="search.$">
<table ng-repeat="set in cards.sets | orderBy:'releaseDate'">
<tr>
<td colspan=5><h3><b><i>{{set.name}} -- </i></b></h3><h5><b><i>{{set.block}}</i></b></h5></td>
</tr>
<tr>
<td width=200><b>CARD NAME</b></td>
<td width=300><b>CARD TYPE</b></td>
<td width=200><b>MANA COST</b></td>
<td width=200><b>COLORS</b></td>
<td width=75><b>CMC</b></td>
<td><b>TEXT</b></td>
</tr>
<tr ng-repeat="cards in set.cards | orderBy:'name' | filter:search">
<td enter>{{cards.name}}</td>
<td>{{cards.type}}</td>
<td ng-bind-html="cards.manaCost"></td>
<td>{{cards.colors}}</td>
<td>{{cards.cmc}}</td>
<td ng-bind-html="cards.text"></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.0.4/angular-sanitize.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>
我试图逃避引号，你可以说。但是当我检查元素（在Chrome中）时，我看到的只是<img>。我可以说这将是一个完全愚蠢的东西，我错过了，但它一直在困扰我。有什么建议吗？
答案 0 :(得分：0)
默认情况下，使用
对内部HTML编辑的内容进行清理$sanitize服务
通过将html解析为标记来清理输入。然后将所有安全令牌（来自白名单）序列化为正确转义的html字符串。这意味着没有不安全的输入可以使它成为返回的字符串，但是，由于我们的解析器比典型的浏览器解析器更严格，因此某些模糊的输入（可能被浏览器识别为有效的HTML）可能无法生成它通过消毒杀菌剂。白名单使用
aHrefSanitizationWhitelist和imgSrcSanitizationWhitelist$compileProvider的功能进行配置。
<强> imgSrcSanitizationWhitelist（正则表达式）
检索或覆盖在img [src]清理期间用于将安全URL列入白名单的默认正则表达式。 清理是一项旨在通过HTML链接防止XSS攻击的安全措施。 任何将通过数据绑定分配给img [src]的url首先被标准化并变成绝对url。然后，将url与imgSrcSanitizationWhitelist正则表达式进行匹配。如果找到匹配项，则将原始URL写入dom。否则，绝对url的前缀为'unsafe：'字符串，然后才会将其写入DOM。
imgSrcSanitizationWhitelist：var imgSrcSanitizationWhitelist = /^\s*(https?|ftp|file):|data:image\//;
<img src="/path/img.jpg">）不匹配，因此会被“消毒”。regex匹配。app.config(function($compileProvider){
var regex = // whatever you need to match
$compileProvider.imgSrcSanitizationWhitelist(regex);
})