Thursday, May 23, 2013

oEmbed - hassle-free embedding of third party media content

by Kerstin Puschke (XING AG)

Thursday, 23.05.2013, New York II, 16:30-17:00 Uhr

oEmbed is an open format for embedding third-party media content like videos, pictures or tweets. It standardizes the process of turning a URL into an embeddable representation of the content.

So far, embedding was implemented on a case-by-case basis. Website owners could manually copy some code snippets from the media provider and paste them into their website. Social networks, blogging platforms and content management systems have automated the fetching of the embed code, but the process was very close to the manual one, i.e. parse the URL, request additional data from the media provider’s API or, if there isn’t any data available, screen scrape the missing data, and finally parse the results to create an embedded representation of the media. Due to huge differences between providers, adding another media provider required additional effort. This construct is generally quite vulnerable since a minor change by the media provider could break the embedded content.

oEmbed instead offers the possibility to bypass provider-specific APIs and avoid screen scraping completely. It standardizes the process of media embedding so that it’s easier and more reliable to embed media from different providers.

OEmbed has been around for a while, but it seems to have gained traction recently. An oEmbed API is provided by – among others – YouTube, vimeo, Flickr, SlideShare and Twitter. Intermediaries like embed.ly collect data from a number of media providers and offer them through a unified oEmbed API. OEmbed consumers are e.g. WordPress, Drupal, Elgg, Diaspora and XING.

If a user posts, say, a YouTube link to an oEmbed consumer, the embedded video is shown instead of a simple link. Generally speaking, oEmbed turns a URL into an embeddable representation of the media content.

The oEmbed specs are appealingly simple but powerful. Technically, the oEmbed API returns XML or JSON formatted meta data that explains how to embed the media. Depending on the type of media used, the oEmbed response may, among other things, contain an HTML snippet for embedding.

This may raise some security concerns since embedding arbitrary HTML snippets provides a vector for XSS attacks from the oEmbed provider. While a consumer may or may not trust well-known oEmbed providers not to exploit that vector, the risk is increasing heavily if a consumer uses oEmbed discovery. When using discovery, a consumer accepts media data from any provider. Many consumers prefer not to use discovery and maintain their own whitelist of trustworthy providers along with their API endpoints. The oembed authors recommend to display the HTML in an iframe, hosted from another domain. Consumers may also parse the HTML they've received in order to run additional checks.

Besides some general introduction to oEmbed--its use cases, benefits and pitfalls--the talk covers some first-hand experience about implementing and running an oEmbed consumer within a high-traffic social network as well as some insights on how to implement an oEmbed provider.

About the author Kerstin Puschke:

Kerstin Puschke is a software engineer living in Hamburg. As part of an awesome team, she contributes to the backend of XING, a social network for business professionals with 12 million users. Originally a dedicated perl hacker with some interest in weird database stuff, she recently started using ruby on rails and has not been able to keep her hands off it since.