使用 iframe 呈现用户提供的 html 代码答案

【问题标题】：Using iframe for rendering user provided html code使用 iframe 呈现用户提供的 html 代码
【发布时间】：2021-08-20 07:25:52
【问题描述】：

我想在我的网站中嵌入用户提供的 HTML 代码。该代码将是独立的，并将包含script 和style 标记。我计划使用Content Security Policy 标头阻止来自提供的HTML 代码的所有网络调用。代码将只能访问 jquery 等标准库和其他标准资源（在 CSP 中也会指定）。我想限制 iframe 内容和父域之间的任何通信。

我的计划是使用<iframe> 来嵌入内容。用户将给出一个输入，然后在单击一个按钮时，将使用给定的输入 sn-p 呈现一个iframe。它将与页面的其他内容内联呈现。

我担心这会对我的网站安全造成影响。

我可以制作 iframe null 的来源吗？还是我必须将我的内容托管在单独的域中，以便 SOP 阻止对父页面的所有网络调用？
能否为 iframe 单独设置 CSP？如果是，谁能建议 CSP 应具备的所有属性？
我可以将输入的 html 从父页面直接注入到我的 iframe 中吗？

如果还有其他不使用iframe 的替代方案，是那些？

【问题讨论】：

标签： javascript html security iframe content-security-policy

【解决方案1】：

我可以将 iframe 的来源设为 null 吗？或者我是否必须将我的内容托管在单独的域中，以便 SOP 阻止对父页面的所有网络调用？

如果您将使用例如 data:-Url，则可以将 iframe 的来源设为 null。这将阻止现代浏览器中的跨域请求，但父文档的内容安全策略将被继承到所有浏览器中的 iframe。
在这种情况下，一些旧浏览器 (Firefox/WinXP) 也会将 CSP 从 iframe 传播到父文档。

我能否为 iframe 单独设置 CSP？如果是，任何人都可以建议 CSP 应具有的所有属性吗？

只有通过网络方案 (http:/https:) 加载 iframe，您才能为 iframe 设置单独的 CSP - 它将创建独立的浏览上下文。如果非网络方案（data:、blob: 等）iframe 将继承父文档的 CSP。
在孤立的浏览上下文的情况下，您可以使用任何“属性 CSP”来满足您的特定情况。
注意csp=、sandbox= 属性，这些可能很有用。

我可以将输入的 html 从父页面直接注入到我的 iframe 中吗？

这与您的陈述相反：“我想限制 iframe 内容与父域之间的任何通信。”。
因此，所有通信都只能通过服务器进行。

如果还有其他不使用 iframe 的替代方案，是那些？

可以通过<object>/<embed> 创建隔离的浏览上下文，但这些在您的情况下没有用。

【讨论】：

感谢您的回答。与严格的 CSP 策略相比，您能说出使用 sandbox="allow-scripts" 提供多少安全性吗？
Can I take the input html and inject it directly to my iframe from the parent page? 我的意思是我想从父级提供 iframe 的 src/srcdoc。例如。 src="<h1>Hello</h1>".
CSP 限制 sources 可以从中加载脚本。沙盒限制脚本可能性。 sandbox="allow-scripts" 不允许 alert()、confirm()、print()、prompt() 和 beforeunload 事件，因为省略了 allow-modals 标志。也将被禁止window.open()、target='_ blank'、showModalDialog()、表单提交和许多其他，因为没有指定相应的标志。
srcdoc= 导致 iframe 与父页面具有相同的来源 -> 完全访问父页面（非隔离 iframe）。 src= 的隔离级别取决于使用方案。如果是 'data:'/'blob:'，父页面的 CSP 也会在 iframe 中起作用。在 'http:'/'https:' 的情况下，iframe 将被完全隔离，并且可以拥有自己的 CSP（通过元标记或 CSP HTTP 标头）