Como implementar SRI en tu proceso de build

9 julio, 2016 19:09 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Imagina recibir una llamada de un cliente, que dice que tu sitio web está enviando malware. Tu corazón comienza a latir rápidamente, comienzas a sudar, y los tweets comienzan a aparecer. Algo está pasando. Te das cuenta de que tu sistema no ha sido comprometido.

De hecho, fue tu CDN que fue hackeado, y los scripts que colocaste en tu web se volvieron maliciosos. Le dices a tus clientes lo que sucedió, pero no les importa. Has fallado en facilitarles un producto seguro, has perdido su confianza. Si esto hubiera sucedido hace 2 años, me sentiría mal por ti. Pero si te sucediese hoy, suspiraría y te diría “Debiste haber usado SRI”.

Subresource Integrity (SRI, integridad de sub-recursos) es una nuevo estándar de seguridad para aplicaciones web, una especificación de W3C que ayuda a prevenir situaciones como la descrita anteriormente. Piensa en SRI como una red de seguridad, o una cuerda de escalar, para la seguridad del contenido web. Simplemente es un atributo llamado integrity con un hash SHA-2 como valor dentro de un tag <script><link>. Por ejemplo:


Para que funcione SRI, el CDN tiene que tener habilitado CORS. Eso y más está explicado en detalle en la introducción a SRI (en inglés).

Soporte

Tipos de archivos

La primera versión del estándar SRI fue diseñado para tratar con el más grande vector de ataque causado por recursos externos, el prevalente secuestro de recursos en CDNs de CSS o JS. Otros tipos como Flash, imágenes, y vídeos no están soportados aun, pero pueden ser agregados en versiones futuras.

Navegadores

Según los reportes de Abril del 2016 en CanIUse.com el ~52% de los navegadores (móviles + escritorio) globalmente soportan SRI. Los agentes de escritorio que soportan SRI son: Firefox (44+), Chrome(47+) y Opera (36+). Los siguientes navegadores de Android también soportan SRI: Chrome (49+), Android Browser (49+), Opera (36+) y Firefox (45+).

Nota que SRI no funciona en navegadores como Firefox para iOS. Esto es porque Apple requiere que todas las apps (incluidas los navegadores y navegadores dentro de apps) usen el motor WebKit.

SRI en tu proceso de build

Hay más de una manera de tener SRI en tu proceso de build, un número de herramientas ya tienen plugins, por ejemplo: Grunt, Gulp, Broccoli, Webpack, Ember CLI y Handlebars.

Decidimos mostrar un ejemplo del mundo real de SRI en un proceso de build. Usamos un plugin de Grunt llamado grunt-sri para generar los hashes.

Cómo lo hicimos para jQuery

Cuando investigamos incluir integridad de SRI para code.jquery.com, tomamos un camino bastante simple, comparado con las implementaciones anteriores. El código base ya estaba usando Grunt, así que fue muy fácil incluir un objetivo usando el modulo de node grunt-srigrunt-sri traversa una lista especificada de archivos, y genera JSON incluyendo todos los metadatos requeridos para implementar SRI en el código. Una vez generado, el archivo puede ser fácilmente usado como la base de las fuentes a la hora de construir una aplicación.

Aqui hay un ejemplo simple de la implementación usando grunt-sri:

// Gruntfile.js
grunt.loadNpmTasks("grunt-sri");
grunt.initConfig({
    sri: {
        generate: {
            src: [ 'public/**/*.js', 'public/**/*.css' ],
            options: { algorithms: [ 'sha256' ] }
        }
    }
});

Una vez implementada, correr grunt sri:generate creará ./payload.json para ser requerida en tu aplicación, u otra tarea de Grunt. El SHA de SRI puede ser obtenido desde el archivo JSON desde tu código como se muestra en la documentación de grunt-sri:

// ES6 from https://github.com/neftaly/grunt-sri#javascript
var payload = require("./payload.json");
var sri = (id) => payload.payload[id];

var element = ``;

Para detalles adicionales de implementación véase: https://github.com/neftaly/grunt-sri o dirígete a nuestro pull request de code.jquery.com, específicamente este diff.

Mas allá de JavaScript / Node.js

Si prefieres mantenerlo a la vieja escuela, con un Makefile no hay problema. Asumiendo que usas un entorno como unix, puedes olvidarte de usar plugins de node y hacer algo así:

# Makefile
generate:
    cat FILENAME.js | openssl dgst -sha256 -binary \
        | openssl enc -base64 -A

Para ejemplos de generar SHAs de SRI en varias otras plataformas, ve este Gist.

Conclusión

SRI es una forma muy simple de asegurar archivos estáticos que están hosteados en servidores que no controlas. Hay varias herramientas que te permiten integrar SRI en tus procesos de  build. Desarrolladores de webs / aplicaciones  modernas, no solo hagan su parte implementando SRI, también discútanlo con sus compañeros, y explíquenles sus beneficios.

The following two tabs change content below.
Si, mi biografia esta vacia. 🙂

Compartir artículo:

Empezar la discusión en foro.mozilla-hispano.org

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa