SRI para sitios generados estáticamente

SRI está habilitado por defecto para sitios generados estáticamente. Esto significa que si encuentra scripts de JavaScript o hojas de estilo CSS, entonces calculará automáticamente sus respectivos hashes SRI y los escribirá automáticamente en el atributo integrity de las etiquetas <script>, <style> y <link>.

Aquí puedes ver algunos ejemplos de cómo el código es transformado por Astro-Shield.

Transformará esto

<script>console.log("Hello World!")</script>

<script integrity="sha256-TWupyvVdPa1DyFqLnQMqRpuUWdS3nKPnz70IcS/1o3Q=">console.log("Hello World!")</script>

Transformará esto

<script type="module" src="/scripts/funny.js"></script>

<script type="module" src="/scripts/funny.js" integrity="sha256-i4WR4ifasidZIuS67Rr6Knsy7/hK1xbVTc8ZAmnAv1Q="></script>

Transformará esto

<script type="module" src="https://raw.githubusercontent.com/KindSpells/astro-shield/ae9521048f2129f633c075b7f7ef24e11bbd1884/main.mjs"></script>

<script type="module" src="https://raw.githubusercontent.com/KindSpells/astro-shield/ae9521048f2129f633c075b7f7ef24e11bbd1884/main.mjs" integrity="sha256-i4WR4ifasidZIuS67Rr6Knsy7/hK1xbVTc8ZAmnAv1Q=" crossorigin="anonymous"></script>

Observa cómo también añade el atributo crossorigin para mitigar el riesgo de filtrar credenciales a servidores de terceros.

Generando el módulo de hashes SRI para recursos externos

En algunos casos, es posible que necesites algunos scripts externos para acceder a los hashes SRI generados (por ejemplo, para configurar las cabeceras de un CDN). Puedes hacer esto estableciendo la propiedad sri.hashesModule con la ruta del módulo que exportará los hashes generados.

Ejemplo:

import { resolve } from 'node:path'

import { defineConfig } from 'astro/config'
import { shield } from '@kindspells/astro-shield'

const rootDir = new URL('.', import.meta.url).pathname
const modulePath = resolve(rootDir, 'src', 'generated', 'sriHashes.mjs')

export default defineConfig({
  integrations: [
    shield({
      sri: { hashesModule: modulePath },
    }),
  ],
})

Una vez que ejecutes astro build, el módulo generado se verá así:

// Do not edit this file manually

export const inlineScriptHashes = /** @type {string[]} */ ([])

export const inlineStyleHashes = /** @type {string[]} */ ([
  'sha256-VC84dQdO3Mo7nZIRaNTJgrqPQ0foHI8gdp/DS+e9/lk=',
])

export const extScriptHashes = /** @type {string[]} */ ([
  'sha256-+aSouJX5t2z1jleTbCvA9DS7+ag/F4e4ZpB/adun4Sg=',
])

export const extStyleHashes = /** @type {string[]} */ ([
  'sha256-iwd3GNfA+kImEozakD3ZZQSZ8VVb3MFBOhJH6dEMnDE=',
])

export const perPageSriHashes =
  /** @type {Record<string, { scripts: string[]; styles: string [] }>} */ ({
    'index.html': {
      scripts: [
        'sha256-+aSouJX5t2z1jleTbCvA9DS7+ag/F4e4ZpB/adun4Sg=',
      ],
      styles: [
        'sha256-VC84dQdO3Mo7nZIRaNTJgrqPQ0foHI8gdp/DS+e9/lk='
      ],
    },
    'about.html': {
      scripts: [
        'sha256-+aSouJX5t2z1jleTbCvA9DS7+ag/F4e4ZpB/adun4Sg=',
      ],
      styles: [
        'sha256-iwd3GNfA+kImEozakD3ZZQSZ8VVb3MFBOhJH6dEMnDE=',
      ],
    },
  })

export const perResourceSriHashes = {
  scripts: /** @type {Record<string,string>} */ ({
    '/code.js': 'sha256-+aSouJX5t2z1jleTbCvA9DS7+ag/F4e4ZpB/adun4Sg=',
  }),
  styles: /** @type {Record<string,string>} */ ({
    '/_astro/index.BA1ZV6fH.css':
      'sha256-iwd3GNfA+kImEozakD3ZZQSZ8VVb3MFBOhJH6dEMnDE=',
  }),
}

Deshabilitando SRI para sitios generados estáticamente

Si deseas deshabilitar SRI para sitios generados estáticamente, puedes hacerlo estableciendo la opción sri.enableStatic a false en tu archivo de configuración de Astro.

import { defineConfig } from 'astro/config'
import { shield } from '@kindspells/astro-shield'

export default defineConfig({
  integrations: [
    shield({
      sri: { enableStatic: false },
    }),
  ],
})