Разрабатывая видеоплеер в Яндексе, я не всегда ограничиваюсь тем, что делаем мы, но и интересуемся, какие технологии и приемы используются в других компаниях. Так как я люблю Англию, я исследовал игрока BBC, известной довольно крупной компании. К сожалению, я не использовал его раньше, но, возможно, поэтому я собираюсь рассказать вам, как он работает.

Смотрите контент из-за пределов Великобритании

iPlayer работает только в Великобритании. Зайдя на Шоу Грэма Нортона, вы увидите это:

VPN, окно инкогнито или другие простые хаки просто не работают. Еще в 2014 году BBC настроила технологию геолокации для управления правами на онлайн-контент.

Как BBC идентифицирует вас

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

Если вы перейдете к исходнику HTML, то увидите в нем inline script:

Давайте рассмотрим это, чтобы получить общее представление о том, что здесь происходит:

  1. Во-первых, профиль пользователя инициализируется

2. Далее объявляется много вспомогательных функций, их пока пропустим

3. Пользовательский API объявлен в window.bbcuser, часть функций использует getUserInfo

4. getUserInfo проверяет, сохранены данные или нет:

  • Если сохранено, используются данные из замыкания
  • Если fetch и CORS-запросы разрешены, GET-запрос инициируется из профиля пользователя (для bbc.co.uk это https://www.bbc.co.uk/userinfo), после первого ответ кэшируется. Ответ выглядит так:

  • В противном случае есть резервная функция, которая загружает модуль orb/fig с _figManager.js . Он использует микросервис, доступный на https://fig.bbc.co.uk/frameworks/fig/2/fig.js, и возвращает код, который выполняется позже. Наиболее интересным здесь является параметр uk  — он равен 1, если запрос был отправлен из Великобритании, иначе 0.
  • Если запрос не был отправлен из Великобритании, просмотр запрещен из-за проблем с правами.
  • Когда я исследовал iPlayer из России, он вернул 0, а контент был недоступен. Ответ был:

5. В конце HTML есть скрипт, который вызывает isUKCombined, он использует API, который я описал выше, сохраняя мой профиль в переменную user

6. Скрипт с id='tvip-script-app-store' встраивается в HTML ближе к концу HTML и включает начальное состояние Redux. Вы можете найти флаг isForeignRegion, который по умолчанию равен null.

7. Когда app.bundle.js загружается, componentDidMound проверяет, что isUK не является 0. Поскольку это 0, он вызывает функцию обратного вызова onUserForeignRegion.

8. Обновляет значение хранилища isForeignRegion

9. Вынуждает React.component с возможным именем ForeignRegionBanner перерендериться (как минимум один реквизит был изменен)

10. И, наконец, вы можете увидеть предупреждающее сообщение на странице

Алексей Березин,
Front-end Developer от Яндекс

LinkedIn
GitHub