对于创建嵌入第 3 方网站的小部件，iframe 或 CORS 哪个更安全？

当构建一个旨在嵌入到第三方网站上的小部件时，关于如何做到这一点似乎有两种思想流派：

• Use iframes
• 使用主页的 DOM

当使用iframe方法，跨域请求不是问题，因为服务器认为请求源自自己的页面。

当使用主页的 DOM 时，跨域请求是一个问题，服务器需要使用适当的 CORS 标头进行响应才能正常工作。

这两种方法哪种更安全，在实现这两种方法时应考虑哪些安全问题？

您可能会发现这篇文章很有趣 -如何保护小部件免受伪造请求的影响:

您不希望此 [widget] 容易受到 CSRF 的攻击，因此您向该页面写入了一个 iframe。根据源继承规则，父站点将无法读取 CSRF 令牌。但是点击劫持（或类似劫持）又如何呢？由于 CSRF，您必须位于 iframe 内，并且 x-frame-options 无法提供帮助，对于 Frame-busters 也是如此

IFrame 方法的缺点

• 容易受到点击劫持 / 点赞劫持

DOM 方法的缺点

• 容易受到CSRF.
• 您服务器上的 CORS 标头将允许访问整个世界或预先向您注册的整个网站。虽然这本身并不存在漏洞，但必须注意确保没有敏感信息可用（例如用户数据）。没有办法只限制对您的小部件的访问 - 您将授予对整个小部件的访问权限Origin（即协议、域和端口）。
• 当您操作 DOM 时，可以从小部件之外的页面其余部分访问这些对象。

Summary

最终这取决于您的小部件的功能。父站点在用户上下文中自动提交表单或单击小部件上的按钮会产生什么后果？如果有“赞”或“+1”按钮，则托管页面可能会在用户不知情或未经用户同意的情况下向您注册“赞”/+1，从而欺诈性地宣传其网站。这适用于两种方法，只是攻击方法不同（即 CSRF 或点击劫持）。

上述帖子中接受的答案有 CSRF 与 Clickjacking 的解决方案：

单击小部件需要打开一个包含新页面的弹出窗口——iframe 不够好，它必须是一个新窗口——这完全在您的 Web 应用程序的控制之下。确认该页面上的操作，无论是什么。

是的，这有点不优雅，但是当前的 Web 安全架构并没有给您任何更好的选择。

总之，IFrame 方法总体上似乎具有更高的安全性，并且在交互时实现弹出窗口可以减轻点击劫持风险。