BBC iPlayer geolocation identification

BBC iPlayer page

Developing video player in Yandex, I’m not always limited to what we do but also wondering what technologies and techniques are used in other companies. As I like England I investigated the player of BBC, well-known quite a big company. Unfortunately I haven’t used it before, but maybe this is why I’m going to tell you how it’s working.

Watch the content from non-UK

iPlayer is working only in the UK. After going to The Graham Norton Show you’ll see this:

BBC iPlayer doesn't work outside the UK

VPN, incognito window or other simple hacks are just not working. Even in 2014 BBC configured Geolocation technology to manage online content rights.

How BBC identifies you

First of all, to understand how it’s working we need to find where country identification is placed.

If you go to HTML source, you’ll see inline script in it:

The inline script in DevTools

Let’s go through it to get a general idea of what is going on here:

  1. First, user profile is initialised

User profile is initialised

  1. Then many auxiliary functions are declared, skip them for now.

  2. User API is declared in window.bbcuser, some of the functions use getUserInfo

iPlayer bbcuser body

  1. getUserInfo checks if data is saved or not:

    • If saved, data is used from the closure
    • If fetch and CORS-requests are allowed, GET-request is initiated from the user profile (for bbc.co.uk it is https://www.bbc.co.uk/userinfo), after first time the response is cached. The response looks like: iPlayer userinfo response
    • Otherwise, there’s a fallback function which loads module orb/fig with _figManager.js. It uses microservice which is available on fig.js and returns a code which is executed later on. The most interest part here is a parameter uk — it equals 1 if the request has been sent from the UK, otherwise 0
    • If the request hasn’t been sent from the UK, watching is prohibited due to rights issues.
    • As I investigated iPlayer from Russia, it returned 0 and the content wasn’t available. The response was: iPlayer fig response
  2. At the end of HTML there a script which calls isUKCombined, it uses API that I described above, saving my profile to a variable user:

iPlayer isUKCombined, breakpoint in DevTools

  1. Script with id='tvip-script-app-store' is inlined in HTML closer to the end of HTML and includes initial Redux state. You can find the flag isForeignRegion which is null by default

  2. When app.bundle.js is loaded, componentDidMound checks that isUK is not 0. As it’s 0, it calls callback function onUserForeignRegion:

iPlayer onUserForeignRegion, breakpoint in DevTools

  1. It updates store value of isForeignRegion:

iPlayer update isForeignRegion, breakpoint in DevTools

iPlayer action USER_SET_FOREIGN_REGION, breakpoint in DevTools

  1. It forces React.component with possible name ForeignRegionBanner to rerender (at least one prop was changed)

iPlayer ForeignRegionBanner rerender

  1. And finally you can see the warning message on the page
player

Let's chat and have fun 🧑‍💻👩‍💻

No more often than once a week I write 📄 about TypeScript 💪, video playback 📺 and frontend related topics. You can unsubscribe in any time ↘️