为什么AngularJS在使用ng-bind-html时会去除数据属性

Why does AngularJS strip out data- attributes when using ng-bind-html?

本文关键字：数据属性 ng-bind-html AngularJS 为什么      更新时间：2023-09-26

我正在使用contentEditablediv来使用户能够格式化他们的文章。我对 html 内容进行了一些处理并保留它。

当观众想要阅读文章时，我正在使用ng-bind-html来呈现结果。我不想使用$sce.trustAsHtml因为我仍然希望 AngularJS 清理用户输入，并且因为我不信任所有输入。我想要的只是让 AngularJS 清理允许元素上的一些属性。它似乎剥离了ID和数据属性。（但保留班级和头衔）。

数据属性是否被认为是有害的？攻击者如何使用它们来攻击最终用户？有没有办法安全地使用它们，让 Angular 不将它们剥离出来？

下面是一个示例：

article.body = '<p data-guid="afasfa-afasfafas-faf-asasf" class="guid-tagged">Yes this is my article</p>';
<article ng-bind-html='article.body'></article>

以下是 Angular 在文章标签内输出的内容（注意去掉的数据属性）：

<p class="guid-tagged">Yes this is my article</p>

谢谢

如注释中所述，ng-bind-html通过清理器传递数据。此清理器从其中传递的所有输入中删除许多属性。此问题可能有助于解释更多：有关白名单属性的 ngSanitize 问题。源代码的这一部分包括所有被认为有效的属性，因此ngSanitize不会触及这些属性。

虽然 Angular 和 ngSanitize 工作人员对此进行了整理，但我发现这个线程有助于创建解决方法。特别是，答案涉及动态定义的属性。

绑定到具有此类属性的is-open，在ngSanitize完成清理后，我能够在锚标签上附加点击处理程序。

这是清理后的 HTML，请注意，我正在使用 cite 来存储目标锚点 ID，因为它是 ngSanitize 忽略的属性之一。 （您可以尝试使用href但我想不去管它）：

Please see <a href='#' cite='#another_faq'>here</a>

属性的 setter 中的代码（参见上面引用的 SO）然后操作 DOM 事件，我认为这与 Angular 方法论背道而驰，但有时你必须停止敲打你的头并让它工作：

if (isOpened) $('p.faq.answer').eq(item.position).find('a[cite]').each -> $(this).bind 'click', () -> $($(this).attr('cite')).click()

然后确保您有正确的锚点，目标 id 为 #another_faq ，在这种情况下。

相关文章：