本文展示了关于XSS(跨站点脚本)的不同方案，以及如何在AngularJS中使用SCE ($ SCE provider)和净化服务来正确处理XSS。如果我错过了什么重要的东西，请直接评论/建议。同时，请原谅我的错别字。

以下几点将是我下一次演讲的重点：

代码转换所有HTML安全地插入HTML，同时忽略像“脚本”这样的标签。如果你不注意它，它将同样有风险和丑陋，尤其是当有一个“img”标签时。依赖并插入纯HTML；这也有风险，让网页变丑。使用ng-bind命令对HTML进行代码转换

您可以使用ng-bind命令对整个网页进行代码转换。它将对所有的HTML标签进行代码转换，但仍按原样显示它们。下面的代码显示了ng-bind的用法。

divform h1AngularJS XSS演示测试/h1 hr/div class='col-md-12 '输入类型=' Text ' ng-model=' name ' class=' form-control col-MD-12 ' ng-change=' processHtmlCode()'占位符='输入一些HTML文本.'//Div/form/Div HR/Div style=' padding :20 px ' span strong g-bind指令：请注意，html文本是按原样输入的。/strong/span br/span ng-bind=' hello message ' { hello message } }/span/div下图证明了上面的备注。注意输入字段中的HTML代码。它与HTML页面中的完全相同。

以安全的方式插入HTML，或者使用ng-bind-html指令忽略“脚本”等元素

这是解决XSS袭击的关键。也就是说，你还是要注意“img”(作为白名单的一部分；还有一个空元素)因为它可以在你的网页上显示任何图片(包括非法图片)，也可能会给你的网页带来不良影响。使用ng-bind-html指令，可以直接忽略“Script”等JavaScript标签。ng-bind-html指令将计算表达式。并以安全的方式将结果HTML插入到元素中。对于用户将输入html内容(如注释)的情况，将其放入ng-bind-html指令中可以确保文本在白名单中被编码为安全的HTML字符。安全字符的白名单被编码为$sanitize的一部分，这将在下面描述。以下内容包含在安全列表(直接从源代码获得):中。

空元素：复制代码如下：area，br，col，hr，img，wbr。详情请访问http://dev.w3.org/html5/spec/Overview.html#void-elements

块元素：的复制代码如下：地址、文章、旁白、块引用、标题、中心、del、dir、div、dl、图、图标题、页脚、h1、H2、H3、H4、H5、h6、页眉、组、HR、ins、地图、菜单

内联元素：的复制代码如下：a、缩写、缩写、b、BDI、bdo、big、br、cite、code、del、dfn、em、font、I、img、ins、kbd、label、map、mark、q、ruby、RP、rt等等

结束标记元素：复制代码如下： colgroup，DD，dt，Li，p，tbody，TD，tfoot，th，thead，tr，RP，rt .有关详细信息，请访问

需要规避以下两个元素，因为它们的内容不可信。在这种情况下，如果您想要显示它们，您应该使用$sce服务并调用Angular trustAsHtml方法来执行下面提到的元素。

下面的代码展示了ng-bind-html指令的使用。

divform h1AngularJS XSS演示测试/h1 hr/div class='col-md-12 '输入类型=' Text ' ng-model=' name ' class=' form-control col-MD-12 ' ng-change=' processHtmlCode()'占位符='输入一些HTML文本.'//div/form/div HR/div style=' padd :20 px ' spang-bind-html directive :请注意，在文本字段中输入文本后，图像会适当显示。/Span Span ng-bind-HTML=' hello message '/Span/div下图显示了在文本字段中输入HTML代码并以安全的方式将Angular插入DOM时的样子。请注意，“img”元素是上面列表中空元素的一部分。因为代码被输入到文本字段中，所以显示为“img”的图片被放在信任列表(白名单)中

信任并插入整个HTML

警告：这很危险，很容易导致你的网站污染。只有当你知道并且完全确认的时候，你才应该使用trustAsHtml。这样，你就有足够的信心相信这篇文章是可信的。您应该使用$sce服务并调用trustAsHtml方法将整个Html插入到DOM中。当使用$sce服务调用trustAsHtml方法信任一段Html代码时，请注意其中的HTML和JavaScript代码块。在这种情况下，一段代码如“style。hello {color:red}/style "被插入，最后可能会给现有的HTML元素添加样式。这可能不太好。人们可能会用非法图片替换背景图片。

脚本类型=' text/JavaScript ' angular . module(' hello app '，['ngSanitize'])。控制器(' HelloCtrl '，['$scope '，' $sce '，函数($scope，$ SCE){ $ scope . name=' '；$ scope . processhtmlcode=function(){ $ scope . hello message=' h1 ' $ scope . name '/h1 '；$ scope . trusted message=$ SCE . trusteshtml($ scope . name)；} }])/脚本！-注意在UI中编码的类hello，因此元素以红色绘制-div style=' padd :20 px ' span class=' hello ' strong ng-bind directive :注意，HTML文本是按原样输入的。/strong/span br/span class=' hello ' ng-bind=' hello message ' { hello message } }/span/div HR/div style=' padd :20 px ' span请注意，脚本标记也会执行。/span span ng-bind-html=' trusted message '/span/下面的图片div显示了要插入DOM的HTML样式代码在文本字段中输入时的样子。这里的结果是其他HTML元素也是红色的，如下所示。在某些场景下，黑客可能会插入带有背景风格的段落，这可能会显示原本不应该显示的背景，给最终用户带来不好的体验。

HTML标题标题hello anglarjs/标题链接rel='样式表type=' Text/CSS ' href=' http://最大cdn。bootstrapcdn。com/bootstrap/3。2 .0/CSS/bootstrap。量滴' CSS '脚本类型=' Text/JavaScript ' src=' http 3360http://Ajax。谷歌api。com/Ajax/libs/AngularJS/1。3 .3/棱角分明。量滴js /脚本类型//div/form HR//div HR/div style=' padd :20 px ' span class=' hello ' strong ng-bind指令：注意，HTML文本是按原样输入的/strong/span br/span class=' hello ' ng-bind=' hello message ' { hello message } }/span/div HR/div style=' padd :20 px ' span请注意，脚本标记也会执行span ng-bind-html='可信消息'/span/div HR/div style=' padd :20 px ' span ng-bind-html指令：请注意，作为在文本字段中输入文本的结果，图像会适当显示/span span ng-bind-html=' hello message '/span/div HR/script type=' text/JavaScript ' angular。模块(' hello app '，['ngSanitize']).控制器(' HelloCtrl '，['$scope '，' $sce '，函数($scope，$ SCE){ $ scope。名称=' '；$ scope。processhtmlcode=function(){ $ scope。hello消息=' h1 ' $作用域。名称'/h1 '；$ scope。可信消息=$ SCE。trusteshml($ scope。姓名)；} }])/脚本/正文/html