Skip to main content
Lo que necesitarás
Language

Inicio rápido en 5 minutos

Pasa de cero a monitorear los scripts de terceros de tu sitio web en menos de 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:

PlanPrecioIdeal para
Free$0/mesPruebas y sitios pequeños (hasta 2,500 vistas de página/mes)
BusinessDesde $99/mesSitios en producción que necesitan bloqueo de amenazas y reversiones
EnterprisePersonalizadoSitios 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://[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>
  );
}

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()],
});
La instalacion con GTM es solo para pruebas

GTM no garantiza el orden de carga de los scripts, por lo que otros scripts pueden ejecutarse antes de que cside pueda interceptarlos. Para produccion, usa la instalacion directa del script para asegurar que cside se cargue primero.

  1. En Google Tag Manager, ve a Etiquetas > Nueva, haz clic en Configuracion de la etiqueta y selecciona HTML personalizado
  2. Pega el siguiente fragmento en el campo HTML (reemplaza [your-team-id] con el ID de tu equipo)
  3. En Activacion, selecciona All Pages
  4. Guarda la etiqueta y publica tu contenedor GTM
<script type="text/javascript" src="https://[your-team-id].csidetm.com/client.js" referrerpolicy="origin"></script>

Si usas Claude Code, Cursor u otro asistente de programacion con IA, puede agregar cside por ti. Consulta el prompt completo en la pagina del asistente IA, o pega esto en tu 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.

Activa y verifica

  1. En el panel de control, ve a Domains en la barra lateral izquierda
  2. Haz clic en Activate junto a tu dominio
  3. 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 notificaciones para email, Slack, Jira, Linear o webhooks)
  • Bloquear amenazas automáticamente (plan Business y superiores)

Próximos pasos

Was this page helpful?