Pular para o conteúdo
PTEN

Segurança (CSP)

Proteja os seus clientes garantindo que os seus orçamentos só possam ser abertos onde você autorizar.

A ameaça de clickjacking

Se qualquer página da internet pudesse simplesmente criar um <iframe> apontando para os orçamentos privados dos seus clientes, um invasor poderia construir uma página falsa sobreposta (UI Redressing ou Clickjacking) e induzir um cliente a clicar em um botão de pagamento falso que, na verdade, clica no botão de aceitar dentro do seu orçamento invisível.

Por isso, a segurança do Cord Elements é rigorosa desde o primeiro dia.

Frame Ancestors e a allowlist

O Cord mitiga essa vulnerabilidade com cabeçalhos HTTP nativos conhecidos como Content Security Policy (CSP). Especificamente, usamos a diretiva frame-ancestors.

Para que o snippet de instalação do Elements funcione no seu site corporativo, você precisa primeiro registrar as suas origens no painel.

  1. Acesse Configurações › Gerador de orçamentos incorporável, na seção Desenvolvedores do índice (ela aparece com o Modo desenvolvedor ativo em Sua conta › Preferências).
  2. Procure a etapa Domínios autorizados.
  3. Adicione os domínios separados por quebras de linha.

Exemplos válidos

O sistema de domínios permite origens estritas ou o uso de curingas (wildcards):

  • sua-empresa.com (autoriza apenas a raiz).
  • *.sua-empresa.com (autoriza a raiz e qualquer subdomínio, como app.sua-empresa.com).
  • https://portal.sua-empresa.com (bastante específico).

Sem domínios: somente leitura

Se a lista de domínios estiver vazia, qualquer site pode incorporar o orçamento, mas apenas para exibi-lo. Aprovar, assinar e pagar não são oferecidos dentro do iframe: em vez disso, aparece um botão que abre a proposta em uma nova aba, no domínio do Cord, onde nenhum site de terceiros pode sobrepor nada. Os eventos saem sem detail (sem o nome de quem assina nem a URL de pagamento).

Com pelo menos um domínio registrado, frame-ancestors restringe todos os ancestrais do iframe e o gerador de orçamentos é interativo.

Os eventos só chegam à sua origem

O SDK anexa o parâmetro parentOrigin (o window.location.origin da sua página) à URL do iframe. Se ele coincidir com a sua lista, window.postMessage direciona os eventos apenas a essa origem. Sem coincidência, o iframe continua protegido por frame-ancestors: só uma página dos seus domínios pode estar na cadeia de frames.

O pagamento nunca roda dentro do iframe

A página de pagamento não pode ser enquadrada em nenhum caso. Ao pagar a partir de um embed, o Cord a abre em uma janela própria e o evento cord:pay traz a sua URL absoluta. Assim, os dados do cartão nunca passam por um documento que o seu site, ou um de terceiros, possa cobrir.

Chaves

  • Publishable Key (pk_live_): só funciona com domínios permitidos configurados. Sem eles, a API responde origin_allowlist_required. As chaves pk_test_ funcionam a partir de qualquer origem, incluindo localhost.
  • Secret Key (sk_): jamais em um navegador. Se uma chegar de um navegador, a API responde secret_key_in_browser e você deve revogá-la: ela já ficou exposta no código da página. O @flouviahq/node também se recusa a rodar em um navegador.