在 iFrame 中安全地执行 HTML5/Javascript

Posted 2023-03-05

【中文标题】在 iFrame 中安全地执行 HTML5/Javascript

【英文标题】：Executing HTML5/Javascript Within An iFrame Securely

【发布时间】：2012-02-08 17:04:19

【问题描述】：

我正在寻找一个网站来托管 html5 游戏。由于这些游戏有机会包含恶意 javascript，我想知道如何设置安全环境来托管它们。

似乎用 iframe 嵌入游戏是答案，但我对网站开发比较陌生，所以有一些问题：

有没有一种简单的方法可以在同一个域上安全地托管游戏，或者...

游戏是否必须托管在不同的域中，然后嵌入到 iframe 中，才能与父文档交互？

如果游戏在托管在另一个域上时执行，它是否可以以任何恶意方式与该主机域交互？

【问题讨论】：

iframe + 安全 = 问题总是...在这里阅读一些想法 msdn.microsoft.com/en-us/library/bb735305.aspx ***.com/questions/229624/… iframehtml.com/iframe-security.html

@DmitryBoyko 感谢您的链接。很有用。不过，除了为此使用 iframe 之外，我还有什么其他选择？ :)

【参考方案1】：

跨站点脚本和 cookie 的超限将是一个很大的问题。利用浏览器的同源策略将是您防御这一点的一种有价值的方法。 ref1ref2

确保您的网站从不同的域提供给贡献者应用程序。 （例如 coolgames.com 与 mycoolgames.com） - 这会将您的代码的原始范围与他们的分开。 确保每个不同的贡献者都从一个唯一的子域（例如bob.mycoolgames.com、dave.mycoolgames.com）提供他们的应用程序/游戏 - 这将有助于隔离不同开发者的来源。每个人都需要小心，切勿将 cookie 限定为 .mycoolgames.com，否则它们会过度暴露自己。

您可能还希望通过在现代浏览器中利用新的Content Security Policy 支持来进一步保护您自己的应用程序。这还将有助于mitigate 对抗clickjacking attacks。

关于 iframe：

您能解释一下为什么您认为您需要使用 iframe 吗？好的老式链接有什么问题？

如果图形设计要求必须使用 iframe，您可以轻松地将所有嵌入式游戏 iframe 放入 www.mycoolgames.com 的动态页面中，您不会保留任何敏感系统、数据或代码 - 保留所有用户身份验证系统、CMS 系统和仅在 *.coolgames.com 上的应用程序的数据

【讨论】：

谢谢！子域的信息尤其有帮助。

谢谢。我能问一下你最后一句“我个人会……”是什么意思吗？您的意思是将页面重定向到托管游戏的网站吗？

@Matthew Scratch 那，我在打字之前就想好了。点击劫持的主要风险是当有人将您的网站 iframe 放入他们的网站时。将其他人的内容放入您自己网站内的 iframe 中，不会让您面临太多额外风险。但我想完全避免使用任何跨域 iframe 是很容易的。

那么问题是我不能在页面上放置像广告这样的元素，甚至不能在界面上放置很多元素。

我有机会收到你的电子邮件吗？我真的很想更深入地讨论这个问题，并得到澄清。如果您不介意，我将不胜感激。

【参考方案2】：

首先 - 这是一个很好的问题！在设计基于 iframe 的托管解决方案时，我也问过自己同样的问题。

第二个 - 经过短暂的搜索后，我发现了iframe sandbox 属性

TLDR - 它使开发人员能够声明哪些安全选项将应用于 iframe，让浏览器定义定制的限制范围

所以.. 我找到了一篇很棒的文章，它给出了这个功能使用的真实示例 + 一些清晰的解释（阅读更多关于这个主题的信息 here）。简而言之：

<iframe sandbox="security options goes here" src="your hosted page"></iframe>

安全选项有：

allow-forms 允许提交表单。 allow-popups 允许弹出窗口 （window.open()、showModalDialog()、target="_blank" 等）。 allow-pointer-lock 允许（惊喜！）指针锁定。 允许同源 允许文件保持其来源；从加载的页面 https://example.com/ 将保留对该来源数据的访问权限。 allow-scripts 允许 JavaScript 执行，也允许功能 自动触发（因为它们很容易通过 JavaScript）。 allow-top-navigation 允许文档跳出 通过导航***窗口来获取框架。

例如：

<iframe sandbox="allow-scripts allow-popups" src="https://mywebsite.com/hosted_page"></iframe>

还值得一提的是，此安全功能得到高度支持（can I use 救援）

阅读愉快/编码...愿安全部队与你同在 :)