Программное обнаружение общего кода с помощью oEmbed

Интернет полон сервисов, которые размещают разнообразный контент, такой как видео, изображения, музыку и подкасты, карты и графики, а также всевозможные другие прелести. Скорее всего, когда вы добавляете свой контент на сайт, он предложит вам способ встроить этот контент на веб-страницу в другом месте.

Такие сайты, как YouTube, имеют собственный встраиваемый проигрыватель, который популярно использовать в сообщениях в блогах и даже на страницах продуктов. У Soundcloud есть код для встраивания музыкального проигрывателя на сайт вашей группы. Сборщики средств на благотворительность могут загрузить маршрут своей большой гонки на такой сайт, как Strava, и захотеть поделиться им на своем сайте по сбору средств, чтобы показать своих спонсоров.

Все это можно сделать, найдя эту опцию « Поделиться » на хостинговом сайте и скопировав некоторый код, который обычно представляет собой смесь HTML и JavaScript. Затем этот код обычно можно вставить на целевую страницу, и хостинг-сайт предоставит богатое представление контента для всех ваших друзей, клиентов и контактов.

Пока все хорошо, и это довольно хорошо покрывает возможность ручного встраивания контента. Однако существует другой вариант использования, в котором результат тот же, но путь к нему сильно отличается.

Совместное использование программно

Давайте представим, что вы создаете приложение или сайт, который принимает контент от пользователя. Это может быть что-то простое, например, простая страница в интрасети, где сотрудники могут делиться новостями с коллегами, или что-то масштабное, например, целая социальная сеть, где люди могут зарегистрироваться и начать публиковать сообщения.

В обоих случаях вам нужно решить, что делать, если пользователь добавит URL-адрес как часть этого контента. Вы можете представить себе сценарий:

 Check out this video! https://youtu.be/jw7bRnFbwAI

На этом этапе вам, как издательской системе, нужно решить, что делать. Первый вариант — ничего не делать и просто оставить URL-адрес в виде обычного текста. Это не лучшая идея, так как пользователи, как правило, захотят щелкнуть URL-адрес, а простой текст не поможет им перейти на другую страницу.

Второй вариант — превратить его в ссылку. Это хороший следующий шаг, так как пользователи могут перейти по ссылке и перейти к содержимому. Но при этом они покидают ваш сайт и могут не вернуться в спешке.

Лучшим взаимодействием с пользователем может быть возможность получить проигрыватель для этого контента и встроить его прямо туда, а не только по URL-адресу. Это позволит пользователям просматривать контент прямо на вашем сайте, как, например, на Facebook.

Это создает проблему. Учитывая URL-адрес, как я могу превратить его в код для встраивания HTML/JavaScript, необходимый для отображения расширенного проигрывателя на странице?

Если это известный сайт, такой как YouTube, я мог бы написать некоторый код, который использует API YouTube для извлечения информации о видео и получения или создания кода для встраивания таким образом. Я мог бы сделать то же самое для других видеосервисов, таких как Vimeo и VIVO. Я могу написать код для распознавания URL-адресов Flickr и Instagram и использовать их API для извлечения красивых версий фотографий для встраивания. И то же самое для Твиттера и твитов. Но это звучит как много работы!

Идеальным было бы наличие стандартизированного способа перехода от URL-адреса фрагмента контента к блоку кода для встраивания для отображения этого контента на странице. Если вы были внимательны, то поймете, что ответ на этот вопрос — oEmbed.

Происхождение oEmbed

Это была именно та проблема, с которой столкнулась Лия Калвер во время работы над Pownce (действительно инновационной социальной сетью, которая была Betamax для VHS Twitter). Паунс хотел внедрить расширенные представления контента в пользовательский поток обновлений, но не хотел ограничивать поддержку только службами, для интеграции с которыми был специально написан код. За ужином с коллегой Майком Мэлоуном, а также с Кэлом Хендерсоном (возглавлявшим разработку в Flickr — одном из крупнейших поставщиков такого контента в то время) и Ричардом Кроули они обсудили идею открытого стандарта для получения кода для встраивания из URL. Хендерсон ушел и набросал что-то на основе обсуждения, так родился oEmbed.

Использование oEmbed

Вот как это работает.

Он начинается с URL-адреса, который указывает на один элемент контента. Это может быть видео на YouTube, изображение или что-то еще. Обычно это предоставляется пользователем вашего сайта или приложения как часть контента, который он хочет опубликовать. Первым шагом является получение содержимого страницы по этому URL-адресу, который должен быть HTML-страницей.

Если сайт, на котором размещается контент, поддерживает oEmbed, в разделе <head> этой страницы должен быть элемент link с типом контента oembed :

 <link rel="alternate" type="application/json+oembed" href="https://youtube.com/oembed?url=https%3A%2F%2Fyoutu.be%2Fjw7bRnFbwAI&format=json" title="Inclusive Components with Heydon Pickering" />

Примечание об XML: oEmbed поддерживает ответы как в формате XML, так и в формате JSON. В этой статье я рассматриваю только JSON, потому что мы не дикари. Если вам не повезло работать с XML, имейте в виду, что этот формат поддерживается спецификацией oEmbed, хотя вы можете обнаружить, что некоторые поставщики предлагают только ответы JSON.

Для этого тега ссылки в качестве rel задано значение alternate , а для type задано значение application/json+oembed или text/xml+oembed . Именно этот атрибут подсказывает нам тот факт, что URL-адрес, указанный в href , на самом деле является конечной точкой oEmbed API для получения сведений о содержимом.

Этот URL-адрес обычно имеет два параметра: url -адрес и format .

Общие параметры URL для первоначального потребительского запроса

Полная спецификация здесь представлена ​​более подробно (и вы должны ссылаться на нее при создании собственной реализации), но это два параметра, которые вы, скорее всего, увидите чаще всего.

Итак, мы получили URL-адрес, получили страницу, нашли тег ссылки oEmbed с другим URL-адресом для конечной точки API. Затем мы запрашиваем этот новый URL-адрес, и он возвращает всю информацию, которую служба должна предоставить об этом фрагменте контента.

 { "author_name": "Smashing Magazine", "width": 480, "title": "Smashing TV: Inclusive Components with Heydon Pickering (Nov 7th 2019)", "provider_name": "YouTube", "height": 270, "html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/jw7bRnFbwAI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>", "provider_url": "https://www.youtube.com/", "thumbnail_url": "https://i.ytimg.com/vi/jw7bRnFbwAI/hqdefault.jpg", "type": "video", "thumbnail_height": 360, "author_url": "https://www.youtube.com/channel/UCSDtqcJ8ZXviPrEcj1vuLiQ", "version": "1.0", "thumbnail_width": 480 }

Сейчас мы говорим! Ответ дает нам много информации о содержании. В обозримом будущем version должна быть 1.0 , которая является текущей версией спецификации oEmbed. Другая возвращаемая информация во многом зависит от значения type .

Типы ответов

Значение ключа type в ответе говорит вам, какой носитель вы собираетесь встраивать.

Помимо специализированного видеоконтента, более распространенный тип, который вы, вероятно, увидите в дикой природе, — это rich . Даже сам Flickr, хотя и отправляет ответ с photo , также предоставляет html для богатого встраиваемого «плеера» для изображения.

В большинстве случаев встраивание контента на ваш сайт — это просто случай использования кода, предоставленного в качестве значения html .

Примечание о безопасности

Одна вещь, с которой вы могли бы быть справедливо осторожны, — это получение ответа HTML и программное встраивание его в страницу, которую вы размещаете. Без человеческого шага для перепроверки кода, который вы вставляете, всегда существует вероятность того, что этот код будет вредоносным. Таким образом, вы должны принять соответствующие меры для снижения риска.

Это может включать в себя фильтрацию URL-адресов, чтобы убедиться, что схемы и домены соответствуют ожидаемым, и изолированную программную среду в iframe на другом домене без файлов cookie. Вы должны получить доступ к ситуации, в которой вы используете код, и убедиться, что вы не подвергаете себя неоправданному риску.

Начиная

Как бы ни было важно понимать процесс при использовании oEmbed, реальность такова, что в большинстве распространенных языков есть доступные библиотеки, которые абстрагируют процесс и делают его относительно простым.

Например, упакованный oEmbed npm предоставляет очень простой интерфейс для выполнения запроса на основе URL-адреса контента и получения взамен ответа oEmbed.

Сначала установите пакет в свой проект:

 npm i oembed

А затем запросите URL. Здесь я использую URL-адрес презентации на Notist, которую я дал об oEmbed. Как очень мета.

 const oembed = require('oembed'); const url = 'https://noti.st/drewm/ZOFFfI'; oembed.fetch(url, { maxwidth: 1920 }, function(error, result) { if (error) console.error(error); else console.log("oEmbed result", result); });

И ответ:

 { type: 'rich', version: '1.0', title: 'Understanding oEmbed', author_name: 'Drew McLellan', author_url: 'https://noti.st/drewm', provider_name: 'Notist', provider_url: 'https://noti.st', cache_age: 604800, thumbnail_url: 'https://on.notist.cloud/slides/deck4179/large-0.png', thumbnail_width: 1600, thumbnail_height: 900, html: '<p data-notist="drewm/ZOFFfI">View <a href="https://noti.st/drewm/ZOFFfI">Understanding oEmbed</a> on Notist.</p><script async src="https://on.notist.cloud/embed/002.js"></script>', width: 960, height: 540 }

Если вы хотите сделать то же самое в PHP, удобный пакет под названием embed/embed доступен для установки через Composer.

 composer require embed/embed

А затем в вашем PHP-проекте:

 use Embed\Embed; $info = Embed::create('https://noti.st/drewm/ZOFFfI'); $info->title; // "Understanding oEmbed" $info->authorName; // "Drew McLellan $info->code; // "<p data-notist="drewm/ZOFFfI"> ... </script>"

Как видите, с использованием библиотеки процесс становится очень простым, и вы можете быстро перейти от URL-адреса к коду встраивания, готовому показать богатое представление пользовательского контента.

Заключение

oEmbed — очень элегантное решение очень специфической проблемы. Вам простительно думать, что от этого выиграют лишь несколько инженеров, работающих над крупными социальными сетями, но на самом деле системы публикации, в которых пользователь может ввести URL-адрес, на удивление распространены. Найдите мне одного бэкенд-инженера, которому в какой-то момент не нужно было создавать какую-то CMS. Мы можем думать об этом по-разному, но если вы принимаете пользовательский ввод, вам следует подумать о том, что делать, если этот ввод содержит URL-адреса.

Теперь, когда вы знаете о oEmbed (извините), у вас нет оправдания не уделять серьезного внимания тому, как вы обрабатываете URL-адреса в своих будущих проектах.

• oВстроить спецификацию
• встроенный для NodeJS
• вставлять/вставлять для PHP
• «Объявление OEmbed: открытый стандарт для встраиваемого контента», Лия Калвер