javascript - 使用 iframe 呈现用户提供的 html 代码

Question

我想在我的网站中嵌入用户提供的 HTML 代码。该代码将是独立的，并将包含 script和 style标签。我计划使用 Content Security Policy 阻止来自提供的 HTML 代码的所有网络调用标题。该代码将只能访问标准库，如 jquery 和其他标准资源(在 CSP 中将指定相同)。我想限制 iframe 内容和父域之间的任何通信。
我的计划是使用 <iframe>嵌入内容。用户将给出一个输入，然后单击一个按钮，一个 iframe将使用给定的输入片段呈现。它将与页面的其他内容内联呈现。
我担心这会对我的网站安全造成影响。

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

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

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

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

Answer 1

Can I make the origin of the iframe null? Or will I have to host my content on a separate domain so that SOP blocks all the network calls to the parent page?

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

Will I be able to set up CSP for the iframe separately? If yes, can anyone suggest what all attributes the CSP should have?

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

Can I take the input html and inject it directly to my iframe from the parent page?

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

If there are other alternatives which don't use iframe, which are those?

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