사용자가 자신의 사이트 (예 : 블로그)에 내 콘텐츠를 삽입 할 수있게 허용 - 레일 4

Question

레일즈 4 앱을 만들고 있는데, 사용자가 자신의 사이트에 내 콘텐츠를 퍼갈 수있는 옵션을 제공하고 싶습니다. 자신의 블로그를 좋아해요).

즉, 일부 콘텐츠가 포함 된 erb 페이지와 "Embed"버튼이 필요합니다. 사용자가이를 클릭하면 작은 코드가 삽입되어 블로그에 복사하여 붙여 넣을 수 있습니다. 그러면 내 페이지의 콘텐츠가 표시됩니다.

이 문제를 해결하는 가장 좋은 방법은 무엇입니까? 가능한 한 서술적이어야합니다. 저는이 점에 새로운 점이 있습니다. 감사!

Answer 1

iFrame을

는 현재의 기술로 달성 있어요 방법은 일반적으로 클라이언트의 웹 사이트에 JS에서라는 iframe을 사용하는 것입니다.

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

: 당신은 당신이 (원격 사이트에서 연결을 허용하는)

다음

---

당신은 높은 수준의 관점에서 그것을 할 거라고 방법은 올바른 CORS policy이 설정이 있는지 확인해야합니다 이렇게하면 고객 웹 사이트 (소스 코드)에서 가리킬 수있는 endpoint을 얻을 수 있습니다. ,

#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 방법을 렌더링 : 본질적으로, 그것은 당신에게 다음 해당 컨트롤러와 함께 처리 할 수 ​​your_domain.com/embed/:blog_post_number

이 연결하도록 JS 위젯을 사용할 수있는 기능을 제공합니다 이는 레이아웃이없는 해당 뷰를 렌더링합니다. 이것은 그 자체로 아무것도 할 것입니다,하지만 당신은 자바 스크립트 위젯에서 올바르게 호출하는 경우, 당신은

---

JS 따라서

당신이 필요합니다 당신의 iframe에 표시 할 수 있습니다 위젯을 사용하여 코드를 "포함"합니다. 이를 수행하는 일반적인 방법은 서버 (public 디렉토리)에 상주하는 자바 스크립트 "위젯 (widget)"을 만드는 것입니다.

#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을 삽입 할 수있는 기능을 제공하는 것입니다. 귀하의 전화 번호는 입니다.

위의 내용 코드가 약간 부풀어 오른 것일 수도 있습니다 (Youtube를 사용하면 iframe을 직접 사이트에 넣을 수 있습니다).당신이 어떻게 당신이 갖고 싶어 복잡성에 따라 달라집니다 및 향후 확장 당신은

---

CORS

마지막으로, 당신은 "CORS" (Cross Origin Resource Sharing policy)을 관리 할 필요가 계획. 기본적으로 비 원산지 도메인의 모든 XHR 요청을 방지하는 표준 프로토콜입니다.

CORS를 사용하는 이유는 XHR에서 익명으로 요청한 공격으로 서버가 공격 당하지 않도록하기 위해서입니다. 심층적 인 아키텍처의 영향에 대해서는 확신 할 수 없지만 임베디드 페이지를 호출/표시 할 수 있도록 CORS 정책을 서버에 설정해야합니다.

#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