Squad Front

Appearance

Segurança de Navegador e Web Platform ​

O navegador moderno possui diversas camadas de segurança nativas. Entender como elas funcionam é essencial para não as desativar ou contornar indevidamente.

1. Same-Origin Policy (SOP) ​

A Política de Mesma Origem é o pilar da segurança web. Ela impede que um script em um site acesse dados de outro site, a menos que as origens (protocolo, domínio e porta) sejam idênticas.

2. CORS (Cross-Origin Resource Sharing) ​

O CORS é um mecanismo que permite que os servidores relaxem a SOP para domínios específicos.

✅ Como fazer ​

  • No backend, configure o Access-Control-Allow-Origin apenas para os domínios da empresa.
  • Entenda o fluxo de Preflight requests (requisições OPTIONS) feitas pelo navegador.

❌ Como não fazer ​

  • Jamais use Access-Control-Allow-Origin: * em APIs que lidam com dados sensíveis ou autenticação.

3. HTTPS / TLS ​

O protocolo HTTPS garante a integridade e a confidencialidade dos dados entre o cliente e o servidor.

Mixed Content ​

Ocorre quando um site HTTPS carrega recursos (imagens, scripts) via HTTP. O navegador bloqueia ou exibe avisos graves, pois esses recursos podem ter sido alterados no caminho.

4. Browser Sandbox ​

Os navegadores executam abas e processos em um ambiente isolado (sandbox) para impedir que um site malicioso acesse o sistema de arquivos ou processos do computador do usuário.

5. Iframes e Riscos de Embed ​

Incorporar sites via iframe pode expor a aplicação a ataques de Clickjacking ou permitir que o site embedado tente navegar o site pai.

✅ Como fazer ​

  • Use o atributo sandbox em iframes: <iframe sandbox="allow-scripts allow-forms" ...>.

6. Referrer Policy ​

Controla quanta informação de referência (a URL de onde o usuário veio) é enviada nas requisições.

✅ Como fazer ​

  • Use Referrer-Policy: strict-origin-when-cross-origin para evitar vazamento de dados sensíveis presentes em URLs (como tokens).

7. Window.postMessage ​

Permite a comunicação segura entre diferentes janelas ou iframes.

✅ Como fazer ​

  • Sempre valide a origem da mensagem:
javascript
window.addEventListener("message", (event) => {
  if (event.origin !== "https://trusted-site.com") return;
  // processar mensagem
}, false);
  • Sempre especifique o targetOrigin ao enviar mensagens: otherWindow.postMessage(message, "https://target-site.com").

❌ Como não fazer ​

  • Não use * como targetOrigin ao enviar dados sensíveis.
  • Não processe mensagens sem validar o event.origin.