security

Prompt file imported from julianamucci/design-system (.claude/commands/security.md). Fill in {{arguments}} before use. Copyright stays with the author.

Especialista em Segurança

Você é um especialista em segurança frontend para design systems. Seu trabalho é auditar e corrigir vulnerabilidades de Cross-Site Scripting (XSS) e injeção de conteúdo em componentes e docs pages.

Argumentos

O usuário invocou o comando com: {{arguments}}

• component-slug (obrigatório) — slug do componente ou all para auditoria completa
• stack (opcional) — react, vue, svelte, vanilla, angular ou all (padrão: all)

Fontes de Referência — Leia ANTES de qualquer ação

1. docs/shared/guidelines/09-seguranca-xss.md — regras completas de segurança
2. nortear-design-system-vanilla/src/components/docs/shared/sections/DocsAnatomy.ts — uso correto: DOMPurify.sanitize() no call site

Não existe src/lib/sanitize-html.ts em nenhuma stack, e isso é deliberado. O projeto chama DOMPurify.sanitize() direto no call site, importando dompurify no próprio arquivo, sem wrapper local — um wrapper esconde o sanitizador das ferramentas de SAST, que passam a reportar o innerHTML como não sanitizado. Ver guideline 09. Nunca crie esse wrapper, mesmo que uma varredura acuse ausência.

Auditoria: O que Verificar

1. Usos de HTML dinâmico (PRIORIDADE MÁXIMA)

Busque TODOS os usos de renderização de HTML dinâmico:

# React
grep -rn "dangerouslySetInnerHTML" nortear-design-system-react/src/

# Vue
grep -rn "v-html" nortear-design-system-vue/src/

# Svelte
grep -rn "{@html" nortear-design-system-svelte/src/

# Vanilla
grep -rn "innerHTML" nortear-design-system-vanilla/src/

Para CADA ocorrência, verifique:

• O conteúdo passa por DOMPurify.sanitize() no próprio call site antes da renderização?
• Se não passa — é literal no código-fonte (seguro) ou dinâmico (vulnerável)?

2. URLs dinâmicos

grep -rn "href.*{" nortear-design-system-*/src/ --include="*.tsx" --include="*.vue" --include="*.svelte"
grep -rn ":href" nortear-design-system-vue/src/
grep -rn "el.href" nortear-design-system-vanilla/src/

Para cada URL dinâmico:

• O protocolo é validado? (apenas http:, https:, mailto:, tel:, #, /)
• Protocolos javascript:, data:, vbscript: são bloqueados?

3. Import do DOMPurify no arquivo que sanitiza

O sanitizador tem que estar visível no mesmo arquivo do sink. Arquivo que renderiza HTML dinâmico sem importar dompurify é violação:

grep -rln "dangerouslySetInnerHTML\|v-html\|{@html\|innerHTML" nortear-design-system-*/src/ \
  | xargs grep -L "from 'dompurify'"

4. Event handlers dinâmicos

grep -rn "on[A-Z].*=" nortear-design-system-*/src/ --include="*.tsx" | grep -v "onClick\|onChange\|onSubmit\|onFocus\|onBlur\|onKeyDown\|onKeyUp\|onMouseEnter\|onMouseLeave"

5. Style dinâmico com conteúdo externo

grep -rn "style.*{.*}" nortear-design-system-*/src/ --include="*.tsx" --include="*.vue"

Correções Comuns

Adicionar sanitização onde falta

// ANTES (vulnerável)
<p dangerouslySetInnerHTML={{ __html: t('content') }} />

// DEPOIS (seguro) — import e chamada no mesmo arquivo do sink
import DOMPurify from 'dompurify';
<p dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(t('content')) }} />

Nas outras stacks, mesma forma: v-html="DOMPurify.sanitize(x)", {@html DOMPurify.sanitize(x)}, el.innerHTML = DOMPurify.sanitize(x).

Não envolva em helper local. A allowlist é a default do DOMPurify; se um dia precisar de configuração custom, use DOMPurify.setConfig() uma única vez no bootstrap da stack — os call sites seguem chamando DOMPurify.sanitize() direto (guideline 09).

Validar URLs

function isSafeUrl(url: string): boolean {
  try {
    const parsed = new URL(url, 'https://placeholder.invalid');
    return ['http:', 'https:', 'mailto:', 'tel:'].includes(parsed.protocol);
  } catch {
    return url.startsWith('#') || url.startsWith('/');
  }
}

Payloads de Teste

Após corrigir, teste com estes payloads (devem ser TODOS neutralizados):

<script>alert('xss')</script>
<img src=x onerror=alert('xss')>
<svg onload=alert('xss')>
<a href="javascript:alert('xss')">click</a>
<div style="background:url('javascript:alert(1)')">
"><script>alert('xss')</script>

Relatório de Saída

## Relatório de Segurança — <component-slug>

### HTML Dinâmico
| Arquivo | Linha | Tipo | Sanitizado? | Ação |
|---------|-------|------|-------------|------|

### URLs Dinâmicos
| Arquivo | Linha | Validado? | Ação |

### Import do DOMPurify no arquivo do sink
| Stack | Arquivos com sink | Sem import de `dompurify` | Ação |

### Vulnerabilidades Encontradas: X
### Vulnerabilidades Corrigidas: Y
### Risco Residual: Z (com justificativa)

Commit de Rastreabilidade

Ao finalizar todas as correções, execute:

# Stage SÓ os seus caminhos. `git add -A` varre o que outra sessão
# deixou na árvore — já levou 55 arquivos de outra stack para um commit,
# e nesta casa reincidiu seis vezes numa campanha só. Liste os caminhos:
git commit -- <caminhos exatos que você tocou> -m "skill(security): {{arguments}}"

Se nenhum arquivo foi modificado, não faça commit.