Sei sulla pagina 1di 10

Inicio Libros Tutoriales Eventos Foro Buscar

Cmo evitar que tus archivos


JavaScript y CSS sean
manipulados
Las versiones ms modernas de los mejores navegadores incluyen una funcionalidad
para que los sitios web puedan controlar cmo se carga su cdigo JavaScript y as evitar
que sea modificado por usuarios maliciosos.

Esta nueva funcionalidad, llamada "Integridad de Recursos" (en ingls, "SRI" o


Subresource Integrity), permite a los sitios web incluir cdigo JavaScript que no se ejecuta
si su contenido ha sido modificado.

La gran ventaja que aporta es que puedes usar CDNs (Content Delivery Networks) para
servir el contenido de tus sitios lo ms rpido posible, pero al mismo tiempo asegurarte
que los archivos no han sufrido ninguna modificacin.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Usar la "integridad de recursos" es muy sencillo, tal y como muestra el siguiente
ejemplo:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"
integrity="sha384-R4/ztc4ZlRqWjqIuvf6RX5yb/v90qNGx6fS48N0tRxiGkqveZETq72K
gDVJCp2TC"
crossorigin="anonymous"></script>

La idea consiste en aadir al elemento <script> una firma digital (en ingls,
cryptographic hash) de sus contenidos. Cuando el navegador cargue la pgina, descargar
los contenidos, calcular la firma digital y comprobar que su valor coincida con el del
atributo integrity . Si no coinciden, el cdigo JavaScript no se ejecuta. Por lo tanto, se
trata de una medida de seguridad sencilla pero eficaz para protegerte frente a CDNs que
han sido atacadas y frente a administradores de sistemas con malas intenciones.

La funcin utilizada para generar la firma digital debe ser lo suficientemente segura y
resistente a las colisiones, de manera que cualquier mnimo cambio en el contenido
genere una firma totalmente diferente y nica.

Un detalle importante para utilizar esta funcionalidad es que la CDN debe soportar CORS
(Cross-Origin Resource Sharing). Por eso en el ejemplo anterior se incluye el atributo
crossorigin para forzar la activacin de CORS al cargar los contenidos.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
El valor anonymous del atributo crossorigin significa que el navegador debe ignorar
cualquier cookie o informacin de autenticacin que el usuario pueda tener asociado
con ese dominio. Adems de mejorar el rendimiento (al enviar menos informacin en la
peticin) esto impide que se filtre informacin entre diferentes dominios.

Sintaxis del atributo integrity


Como puedes ver en el ejemplo anterior, el atributo integrity no solo contiene el valor
de la firma digital, sino que tambin incluye la funcin utilizada para generarlo. De
hecho, puedes aadir varias firmas digitales que utilicen diferentes funciones (separa
cada firma con una coma):

<script src="https://code.jquery.com/jquery-2.1.4.min.js"
integrity="sha384-R4/ztc4ZlRqWjqIuvf6RX5yb/v90qNGx6fS48N0tRxiGkqveZETq72K
gDVJCp2TC
sha256-8WqyJLuWKRBVhxXIL1jBDD7SDxU936oZkCnxQbWwJVw="
crossorigin="anonymous"></script>

El primer uso de las firmas mltiples es que puedes utilizar firmas de diferentes niveles
de seguridad (bajo para navegadores antiguos y ms alto para los navegadores
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
modernos). Tambin puedes usar las firmas mltiples cuando una misma URL acoge a
varios scripts diferentes, como por ejemplo cuando el navegador usa la negociacin de
contenido.

Recuperndose de los errores


Si el valor del atributo integrity no coincide con el del contenido descargado por el
navegador, el cdigo JavaScript no se ejecuta. En la prctica, esto significa que los
usuarios se encontrarn en un sitio web en el que no funciona nada.

La solucin a este problema es muy sencilla. En primer lugar, guarda en tu sitio web una
copia de los contenidos que ests sirviendo a travs de la CDN. Despus, utiliza algo de
cdigo JavaScript para comprobar si se han cargado los contenidos externos. Si no,
carga los archivos desde tu propio servidor.

En el ejemplo anterior se est cargando la librera jQuery. As que el cdigo que


comprueba si se ha cargado puede ser tan sencillo como el siguiente:

<script>window.jQuery || /* cargar aqu nuestros archivos */;</script>

Este cdigo comprueba si se ha definido el objeto jQuery y en caso contrario, insertara


open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
una etiqueta para cargar el archivo JavaScript desde el propio servidor.

Ten en cuenta que muchos scripts se actualizan continuamente, sobre todo los que no
definen un nmero de versin. En estos casos, es mejor fijar la versin exacta que se
carga desde la CDN y no usar archivos que incluyen versiones genricas como latest .

HTTP o HTTPS?
La "integridad de recursos" funciona tanto con HTTP como con HTTPS. Si usas HTTP, el
navegaodr puede comprobar si el valor del atributo integrity es correcto, pero no es
capaz de defenderde de los ataques que se produzcan sobre ese acnal de comunicacin
no seguro. Esto por ejemplo puede hacer que un atacante elimine el atributo
integrity .

As que, como siempre, es aconsejable que utilices HTTPS para que al combinarlo con el
atributo integrity los usuarios disfruten del mayor nivel posible de confidencialidad y
seguridad.

Soporte para hojas de estilos


open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Todava se est trabajando para ampliar esta funcionalidad a otros tipos de recursos
diferentes a los archivos JavaScript. No obstante, ya puedes utilizarlo tambin para las
hojas de estilos CSS. Simplemente aade al atributo integrity al elemento <link> de
tus pginas.

Prueba hoy mismo la integridad de recursos


Visita el sitio srihash.org para comprobar el soporte de tu navegador y para echar un
vistazo a los ejemplos disponibles. En este sitio tambin puedes generar las firmas
digitales y comprobar si tus CDN soportan esta funcionalidad.

Tambin est disponible en varias de las CDNs y sitios ms importantes, como


BootstrapCDN, CloudFlare y GitHub.

Recursos adicionales
Especificacin oficial de "Subresource Integrity"

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Sobre el autor
Este artculo fue publicado originalmente por Frederik Braun y ha sido traducido con
permiso por Javier Eguiluz.

Comentarios
0 Comentarios LibrosWeb
1 Acceder

Ordenar por los mejores


Recomendar 6 Compartir

S el primero en comentar...

S el primero en comentar.

TAMBIN EN LIBROSWEB
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Preparando tus bocetos sin el Lorem Ipsum Tus formularios de login pronto dejarn de ser
1 comentario hace un ao seguros
Higinio Fuentes Gracias!Que bien que lo haya Ud. 2 comentarios hace un ao
puesto a disposicion. Es una idea muy practica ya que Jhonathan Calderon Sanchez Gracias por la
es verdad, el cliente se distrae con el informacin :D

Los generadores de PHP 5.5 La nueva extensin OPcache de PHP 5.5


1 comentario hace un ao 5 comentarios hace un ao
Higinio Fuentes Gracias!Lastima que empiezen con Javier Eguiluz Ral, quizs la explicacin de
PHP 5.5 :( Wikipedia es ms completa al respecto:Los intrpretes
se diferencian de los compiladores

Suscrbete d Aade Disqus a tu sitio web Privacidad

Fecha de publicacin
12 de enero de 2016

ETIQUETAS POPULARES
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
composer css diseo html javascript php programacin sistemas symfony

SUSCRBETE GRATIS
RSS Todos los tutoriales

RSS Tutoriales de diseo

RSS Tutoriales de programacin

3.756
2006-2017 LibrosWeb.es Contacto Novedades Condiciones Privacidad

das online

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com

Potrebbero piacerti anche