如何使用 DOMPurify 渲染 <style> 标签答案

【问题标题】：How to render <style> tag using DOMPurify如何使用 DOMPurify 渲染 <style> 标签
【发布时间】：2020-09-07 10:50:30
【问题描述】：

在我们的应用程序中，针对一个非常具体的场景（仅在一个地方），我们需要绕过标签并使用 DOMPurify 在 DOM 上呈现它。

var htmlScript = "<style>*{color: red}</style>"; // something like this
var clean = dompurify.sanitize(htmlScript, { ADD_TAGS: ['style']});
return clean;

有人知道如何实现吗？

【问题讨论】：

与其注入内联样式，CSP 通常会将其标记为高度可疑甚至可能完全禁止，为什么不使用带有类的样式表，您可以在需要应用这些样式的元素上进行切换，而是?
这就是我们接收不应更改的数据的方式。你知道有什么解决办法吗？
并非没有其他细节：您显示的代码会生成一个字符串，所以现在的答案是“将纯 HTML 注入 DOM 的方式”，完全独立于 dompurify - 还有网络上的大量页面和答案，解释了如何将“一些 HTML 代码”转换为页面/webview 上的真实元素或实际 DOM 中的节点。因此，可能值得考虑的是，这可能根本不是一个 dompurify 问题，并对其进行编辑以仅关注您真正需要的内容（如果它真的只是将 HTML 转换为活动元素，甚至删除它）

标签： javascript dompurify

【解决方案1】：

我相信您可以通过 these 3 options 做到这一点：FORCE_BODY、ALLOWED_TAGS 和 ALLOWED_ATTR。

例子：

outHtml = domPurify.sanitize(outHtml, {
    FORCE_BODY: true,
    ALLOWED_ATTR: ['style', 'class', 'type', 'href', 'rel'],
    // must add these tag manually if use this option.
    ALLOWED_TAGS: [
      'link',
      'figure',
      'table',
      'caption',
      'thead',
      'tr',
      'th',
      'tbody',
      'td',
    ],
  });

【讨论】：