Stratégie de sécurité du contenu (CSP) expérimentale

Type : boolean | object
Par défaut : false

Ajouté à la version : astro@5.9.0

Active la prise en charge de la stratégie de sécurité du contenu (ou « Content Security Policy (CSP) » en anglais) pour aider à minimiser certains types de menaces de sécurité en contrôlant les ressources qu’un document est autorisé à charger. Cela offre une protection supplémentaire contre les attaques de script intersite (ou « cross-site scripting (XSS) » en anglais).

L’activation de cette fonctionnalité ajoute une sécurité supplémentaire à la gestion par défaut des scripts et styles traités et groupés par Astro et vous permet de configurer davantage ces derniers ainsi que d’autres types de contenu.

Cette fonctionnalité CSP expérimentale présente certaines limitations. Les scripts intégrés ne sont pas pris en charge par défaut, mais vous pouvez fournir vos propres hachages pour les scripts externes et intégrés. Les transitions de vue d’Astro utilisant <ClientRouter /> ne sont pas prises en charge, mais vous pouvez envisager de migrer vers l’API de transition de vue native du navigateur à la place si vous n’utilisez pas les améliorations d’Astro apportées aux API de transition de vue et de navigation natives.

Pour activer cette fonctionnalité, ajoutez l’option expérimentale dans votre configuration Astro :

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    csp: true
  }
});

Lorsqu’elle est activée, Astro ajoutera un élément <meta> à l’intérieur de l’élément <head> de chaque page.

Cet élément aura l’attribut http-equiv="content-security-policy", et l’attribut content fournira des valeurs pour les directives script-src et style-src en fonction des scripts et des styles utilisés dans la page.

<head>
  <meta
    http-equiv="content-security-policy"
    content="
      script-src 'self' 'sha256-somehash';
      style-src 'self' 'sha256-somehash';
    "
  >
</head>

Configuration

Vous pouvez personnaliser davantage l’élément <meta> en activant cette fonctionnalité avec un objet de configuration qui inclut des options supplémentaires.

`algorithm`

Type : 'SHA-256' | 'SHA-512' | 'SHA-384'
Par défaut : 'SHA-256'

Ajouté à la version : astro@5.9.0

La fonction de hachage à utiliser lors de la génération des hachages des styles et des scripts émis par Astro.

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    csp: {
      algorithm: 'SHA-512'
    }
  }
});

`directives`

Type : CspDirective[]
Par défaut : []

Ajouté à la version : astro@5.9.0

Une liste de directives CSP qui définissent des sources valides pour des types de contenu spécifiques.

Bien qu’Astro doive contrôler les directives script-src et style-src, il est possible de contrôler d’autres directives CSP en utilisant le champ csp.directives. Ces directives sont ajoutées à toutes les pages. Astro accepte une liste de directives bénéficiant de la sûreté du typage :

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    csp: {
      directives: [
        "default-src 'self'",
        "img-src 'self' https://images.cdn.example.com"
      ]
    }
  }
});

Après la compilation, l’élément <meta> ajoutera vos directives dans la valeur content aux côtés des directives par défaut d’Astro :

<meta
  http-equiv="content-security-policy"
  content="
    default-src 'self';
    img-src 'self' 'https://images.cdn.example.com';
    script-src 'self' 'sha256-somehash';
    style-src 'self' 'sha256-somehash';
  "
>

`styleDirective` et `scriptDirective`

Type : object
Par défaut : {}

Ajouté à la version : astro@5.9.0

Objets de configuration qui vous permettent de remplacer les sources par défaut des directives style-src et script-src par la propriété resources, ou de fournir des hachages supplémentaires à restituer.

Ces propriétés sont ajoutées à toutes les pages et remplacent complètement les ressources par défaut d’Astro, sans s’y ajouter. Par conséquent, vous devez spécifier explicitement les valeurs par défaut à inclure.

`resources`

Type : string[]
Par défaut : []

Ajouté à la version : astro@5.9.0

Une liste de sources valides pour les directives script-src et style-src.

Les directives script-src et style-src sont gérées par Astro par défaut et utilisent la ressource 'self'. Cela signifie que les scripts et les styles ne peuvent être téléchargés que par l’hôte actuel (généralement le site web actuel).

Pour remplacer la source par défaut, vous pouvez fournir une liste de ressources à la place. Cela n’inclura pas self par défaut, il faudra l’inclure dans cette liste si vous souhaitez le conserver. Ces ressources sont ajoutées à toutes les pages.

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    csp: {
      styleDirective: {
        resources: [
          "'self'",
          "https://styles.cdn.example.com"
        ]
      },
      scriptDirective: {
        resources: [
          "https://cdn.example.com"
        ]
      }
    }
  }
});

Après la compilation, l’élément <meta> appliquera à la place vos sources aux directives style-src et script-src :

<head>
  <meta
    http-equiv="content-security-policy"
    content="
      script-src https://cdn.example.com 'sha256-somehash';
      style-src 'self' https://styles.cdn.example.com 'sha256-somehash';
    "
  >
</head>

`hashes`

Type : CspHash[]
Par défaut : []

Ajouté à la version : astro@5.9.0

Une liste de hachages supplémentaires à restituer.

Si vous avez des scripts ou des styles externes qui ne sont pas générés par Astro, ou des scripts intégrés dans vos pages, cette option de configuration vous permet de fournir des hachages supplémentaires à restituer.

Vous devez fournir des hachages commençant par sha384-, sha512- ou sha256-. D’autres valeurs entraîneront une erreur de validation. Ces hachages sont ajoutés à toutes les pages.

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    csp: {
      styleDirective: {
        hashes: [
          "sha384-styleHash",
          "sha512-styleHash",
          "sha256-styleHash"
        ]
      },
      scriptDirective: {
        hashes: [
          "sha384-scriptHash",
          "sha512-scriptHash",
          "sha256-scriptHash"
        ]
      }
    }
  }
});

Après la compilation, l’élément <meta> inclura vos hachages supplémentaires dans les directives script-src et style-src :

<meta
  http-equiv="content-security-policy"
  content="
    script-src 'self' 'sha384-scriptHash' 'sha512-scriptHash' 'sha256-scriptHash' 'sha256-generatedByAstro';
    style-src 'self' 'sha384-styleHash' 'sha512-styleHash' 'sha256-styleHash' 'sha256-generatedByAstro';
  "
>

`strictDynamic`

Type : boolean
Par défaut : false

Ajouté à la version : astro@5.9.0

Active le mot-clé strict-dynamic pour prendre en charge l’injection dynamique de scripts.

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    csp: {
      scriptDirective: {
        strictDynamic: true
      }
    }
  }
});

API de l’environnement d’exécution

Vous pouvez personnaliser l’élément <meta> par page via les API de l’environnement d’exécution disponibles à partir de la variable globale Astro à l’intérieur des composants .astro, ou à partir du type APIContext dans les points de terminaison et les middleware.

`insertDirective`

Type : (directive: CspDirective) => void

Ajouté à la version : astro@5.9.0

Ajoute une directive unique à la page actuelle. Vous pouvez appeler cette méthode plusieurs fois pour ajouter des directives supplémentaires.

---
Astro.insertDirective("default-src 'self'");
Astro.insertDirective("img-src 'self' https://images.cdn.example.com");
---

Après la compilation, l’élément <meta> pour cette page individuelle incorporera vos directives supplémentaires aux côtés des directives script-src et style-src existantes :

<meta
  http-equiv="content-security-policy"
  content="
    default-src 'self';
    img-src 'self' https://images.cdn.example.com;
    script-src 'self' 'sha256-somehash';
    style-src 'self' 'sha256-somehash';
  "
>

`insertStyleResource`

Type : (resource: string) => void

Ajouté à la version : astro@5.9.0

Insère une nouvelle ressource à utiliser pour la directive style-src.

---
Astro.insertStyleResource("https://styles.cdn.example.com");
---

Après la compilation, l’élément <meta> pour cette page individuelle ajoutera votre source à la directive style-src par défaut :

<meta
  http-equiv="content-security-policy"
  content="
    script-src 'self' 'sha256-somehash';
    style-src https://styles.cdn.example.com 'sha256-somehash';
  "
>

`insertStyleHash`

Type : (hash: CspHash) => void

Ajouté à la version : astro@5.9.0

Ajoute un nouveau hachage à la directive style-src.

---
Astro.insertStyleHash("sha512-styleHash");
---

Après la compilation, l’élément <meta> pour cette page individuelle ajoutera votre hachage à la directive style-src par défaut :

<meta
  http-equiv="content-security-policy"
  content="
    script-src 'self' 'sha256-somehash';
    style-src 'self' 'sha256-somehash' 'sha512-styleHash';
  "
>

`insertScriptResource`

Type : (resource: string) => void

Ajouté à la version : astro@5.9.0

Insère une nouvelle source valide à utiliser pour la directive script-src.

---
Astro.insertScriptResource("https://scripts.cdn.example.com");
---

Après la compilation, l’élément <meta> pour cette page individuelle ajoutera votre source à la directive script-src par défaut :

<meta
  http-equiv="content-security-policy"
  content="
    script-src https://scripts.cdn.example.com 'sha256-somehash';
    style-src 'self' 'sha256-somehash';
  "
>

`insertScriptHash`

Type : (hash: CspHash) => void

Ajouté à la version : astro@5.9.0

Ajoute un nouveau hachage à la directive script-src.

---
Astro.insertScriptHash("sha512-scriptHash");
---

Après la compilation, l’élément <meta> pour cette page individuelle ajoutera votre hachage à la directive script-src par défaut :

<meta
  http-equiv="content-security-policy"
  content="
    script-src 'self' 'sha256-somehash' 'sha512-styleHash';
    style-src 'self' 'sha256-somehash';
  "
>

Contribuer Communauté Parrainer

Stratégie de sécurité du contenu (CSP) expérimentale

Configuration

algorithm

directives

styleDirective et scriptDirective

resources

hashes

strictDynamic

API de l’environnement d’exécution

insertDirective

insertStyleResource

insertStyleHash

insertScriptResource

insertScriptHash

`algorithm`

`directives`

`styleDirective` et `scriptDirective`

`resources`

`hashes`

`strictDynamic`

`insertDirective`

`insertStyleResource`

`insertStyleHash`

`insertScriptResource`

`insertScriptHash`