Skip to main content
Ce dont vous aurez besoin
Language

Démarrage rapide en 5 minutes

Passez de zéro à la surveillance des scripts tiers de votre site web en moins de 5 minutes.

Mettez cside en service sur votre site web en 5 minutes. À la fin de ce guide, vous aurez une visibilité en temps réel sur chaque script tiers chargé dans les navigateurs de vos visiteurs.

Ce dont vous aurez besoin

  • Un site web que vous souhaitez protéger
  • Un accès au HTML de votre site ou à son processus de build

Démarrage rapide

Créez votre compte

Rendez-vous sur dash.cside.com/auth/signup et inscrivez-vous. Vérifiez votre adresse e-mail avec le code à 6 chiffres envoyé dans votre boîte de réception.

Choisissez votre plan :

PlanPrixIdéal pour
Free0 $/moisTests et petits sites (jusqu’à 2 500 pages vues/mois)
BusinessÀ partir de 99 $/moisSites en production nécessitant le blocage des menaces et les rollbacks
EnterpriseSur mesureSites à fort trafic, SSO, support dédié

Ajoutez votre domaine

Dans le tableau de bord, cliquez sur Add Domain et saisissez votre domaine (par ex., example.com). Les domaines sont génériques par défaut : www.example.com et shop.example.com sont automatiquement inclus.

Choisissez votre mode de protection :

  • Direct Mode (Le plus simple): Surveille les scripts dans le navigateur et les récupère côté serveur pour vérification. Aucune latence ajoutée.
  • Scan Mode (Sans modification de code): Analyse basée sur un crawler. Réservé au plan Enterprise.
Vous ne savez pas quel mode choisir ?

Commencez avec Direct Mode. Consultez Onboarding pour en savoir plus sur chaque mode.

Ajoutez le script cside

Choisissez la méthode correspondant à votre stack :

Ajoutez ceci comme premier script dans votre <head> :

<script src="https://[your-team-id].csidetm.com/client.js" referrerpolicy="origin"></script>
npm install @cside.dev/next

App Router (layout.tsx) :

import { CSideScript } from '@cside.dev/next';

export default function Layout({ children }) {
  return (
    <>
      <CSideScript />
      {children}
    </>
  );
}

Pages Router (_document.tsx) :

import { CSideScript } from '@cside.dev/next';

export default function Document() {
  return (
    <Html>
      <Head>
        <CSideScript />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Ajoutez ceci à votre script de build dans package.json :

{
  "scripts": {
    "build": "your-build-command && npx @cside.dev/cli@latest example.com"
  }
}

Le CLI injecte automatiquement le script de surveillance cside dans vos fichiers HTML. Compatible avec Astro, Gatsby, Hugo, Eleventy, Docusaurus et tout framework générant du HTML statique.

npm install @cside.dev/vite
// vite.config.ts
import cside from '@cside.dev/vite';

export default defineConfig({
  plugins: [cside()],
});
L'installation GTM est reservee aux tests

GTM ne garantit pas l’ordre de chargement des scripts, d’autres scripts peuvent donc s’executer avant que cside ne puisse les intercepter. Pour la production, utilisez l’installation directe du script pour vous assurer que cside se charge en premier.

  1. Dans Google Tag Manager, allez dans Balises > Nouvelle, cliquez sur Configuration de la balise et selectionnez HTML personnalise
  2. Collez l’extrait ci-dessous dans le champ HTML (remplacez [your-team-id] par l’ID de votre equipe)
  3. Sous Declenchement, selectionnez All Pages
  4. Enregistrez la balise et publiez votre conteneur GTM
<script type="text/javascript" src="https://[your-team-id].csidetm.com/client.js" referrerpolicy="origin"></script>

Si vous utilisez Claude Code, Cursor ou un autre assistant de codage IA, il peut ajouter cside pour vous. Consultez le prompt complet sur la page de l’assistant IA, ou collez ceci dans votre terminal :

Add cside client-side security monitoring to this project. Install the
right package for the framework (@cside.dev/next for Next.js,
@cside.dev/vite for Vite, @cside.dev/cli for static sites) or add
<script src="https://[your-team-id].csidetm.com/client.js" referrerpolicy="origin"></script>
as the first script in the <head> for any other setup. Then check if the
project has a Content Security Policy (in HTTP headers, meta tags,
helmet.js, next.config.js, or hosting config). If the CSP has explicit
script-src or connect-src directives listing specific domains, add
*.csidetm.com to both. If the CSP uses broad rules like
"default-src https:", no changes are needed.

Activez et vérifiez

  1. Dans le tableau de bord, allez dans Domains dans la barre latérale gauche
  2. Cliquez sur Activate à côté de votre domaine
  3. Visitez votre site web - vous devriez voir le trafic des scripts apparaître dans le tableau de bord en quelques secondes

Vous êtes protégé

Une fois activé, cside va :

  • Surveiller chaque script tiers chargé dans les navigateurs de vos visiteurs
  • Détecter les comportements de scripts malveillants ou suspects en temps réel
  • Vous alerter lorsque des menaces sont détectées (configurez les notifications pour l’e-mail, Slack, Jira, Linear ou les webhooks)
  • Bloquer les menaces automatiquement (plan Business et supérieur)

Prochaines étapes

Was this page helpful?