Разрабатывая видеоплеер в Яндексе, я не всегда ограничиваюсь тем, что делаем мы, но и интересуемся, какие технологии и приемы используются в других компаниях. Так как я люблю Англию, я исследовал игрока BBC, известной довольно крупной компании. К сожалению, я не использовал его раньше, но, возможно, поэтому я собираюсь рассказать вам, как он работает.
Смотрите контент из-за пределов Великобритании
iPlayer работает только в Великобритании. Зайдя на Шоу Грэма Нортона, вы увидите это:
VPN, окно инкогнито или другие простые хаки просто не работают. Еще в 2014 году BBC настроила технологию геолокации для управления правами на онлайн-контент.
Как BBC идентифицирует вас
Прежде всего, чтобы понять, как это работает, нам нужно найти, где находится идентификация страны.
Если вы перейдете к исходнику HTML, то увидите в нем inline script:
Давайте рассмотрим это, чтобы получить общее представление о том, что здесь происходит:
- Во-первых, профиль пользователя инициализируется
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 от Яндекс