Este documento describe el cifrado de flujos de video en HTML5. Explica las tecnologías subyacentes como EME, MSE y CORS que permiten el cifrado y reproducción de videos en navegadores. También describe la implementación de un sistema que incluye un servidor web con Django, un servidor de licencias y un cliente que usa EME para descifrar videos. El objetivo es verificar las posibilidades de entrega de videos cifrados bajo demanda usando solo HTML5.

1. Cifrado de flujos de v´ıdeo en HTML5
Manuel Mancera Jim´enez
M´aster en Telem´atica y Redes de Telecomunicaci´on
Universidad de M´alaga
17 de diciembre de 2014
Manuel Mancera Jim´enez (Univ. M´alaga) Cifrado de flujos de v´ıdeo en HTML5 17 de diciembre de 2014 1 / 13

2. Cifrado de flujos de v´ıdeo en HTML5
Contexto Tecnol´ogico
El uso de la web para el consumo de v´ıdeo esta creciendo a gran
velocidad. Cada dispositivo nuevo que sale al mercado es capaz de
reproducir contenido multimedia entregado mediante HTTP.
En 2013 el tr´afico de v´ıdeo es de un 66 %, en 2018 se estima un 79 %1
El 85 % de los usuarios de Internet ven v´ıdeo en la web.
Cada mes se consume 40 billones de contenido multimedia.
M´as del 80 % de los navegadores m´oviles y de escritorio implementan
el tag de <video> de HTML5.
El uso de la web para ofrecer pay per view est´a en crecimiento, a la
vez que se esta haciendo incapi´e en que se cumplan los derechos de
autor en los contenidos multimedia.
1
Sin incluir P2P

3. Cifrado de flujos de v´ıdeo en HTML5
Conceptos
Criptograf´ıa: Es la ciencia que estudia como mantener la seguridad
en los mensajes.
Autenticacion: Confirmaci´on de la identidad de un usuario. Seg´un la
RAE, dar f´e de un hecho o documento.
Autorizacion: Proceso que determina qu´e, c´omo y cu´ando un usuario
autenticado puede utilizar los recursos del sistema.
Digital Rights Management (DRM): Tecnolog´ıas que permiten a
los propietarios y proveedores de contenidos limitar el uso de medios o
dispositivos digitales.
Dynamic Adaptative Streaming over HTTP (DASH): T´ecnica
que permite streaming de calidad (seg´un disponibilidad) a trav´es de
Internet mediante un servidor HTTP.

4. Cifrado de flujos de v´ıdeo en HTML5
Tecnolog´ıas
HTML5
HTML5 es la quinta revisi´on del Lenguaje de Marcado de Hipertexto
(HTML) que se usa en la Web.
Encrypted Media Extensions: Es la API que permite la interacci´on
entre navegadores y sistemas de protecci´on de contenido.
Actualmente se es un borrador.
Media Source Extensions: Es una extensi´on para
HTMLMediaElement que permite un control m´as preciso sobre el
contenido multimedia a reproducir en el navegador.
Cross-origin resource sharing (CORS): Mecanismo que permite la
petici´on de recursos desde una p´agina web en un dominio a otro
dominio mediante JavaScript.
WebCrypto API: Define una API de bajo nivel para la interacci´on
con claves criptogr´aficas.

5. Cifrado de flujos de v´ıdeo en HTML5
Encrypted Media Extensions (EME)
EME
Est´a dise˜nado para poder permitir que la misma aplicaci´on y los archivos
cifrados puedan ser utilizado en cualquier navegador, independientemente
del sistema de protecci´on subyacente.
Componentes:
KeySystem: Mecanismo
de protecci´on.
CDM: Descifrado,
decodificaci´on y
reproducci´on del
contenido multimedia.
License Key Server:
Proporciona identificaci´on
del usuario e interacciona
con el CDM.

6. Encrypted Media Extensions (EME)
Content Decryption Module (CDM)
CDM
Es un t´ermino gen´erico para el componente del cliente que proporciona la
funcionalidad al sistema, incluyendo el descifrado, para uno o m´as sistemas
de clave.
Widevine: Mecanismo de
protecci´on para DRM de
Google.
PlayReady: Microsoft.
Adobe Access: DRM para
HTML5.
Fairplay: DRM de Apple.
Browser
EME and MSE
JS App
Widevide Server
License(s)
License(s)
request
License(s)
CDN
Encrypted video
CDM Wrapper
Widevine CDM
License(s)
License(s)
request
Encrypted
Frame
Decrypted
Frame

7. Cifrado de flujos de v´ıdeo en HTML5
Objetivos
Objetivo del proyecto
Ver las posibilidades que existen actualmente y desarrollar un sistema de
entrega de v´ıdeos cifrados bajo demanda usando unicamente HTML5.
¿Qu´e necesitamos?
Servidor web.
Servidor de aplicaciones: Django
Servidor de licencias.
Navegador que tenga implementado las tecnolog´ıas comentadas
anteriormente. En este caso usaremos Chrome

8. Cifrado de flujos de v´ıdeo en HTML5
Desarrollo
Servidor web:
Django. Servidor de aplicaciones en Python.
Contenido multimedia, entrega contenido multimedia al navegador
mediante el tag de video
P´aginas, servidas mediante el servidor de aplicaciones, contiene el
c´odigo HTML y JavaScript necesario para descifrar, reproducir e
interactuar con el servidor de claves.
Servidor de claves:
Recibe peticiones
HTTP desde el cliente
usando CORS
(JavaScript) y
responde a ellas con un
JSON.
Administra usuarios,
videos y claves desde
consola

9. Cifrado de flujos de v´ıdeo en HTML5
Funcionamiento del Sistema
Web server ClientKey Server
GET /page
Page with <video> tag and encrypted video
XMLHttpRequest() from JavaScript using HTML5 CORS to get the key
Json reponse with the key
Decrypt
the video with
JavaScript
(EME API)
Authenticate
User / Pass
Diagrama del funcionamiento del sistema
Cliente: Hace una
petici´on HTTP GET al
servidor web y una POST
al servidor de licencias.
Servidor de licencias:
Responde a la petici´on de
autenticaci´on devolviendo
la clave en caso
satisfactorio.
Servidor: Proporciona la
p´agina web y el contenido
multimedia cifrado.

10. Implementaci´on
Software utilizado
Servidor de aplicaciones:
Django. (Python)
IDEs:
Python: Ninja-IDE y nano.
JavaScript: SublimeText.
Servidor de licencias:
M´odulos usados en Python:
SimpleHTTPServer,BaseHTTPServer,json,optparse,hashlib,xml,logging
IDEs usados: Ninja-IDE y sublimeText.
Otras herramientas:
webm tools: Herramientas necesarias para trabajar con contenedores
webM.
FFmpeg: Herramienta para codificar v´ıdeo.

11. Implementaci´on
Python
M´odulos Python que se han usado
Servidor de licencias:
BaseHTTPServer: Clase para implementar servidores HTTP.
json: Clase para trabajar con JSON. Usada para crear el JSON que se
env´ıa con la clave del v´ıdeo, algoritmo y modo de cifrado. (JWK)
hashlib: M´odulo para trabajar con algoritmos de hash, usada para
almacenar las claves de los usuarios.
xml.etree.ElementTree: M´odulo para manejar XML.
logging: M´odulo para generar logs.
Otros m´odulos: sys, os y optparse.

12. Utilizaci´on del Sistema
Interfaces
Servidor web:
Instalar Django e iniciar con python manage.py runserver
Servidor de claves:
A˜nadir usuarios al sistema.
A˜nadir id de video y clave de descifrado al sistema.
Iniciar el servicio (o configurar el demonio e iniciarlo)
Cliente:
Configurar el cliente para usar EME, MSE, WebCrypto y CORS.

13. Cifrado de flujos de v´ıdeo en HTML5
Referencias
Propuesta EME. hhttp://www.w3.org/TR/encrypted-media/
Propuesta MSE. http://www.w3.org/TR/media-source/
Especificaci´on CORS. http://www.w3.org/TR/cors/
Recomendaci´on HTML5. http://www.w3.org/TR/html5/
Django Project. https://www.djangoproject.com/
WebM Project. http://www.webmproject.org/
Estimaciones de Cisco.
http://www.cisco.com/c/en/us/solutions/collateral/service-
provider/ip-ngn-ip-next-generation-network/white paper c11-
481360.html
Estado de implementaci´on HTML5 video en navegadores.
http://www.jwplayer.com/html5/