Inicio rápido en 5 minutos

Pon cside en funcionamiento en tu sitio web en 5 minutos. Al final de esta guía, tendrás visibilidad en tiempo real de cada script de terceros que se carga en los navegadores de tus visitantes.

Lo que necesitarás

Un sitio web que quieras proteger
Acceso al HTML o al proceso de compilación de tu sitio

Inicio rápido

Crea tu cuenta

Ve a dash.cside.com/auth/signup y regístrate. Verifica tu correo electrónico con el código de 6 dígitos enviado a tu bandeja de entrada.

Elige tu plan:

Plan	Precio	Ideal para
Free	$0/mes	Pruebas y sitios pequeños (hasta 2,500 vistas de página/mes)
Business	Desde $99/mes	Sitios en producción que necesitan bloqueo de amenazas y reversiones
Enterprise	Personalizado	Sitios de alto tráfico, SSO, soporte dedicado

Agrega tu dominio

En el panel de control, haz clic en Add Domain e ingresa tu dominio (por ejemplo, example.com). Los dominios incluyen subdominios automáticamente, por lo que www.example.com y shop.example.com se incluyen de forma predeterminada.

Elige tu modo de protección:

Direct Mode (El más fácil) — Monitorea scripts en el navegador y los obtiene del lado del servidor para su verificación. No agrega latencia.
Scan Mode (Sin cambios de código) — Análisis basado en rastreo. Solo para Enterprise.

¿No estás seguro de qué modo elegir?

Comienza con Direct Mode. Consulta Onboarding para obtener detalles sobre cada modo.

Agrega el script de cside

Elige el método que corresponda a tu stack:

Agrega esto como el primer script en tu <head>:

<script src="https://proxy.csidetm.com/script.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>
  );
}

Agrega esto a tu script de compilación en package.json:

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

El CLI inyecta automáticamente el script de monitoreo de cside en tus archivos HTML. Funciona con Astro, Gatsby, Hugo, Eleventy, Docusaurus y cualquier framework que genere HTML estático.

npm install @cside.dev/vite

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

export default defineConfig({
  plugins: [cside()],
});

Activa y verifica

En el panel de control, ve a Domains en la barra lateral izquierda
Haz clic en Activate junto a tu dominio
Visita tu sitio web — deberías ver el tráfico de scripts aparecer en el panel de control en cuestión de segundos

Estás protegido

Una vez activado, cside hará lo siguiente:

Monitorear cada script de terceros cargado en los navegadores de tus visitantes
Detectar comportamiento malicioso o sospechoso de scripts en tiempo real
Alertarte cuando se encuentren amenazas (configura endpoints de notificación para Slack, Jira, Linear o webhooks)
Bloquear amenazas automáticamente (plan Business y superiores)

Próximos pasos

Ajusta tu CSP — Configura la Content Security Policy para que funcione con cside
Configura notificaciones — Recibe alertas en Slack, Jira, Linear o mediante webhooks
Cumplimiento PCI DSS — Descubre cómo cside ayuda a cumplir con los Requisitos 6.4.3 y 11.6.1 de PCI DSS 4.0
Prueba primero en staging — Prueba cside en un entorno de staging antes de pasar a producción