如何安全地接受包含来自 WYSIWYG 编辑器的 iframe 的用户输入？答案

【问题标题】：How can I safely accept user input that includes iframes from a WYSIWYG editor?如何安全地接受包含来自 WYSIWYG 编辑器的 iframe 的用户输入？
【发布时间】：2021-07-06 16:19:39
【问题描述】：

我正在使用 TinyMCE WYSIWYG 编辑器来允许用户输入富文本。

用户可以在编辑器中粘贴指向富媒体的链接。编辑器会自动检测到这些并创建一个 iframe。例如，如果您粘贴 YouTube 链接，则会显示嵌入的 YouTube 视频。用户可以将编辑器的内容发布为帖子，其他用户可以看到。

我正在使用 DOMPurify 来清理输入。由于 XSS 问题，它（正确地）删除了任何 iframe。虽然我可以将 iframe 列入白名单，但我很犹豫。

我的问题是：我如何安全地接受这些 iframe，然后将它们呈现给其他用户查看/交互？

【问题讨论】：

标签： javascript node.js iframe tinymce

【解决方案1】：

在网上找不到任何清晰明了的解决方案，但我想我想出了一些不错的方法。以下是我允许用户安全提交 iframe 的方法。

首先，我只是 joi 验证库对输入执行一些基本验证，例如是字符串吗？

接下来，我使用DOMPurify 清理用户提交的html。通常，DOMPurify 会查找并删除所有 iframe，因为它们具有被恶意使用的能力。但是，您可以将 iframe 添加到白名单。但是，您不想允许每个 iframe 属性。有些可以被恶意用户用来执行 javascript，例如“onalert”和“onerror”。出于我的目的，我想允许的唯一属性是“src”、“allowfullscreen”和“scrolling”。在将 iframe 添加到 DOMPurify 白名单时，您还需要明确声明哪些属性也将被允许。

    req.body.input = DOMPurify.sanitize(req.body.input, { ADD_TAGS: ["iframe"], ADD_ATTR: ['allowfullscreen', 'scrolling'] });

需要注意的两点：

请务必使用“ADD_TAGS”而不是“ALLOWED_TAGS”。 “ADD_TAGS”将标签添加到现有的白名单中。 “ALLOWED_TAGS”表示仅允许引用的标签。
我没有明确提到“src”作为可接受的属性。不知道为什么，但它似乎还是允许这样做。

接下来，为了增加安全性，我决定将sandbox 属性添加到每个 iframe。此属性对框架中的内容应用额外的限制。为此，我使用cheerio 轻松解析和操作HTML 输入。以下是我找到每个 iframe、添加沙盒属性并将其值设置为“allow-same-origin allow-scripts”的方法，从而解除了对这两个限制的限制。我为什么要抬起它们？因为我的 iframe 的内容（例如 YouTube 视频）需要它才能正常运行。

    let inputCheerio = cheerio.load(req.body.input);
    inputCheerio('iframe').attr('sandbox', 'allow-same-origin allow-scripts');
    req.body.input = inputCheerio.html();

最后，为了增加另一层安全性，我对将显示此内容的页面的Content Security Policy (CSP) 进行了更改。具体来说，我将 frame-src 指令设置为仅允许 iframe 内容的某些有效来源。例如：

    res.setHeader("Content-Security-Policy", "frame-src https://youtube.com");

请注意，实际的 CSP 会更长。这只是一个使用 frame-src 指令的例子。

我不确定这是否是实现我想要的最安全的方式，但这是我目前能想到的最佳方式。请随时纠正我或补充我的答案。希望有人觉得这很有用。

【讨论】：