close
Skip to main content
O que você vai precisar
Language

Início Rápido em 5 Minutos

Saia do zero e comece a monitorar os scripts de terceiros do seu site em menos de 5 minutos.

Coloque o cside em funcionamento no seu site em 5 minutos. Ao final deste guia, você terá visibilidade em tempo real de todos os scripts de terceiros carregados nos navegadores dos seus visitantes.

O que você vai precisar

  • Um site que você deseja proteger
  • Acesso ao HTML ou ao processo de build do seu site

Início rápido

Crie sua conta

Acesse dash.cside.com/auth/signup e cadastre-se. Verifique seu e-mail com o código de 6 dígitos enviado para sua caixa de entrada.

Escolha seu plano:

PlanoPreçoIdeal para
Free$0/mêsTestes e sites pequenos (até 2.500 visualizações de página/mês)
BusinessA partir de $99/mêsSites em produção que precisam de bloqueio de ameaças e rollbacks
EnterprisePersonalizadoSites de alto tráfego, SSO, suporte dedicado

Adicione seu domínio

No painel, clique em Add Domain e insira seu domínio (ex.: example.com). Os domínios são tratados com wildcard por padrão, então www.example.com e shop.example.com são incluídos automaticamente.

Escolha seu modo de proteção:

  • Direct Mode (Mais fácil): Monitora scripts no navegador e os busca no servidor para verificação. Nenhuma latência adicionada.
  • Scan Mode (Sem alterações no código): Análise baseada em crawler. Apenas Enterprise.
Não tem certeza de qual modo escolher?

Comece com o Direct Mode. Consulte Onboarding para detalhes sobre cada modo.

Adicione o script do cside

Escolha o método que corresponde à sua stack:

Adicione isso como o primeiro script no seu <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>
  );
}

Adicione ao seu script de build no package.json:

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

O CLI injeta automaticamente o script de monitoramento do cside nos seus arquivos HTML. Funciona com Astro, Gatsby, Hugo, Eleventy, Docusaurus e qualquer framework que gere HTML estático.

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

export default defineConfig({
  plugins: [cside()],
});
A instalacao via GTM e apenas para testes

O GTM nao garante a ordem de carregamento dos scripts, portanto outros scripts podem ser executados antes que o cside possa intercepta-los. Para producao, use a instalacao direta do script para garantir que o cside carregue primeiro.

  1. No Google Tag Manager, va em Tags > Nova, clique em Configuracao da tag e selecione HTML personalizado
  2. Cole o trecho abaixo no campo HTML (substitua [your-team-id] pelo ID do seu time)
  3. Em Acionamento, selecione All Pages
  4. Salve a tag e publique seu container GTM
<script type="text/javascript" src="https://[your-team-id].csidetm.com/client.js" referrerpolicy="origin"></script>

Se você usa o Claude Code, Cursor ou outro assistente de codificação com IA, ele pode adicionar o cside para você. Veja o prompt completo na página do assistente IA, ou cole isto no seu 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.

Ative e verifique

  1. No painel, vá até Domains na barra lateral esquerda
  2. Clique em Activate ao lado do seu domínio
  3. Acesse seu site - você deverá ver o tráfego de scripts aparecer no painel em segundos

Você está protegido

Uma vez ativado, o cside irá:

  • Monitorar todos os scripts de terceiros carregados nos navegadores dos seus visitantes
  • Detectar comportamentos maliciosos ou suspeitos de scripts em tempo real
  • Alertar você quando ameaças forem encontradas (configure notificações para email, Slack, Jira, Linear ou webhooks)
  • Bloquear ameaças automaticamente (plano Business e superiores)

Próximos passos

Was this page helpful?