Frameworks pris en charge
Language

Integration CLI

Utilisez l'outil CLI cside pour ajouter automatiquement cside aux fichiers HTML statiques apres votre processus de build.

Le CLI est une methode d’integration autonome pour les sites statiques. Il injecte automatiquement le script cside et prefixe les URL de vos scripts existants. Aucune balise script manuelle necessaire.

Pas besoin d'ajouter le script manuellement

Lorsque vous utilisez le CLI, il n’est pas necessaire d’ajouter le script cside a votre site. Le CLI l’ajoute automatiquement pour vous. Utilisez soit le CLI soit l’installation manuelle du script, pas les deux.

HTML statique uniquement

Le CLI ne prend en charge que les fichiers HTML statiques. Pour les applications SSR, utilisez le script manuel ou le package Next.js a la place.

Frameworks pris en charge

Le CLI fonctionne avec tout framework qui genere des fichiers HTML statiques :

  • Astro (mode statique)
  • Next.js (export statique)
  • Gatsby
  • Nuxt (mode statique)
  • SvelteKit (adaptateur statique)
  • Eleventy (11ty)
  • Hugo
  • VitePress / VuePress
  • Docusaurus

Tout autre framework qui genere des fichiers HTML statiques fonctionnera egalement. Le CLI detecte automatiquement les dossiers de sortie .next et dist, ou specifiez un repertoire personnalise avec --dir.

Installation

npm i @cside.dev/cli

Ou executez directement sans installer :

npx @cside.dev/cli your-domain.com

Utilisation

Executez le CLI apres votre processus de build pour prefixer toutes les URL de scripts dans vos fichiers HTML :

// package.json
{
  "scripts": {
    "build": "next build && npx @cside.dev/cli your-domain.com"
  }
}
Remplacez le domaine

Remplacez your-domain.com par votre domaine reel configure dans cside.

Options du CLI

Usage: @cside.dev/cli <domain> [options]

Positionals:
  domain  The domain to process                                         [string]

Options:
      --version                        Show version number             [boolean]
  -d, --dir                            Directory containing HTML files to
                                       process. Defaults to .next and dist.
                                                                        [string]
  -f                                   Process a single file instead of a
                                       directory.                       [string]
  -s, --silent                         Disable output logging.
                                                      [boolean] [default: false]
      --enable-first-party-proxy       Enable first party edge infrastructure.
                                                      [boolean] [default: false]
      --enable-script-tracking         Enable script tracking.
                                                       [boolean] [default: true]
      --enable-security-headers-check  Enable security headers check.
                                                       [boolean] [default: true]
      --excluded-scripts               Scripts to exclude from prefixing.
                                                           [array] [default: []]
  -h, --help                           Show help                       [boolean]

Exemples

Traiter un repertoire specifique :

npx @cside.dev/cli your-domain.com --dir ./out

Traiter un seul fichier :

npx @cside.dev/cli your-domain.com -f ./dist/index.html

Exclure des scripts specifiques :

npx @cside.dev/cli your-domain.com --excluded-scripts "https://example.com/script.js"

Quand utiliser le CLI

Utilisez le CLI si :

  • Vous avez un processus de build de site statique (SSG)
  • Vous voulez une integration sans code
  • Vous ne voulez pas modifier votre code source

Le CLI automatiquement :

  1. Injecte le script cside dans votre HTML
  2. Prefixe toutes les URL de scripts tiers avec l’infrastructure edge cside
  3. Ajoute les attributs referrerpolicy requis

Content Security Policy (CSP)

Si votre site utilise une Content Security Policy, vous devez quand meme la mettre a jour lorsque vous utilisez le CLI. Ajoutez proxy.csidetm.com a vos directives script-src et connect-src. Cela n’est necessaire que si vous utilisez ces directives. Si connect-src n’est pas present, vous n’avez pas besoin d’ajouter connect-src :

Content-Security-Policy: script-src 'self' proxy.csidetm.com; connect-src 'self' proxy.csidetm.com
Uniquement si vous utilisez ces directives

Vous n’avez besoin de mettre a jour votre CSP que si vous avez deja des directives script-src ou connect-src definies. Si vous n’utilisez pas de CSP, ou n’utilisez pas ces directives specifiques, aucune modification n’est necessaire.

Ce que chaque directive autorise :

  • script-src : Si vous utilisez cette directive, ajoutez proxy.csidetm.com pour autoriser le script cside et les scripts routes via Gatekeeper a s’executer
  • connect-src : Si vous utilisez cette directive, ajoutez proxy.csidetm.com pour autoriser le script cside a communiquer avec l’infrastructure edge

Pour plus de details sur la configuration CSP, consultez Ajouter cside a votre CSP et Configuration des rapports CSP.

Methodes d’integration alternatives