SRI для SSG контента

SRI включен по умолчанию для статически сгенерированных сайтов (Static-Site-Generation, SSG). Это означает, что если он обнаружит скрипты JavaScript или таблицы стилей CSS, то автоматически вычислит их соответствующие хеши SRI и установит их в атрибут integrity тегов <script>, <style> и <link>.

Здесь вы можете увидеть несколько примеров того, как код преобразуется с помощью Astro-Shield.

Inline Script

Он преобразует это

<script>console.log("Привет, Мир!")</script>

в

<script integrity="sha256-TWupyvVdPa1DyFqLnQMqRpuUWdS3nKPnz70IcS/1o3Q=">console.log("Привет, Мир!")</script>

External Script

Он преобразует это

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

в

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

External Cross-Origin Script

Он преобразует это

<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>

Обратите внимание, что он также добавляет атрибут crossorigin, чтобы уменьшить риск утечки учетных данных на сторонние серверы.

Отключение SRI для статически сгенерированных сайтов

Если вы хотите отключить SRI для статически сгенерированных сайтов, вы можете сделать это, установив опцию sri.enableStatic в false в вашем конфигурационном файле Astro.

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 },
    }),
  ],
})

После запуска команды astro build сгенерированный модуль будет выглядеть следующим образом:

// 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=',
  }),
}

Отключение SRI для статически сгенерированных сайтов

Если вы хотите отключить SRI для статически сгенерированных сайтов, вы можете сделать это, установив опцию sri.enableStatic в false в вашем конфигурационном файле Astro.

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

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