使用 ngSanitize 允许某些样式属性

Posted 2023-03-06

【中文标题】使用 ngSanitize 允许某些样式属性

【英文标题】：Allow certain style attributes with ngSanitize

【发布时间】：2014-11-08 19:16:59

【问题描述】：

我在 AngularJS 应用程序中使用ngSanitize 来删除不需要或危险的部分。但是，内容是使用 html Richtext 编辑器生成的，并且包含一些样式信息，这些信息会被删除（例如文本颜色）。

我知道删除内联 CSS 样式很有用，但我更喜欢具有不会被删除的 CSS 属性的 白名单。有没有办法在不授予所有 CSS 属性的情况下实现这一点？

【问题讨论】：

你不应该清理服务器端吗？

@MattWay 你可能是对的，但另一种方法是解析内联的 CSS 并通过一些格式化 HTML 标签来包装项目，但我无法做到，例如可以这样设置字体颜色吗？

【参考方案1】：

textAngular 的人有一个 ng-sanitize 的分支，它允许样式属性。使用他们的版本而不是 ng-sanitize。

【参考方案2】：

阅读 ngSanitize 的文档，它看起来好像使用两个白名单来确定要阻止哪些数据 (described here, in $compileProvider)。

这两个白名单是aHrefSanitizationWhitelist([regexp]) 和imgSrcSanitizationWhitelist([regexp])。但是，这两个似乎只处理链接的 URL 以防止 XSS 攻击。

您可以使用sce.trustAsHtml()（或者，如果这仍然是一件事，可能是data-bind-html-unsafe，但我认为这已被弃用）但这并不是您想要的；这将使您可以访问所有 HTML，无论是安全的还是不安全的。

查看documentation for $sce 可能是值得的。到目前为止，有一个转义 CSS 的选项，但我不确定它是否会转义 HTML 标记中的内联 CSS。到目前为止，我没有看到为 parseAs 方法提供白名单的选项。

编辑：

查看$sanitizesource code，它看起来好像设置为允许样式标签中的内容，但不允许样式属性。除非您更改源代码，否则样式属性将被 sanitize 剥离。但是，类不会被剥离，因此您可能有一个解决方法。 （事实上​​，通过允许类而不是内联样式，您可以限制 cmets 部分中的样式使用。）

似乎唯一的另一种选择是自己推出，除非有人已经拥有。

【讨论】：

style 已被 sanitize 删除，但在我的情况下允许上课，也应该对其他人有所帮助。