iframe 或 JS 将 Rails 嵌入到 3rd 方站点？

Question

我想为 Rails 应用程序创建可嵌入的小部件，这将允许用户从外部网站与应用程序进行交互。

我已经准备好尝试使用 iframe 来实现这一目标。但后来我发现一些论坛回复似乎暗示 iframe 不是实现这一目标的最佳方式，而是使用 JS 嵌入 HTML 元素。这让我很吃惊——我认为 iframe 将是一个明显的赢家，仅仅是因为 CSS 和脚本的隔离。

那么，在第三方网站中嵌入（有限）应用功能的最佳方式是什么。此交互将仅限于登录和一个简单的表单。嵌入 JS 的 iframe 是最好的方法吗？作为一个附带问题，这两种方法都需要注意安全问题吗？

Answer 1

我认为使用 iframe 很难。这不是整个网站的感觉，它就像一个网站在另一个网站中，大部分样式不匹配，或者您有滚动条或响应式布局没有正确应用。所以这里有一个小优点/缺点列表：

iframe 专业版：

• 请求不是跨站点来源（很可能更安全）
• “沙盒”javascript（无冲突）

iframe CON：

• 风格指南
• 历史记录不变（例如，如果您使用 GET 提交表单，则无法粘贴 URL 并将其发送给朋友）

js 专业版：

• 完全控制导航（您可以使用$.load 等覆盖链接点击）。
• 能够更改浏览器历史记录（历史 API，请参阅 MDN）
• html 组件的流畅处理
• 样式会自动继承

js 缺点：

• CORS 见https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
• 处理（覆盖）链接点击、表单提交等事件。 （见Sending multipart/formdata with jQuery.ajax）
• 会话/cookies

我写了一个小 Rails 插件，它允许您将 Rails 应用程序作为 js 框架嵌入到另一个框架中（它仍然是真正的测试版）：https://github.com/Elektron1c97/better_frame。该插件处理大部分 js 问题，例如链接/表单事件并写入浏览器历史记录。

所以.. 如果您需要运行一个应该真正嵌入网站（如另一个网站上的商店）的应用程序，我会使用 js 嵌入。

如果您创建一个自定义项目来共享，例如soundcloud player，您可能需要使用 iframe。

Answer 2

如果您希望第三方网站对与您的小部件的交互做出反应，那么您绝对应该使用 javascript。尽管可以通过 iframe 在不同域之间传递消息，但使用起来并不是最方便的。见https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

至于使用 javascript，您可以简单地要求您的用户嵌入将呈现您的小部件的 javascript 文件。要绕过任何 CORS 问题，您的小部件应与支持 JSONP 响应的 API 交互。