允许用户将我的内容嵌入他们的网站（如博客）——rails 4

Posted 2023-03-13

【中文标题】允许用户将我的内容嵌入他们的网站（如博客）——rails 4

【英文标题】：Allow users to embed my content into their sites (like blogs) -- rails 4

【发布时间】：2014-10-30 21:50:27

【问题描述】：

我正在构建一个 Rails 4 应用程序，我想做的是为我的用户提供通过可嵌入代码将我的内容嵌入到他们自己的网站（如他们的博客）的选项。

换句话说，我想要一个包含一些内容的 erb 页面，以及一个显示“嵌入”的按钮。当用户点击它时，会出现一小段可嵌入代码，他们可以将其复制并粘贴到他们的博客等。这将显示我页面中的内容。

解决这个问题的最佳方法是什么？请尽可能描述，因为我对此很陌生。谢谢！

【问题讨论】：

只需为该嵌入视图创建一个模板，以及像stuff/:id/embed 这样的路由，然后像要嵌入的 iframe 或脚本一样提供，只要确保很好地缓存这些页面，以便能够处理请求增加。

【参考方案1】：

iFrame

目前技术实现的方式一般是使用iframe，在客户端网站上通过JS调用。您必须确保设置了正确的 CORS policy（以允许来自远程站点的连接）

---

从高层次的角度来看，您将如何做到这一点：

#config/routes.rb
namespace :embed do
   resources :pages, only: :show, path: "" # -> domain.com/embed/1
end

这将为您提供所谓的endpoint - 您可以从您的客户网站（嵌入代码）指向它。本质上，它将使您能够使用您的 JS 小部件与your_domain.com/embed/:blog_post_number 连接

这可以通过相应的控制器来处理：

#app/controllers/embed/pages_controller.rb
class PagesController < ApplicationController
   layout false
   def show
      @page = Page.find params[:id]
   end
end

#app/views/embed/pages/show.html.erb
<%= @page.title %>

这将渲染pages 控制器的show 方法，该方法将在没有布局的情况下渲染相应的视图。这本身不会做任何事情，但是如果您从 javascript 小部件正确调用它，您将能够在您的 iFrame 中显示它

---

JS

因此，您需要一个小部件来“嵌入”您的代码。执行此操作的典型方法是创建一个 javascript“小部件”，它将驻留在您的服务器上（在 public 目录中）。然后，您将提示您的用户在嵌入代码时调用此脚本：

#public/embed.js
window.onload = function() 

   //Params
   var scriptPram = document.getElementById('load_widget');
   var id = scriptPram.getAttribute('data-page');

   /iFrame
   var iframe = document.createElement('iframe');
   iframe.style.display = "none";
   iframe.src = "embed/" + id;
   document.body.appendChild(iframe);
;

然后您将提示用户嵌入以下 JS：

<script id="load_widget" src="http://domain.com/embed.js" data-page="1"></script>

这是great resource

这里的底线目标是提供在用户网站上嵌入 iframe 的能力，最终将调用您的 domain.com/embed/:id url

上面的代码可能有点臃肿（Youtube 只是让你把“裸”iframe 直接放到你的网站上）。你如何做取决于你想要拥有的复杂性，以及你计划的任何未来可扩展性

---

CORS

最后，您需要管理"CORS" (Cross Origin Resource Sharing policy)。这是一个标准协议，基本上可以防止来自非源域的任何 XHR 请求。

使用 CORS 的原因是它可以防止您的服务器受到 XHR 上的匿名请求的攻击。我不确定它的深层架构含义 - 但您肯定需要确保您的服务器上设置了 CORS 策略以允许调用/显示嵌入页面。

在 Rails 中实现此目的最有效的方法是使用 RACK-CORS gem：

#config/application.rb
config.middleware.use Rack::Cors do
  allow do
     origins '*'
     resource '/embed.js', :headers => :any, :methods => [:get, :post, :options] #-> I believe resource needs to be a specific URL - will have to check this
  end
end