grep

Engineering

oEmbed를 소개합니다

NHN

2016년 4월 26일

원문에서 보기 ↗

oEmbed를 소개합니다

목 차

  1. 들어가기전에
  2. oEmbed란?
  3. Provider 가 되기
  4. Consumer로써 oEmbed를 활용하고 싶다면

안녕하세요. NHN엔터테인먼트 이수민입니다. 회사내 기술교육의 일환으로 프로젝트를 진행하던 중 웹 콘텐츠를 더욱 효율적으로 공유할 수 방법을 찾아보다 oEmbed 라는 것을 알게 되어 간단히 정리해 보았습니다.

1. 들어가기전에

가령 Youtube 영상을 커뮤니티 게시판에 공유하거나, SNS의 친구들에게 공유를 하고 싶다면 링크를 올리거나 <iframe>으로 이루어진 소스 코드를 넣어줘야 합니다. 하지만 대부분의 커뮤니티나 SNS에서는 보안상 태그 입력을 허용하고 있지 않습니다.

결국은 Youtube 영상의 링크를 공유할 수 밖에 없는데 예를 들어 FaceBook에 Youtube 링크를 입력하게 되면 아래와 같이 자동으로 Youtube 영상이 붙습니다. 어떻게 이런 것이 가능할까요? 단순하게 생각해본다면 Youtube 영상의 ID 값을 주소에서 파싱하여 Youtube에서 제공해주는 소스코드 양식에 맞게 <iframe>태그를 생성해 넣어줄 수 있습니다.

하지만 이런 방식은 별로 좋지 않습니다. Youtube에서 제공해주는 링크나 소스코드의 양식이 언제든 바뀔 수 있는데 그럴 때 마다 코드를 수정해야합니다. 게다가 이런 컨텐츠를 제공해주는 사이트는 Youtube 말고도 수없이 많은데 이 모든 사이트들을 지원해준다는 것은 정말 힘든 일입니다.

이를 타개하기 위해 oEmbed란 포맷이 제안되었고, 현재 FaceBook은 oEmbed를 활용하고 있습니다.

2. oEmbed란?

oEmbed 공식사이트 에 따르면,

oEmbed는 다른 사이트의 URL을 내장된 표현을 가능하게 하는 Format 입니다. 유저가 Resource 에 해당하는 링크를 입력할 때, 웹사이트들이 Resource를 직접 파싱하지 않고, 내장된 컨텐츠(사진과 비디오같은)를 보여줄 수 있게 하는 간단한 API 입니다.

oEmbed는 2008년 Slack의 공동 창업자인 Cal Henderson 이 제안한 Open Format 입니다. 공식적인 Format은 아니지만 영향력 있는 서비스들( ex: Youtube, Facebook, Slideshare, WorkPress 등) 이 참여하여 상당히 대중화 되었습니다.

간단히 oEmbed를 사용하는 예를 들어보면, consumer( 위에서 언급했던 Facebook 과 같은 SNS 혹은 커뮤니티) 는 아래와 같은 HTTP Request를 생성합니다.

http://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json

그때 Provider( Youtube ) 는 oEmbed response를 돌려줍니다.

{
    "version": "1.0",
    "type": "video",
    "provider_name": "YouTube",
    "provider_url": "http://youtube.com/",
    "width": 425,
    "height": 344,
    "title": "Amazing Nintendo Facts",
    "author_name": "ZackScott",
    "author_url": "http://www.youtube.com/user/ZackScott",
    "html":
        "<object width=\"425\" height=\"344\">
            <param name=\"movie\" value=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"></param>
            <param name=\"allowFullScreen\" value=\"true\"></param>
            <param name=\"allowscriptaccess\" value=\"always\"></param>
            <embed src=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"
                type=\"application/x-shockwave-flash\" width=\"425\" height=\"344\"
                allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed>
        </object>",
}

이는 URL을 consumer(Facebook) 가 웹사이트에 동영상을 넣을 수 있게 구조화 된 데이터로 바꾸어주는 것입니다.

그러면 Provider 가 되는 방법에 대해서 간단히 살펴보겠습니다.

3. Provider 가 되기

3.1 가능한 타입

3.2 oEmbed 응답 만들기

oEmbed 응답은 JSON 또는 XML 둘다 가능합니다. 각각의 타입은 응답 헤더에 Content-type 을 할당해 주어야 합니다. 응답에 쓸 수 있는 파라미터의 종류는 oEmbed공식사이트 에서 확인하실 수 있습니다.

3.2.1 JSON 응답

JSON 응답은 mime-type을 application/json 으로 해야하며, JSON 응답은 consumer가 format 파라미터를 json으로 요청할 때 응답해주게 될 것 입니다.. 또한 모든 텍스트는 UTF-8로 인코딩 되어야 합니다.

{
    "foo": "bar",
    "baz": 1
}

3.2.2 XML 응답

XML 응답은mime-type을 text/xml 으로 해야하며, XML 응답은 consumer가 format 파라미터를 xml 로 요청할 때 이루어 집니다. Response body 의 Root Element 는 oembed가 되어야 합니다.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<oembed>
    <foo>bar</foo>
    
    <baz>1</baz>
</oembed>

3.2.3 API endpoint

Consumer 가 oEmbed 요청을 보낼 API endpoint 를 만들어야 합니다. 일반적으로 도메인/oembed 형식으로 합니다. 그리고 URL과 format을 파라미터로 받습니다. ex)

http://www.foo.com/oembed?format=json&url=http%3A%2F%2Fwww.foo.com%2Fview%2F1

3.3 Discovory - 웹문서에 oEmbed 정보 노출 시키기

oEmbed Provider 는 HTML 문서 head 에 oEmbed 를 찾을 수 있게 도와주는 태그를 넣을 수 있습니다. 예를 들어,

<link rel="alternate" type="application/json+oembed"
  href="http://www.foo.com/oembed?url=http%3A%2F%2Fwww.foo.com%2Fview%2F1&format=json"
  title="oEmbed FOO" />
<link rel="alternate" type="text/xml+oembed"
  href="http://www.foo.com/oembed?url=http%3A%2F%2Fwww.foo.com%2Fview%2F1&format=xml"
  title="oEmbed FOO" />

하지만 보통의 consumer 들은 보안(XSS) 상 웹문서에 포함된 정보를 신뢰할 수 없기 때문에 이를 잘 사용하지 않습니다.

3.4 Provider List에 등록하기

대부분의 consumer 들은 WhiteList에 포함된 provider 들에게만 oEmbed를 허용하고 있습니다. 이들 consumer 의 WhiteList에 등록 되려면 먼저 oembed.com 의 Provider List에 등록 되어야 합니다. Provider List 에 등록 되는 방법 자체는 간단 합니다. 1 . oEmbed 깃헙페이지 에 들어가서 GIT 주소를 확인합니다. 2 . GIT CLone을 한 뒤 3 . providers.yml 에 웹사이트 정보와 oEmbed 정보를 추가합니다.

    - provider_name: Foo
      provider_url: 'http://www.foo.com/'
      endpoints:
      - url: 'http://www.foo.com/oembed'
        discovery: true
        example_urls:
        - 'http://www.foo.com/oembed?url=http%3A%2F%2Fwww.foo.com%2Fview%2F1'
        - 'http://www.foo.com/oembed?url=http%3A%2F%2Fwww.foo.com%2Fview%2F1&format=json'

4 . Pull Requests 요청을 합니다.

4. Consumer로써 oEmbed를 활용하고 싶다면

__Provider 가 되기__를 읽고 나면 consumer로써 oEmbed를 활용하는 방법은 쉽게 와닿을 것입니다. 크게는 두가지 방법이 있는데 하나는, oEmbed 사이트에서 제공하는 providers.json 을 참조하여 provider 들의 oEmbed API EndPoint 를 알 수 있고 다른 하나는, 웹페이지에 먼저 요청을 보낸 뒤 HTML 을 파싱하며 head 에 있는 oEmbed 정보 태그가 있는지 확인을 하여 API Endpoint 를 알 수 있습니다. 하지만 이 경우는 잠재적으로 XSS 공격 가능성이 있기 때문에 많이 사용되는 방법은 아닙니다.

직접 구현하는 방법도 좋지만 이미 여러 오픈소스 라이브러리들이 있습니다. 아래는 oEmbed 공식사이트에서 참조한 오픈소스 라이브러리 목록입니다.

간단하게 oEmbed 를 사용할 수 있게 해주는 서비스도 있습니다. http://embed.ly/