如何在DOMPurify中允许iframe标签并保留其全部属性

嘿，我来帮你搞定这个问题！你已经通过ADD_TAGS把iframe加入了允许标签列表，但DOMPurify默认只会保留一组安全的默认属性，那些不在默认列表里的属性（比如allow、allowfullscreen、frameborder这些）就会被过滤掉。要保留这些属性，你需要在配置里明确告诉DOMPurify允许它们。

下面给你两种解决方案，推荐第一种更安全的精准配置方式：

方案一：精准指定需要保留的iframe属性（推荐） #

这种方式只添加你需要的属性，避免引入不必要的安全风险。在配置中新增ADD_ATTR数组，把iframe的额外属性都列进去：

var config = {
  ADD_TAGS: ['iframe'],
  // 添加需要保留的iframe专属属性
  ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'],
  KEEP_CONTENT: false
}

方案二：允许iframe的所有属性（不推荐，谨慎使用） #

如果你确定要保留iframe的所有属性（包括可能存在安全风险的属性），可以用ALLOW_ATTR设置为['*']，但一定要确保你的输入内容是完全可信的：

var config = {
  ADD_TAGS: ['iframe'],
  // 允许所有属性（风险较高）
  ALLOW_ATTR: ['*'],
  KEEP_CONTENT: false
}

修改后的完整代码示例 #

这里用方案一的精准配置来演示：

<!doctype html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/1.0.3/purify.min.js"></script>
</head>
<body>
  <!-- Our DIV to receive content -->
  <div id="sanitized"></div>

  <!-- Now let's sanitize that content -->
  <script>
    /* jshint globalstrict:true, multistr:true */
    /* global DOMPurify */
    'use strict';

    // Specify dirty HTML
    var dirty = '<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" scrolling="no" src="https://www.youtube.com/embed/vJG698U2Mvo" width="560"></iframe>';

    // 精准配置允许的标签和属性
    var config = {
      ADD_TAGS: ['iframe'],
      ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'],
      KEEP_CONTENT: false
    }

    // Clean HTML string and write into our DIV
    var clean = DOMPurify.sanitize(dirty, config);
    console.log('clean: ', clean)
    document.getElementById('sanitized').innerHTML = clean;
  </script>
</body>
</html>

运行这段代码后，净化后的输出就会完整保留所有需要的属性：

clean:

内容的提问来源于stack exchange，提问作者Henok Tesfaye