Marketing de Conteúdo

Quebra de iframe: como impedir o iframe não autorizado do seu conteúdo

Um visitante do meu site uma vez me informou quando clicou em um dos meus links em Twitter; ele foi levado ao meu site com um grande pop-up e um aviso de código malicioso. Isso é o suficiente para assustar alguém, então comecei a fazer alguns testes. Não havia nada de errado com meu site – o problema era o link.

O link em outro site produziu uma barra de ferramentas na parte superior que incentivou as pessoas a clicar em um link malicioso enquanto carregava meu site em um iframe abaixo. Para a maioria das pessoas, meu site pode parecer estar espalhando código malicioso. Eu não diria que gosto de nenhum site que carregue meu site dentro de um iframe, então fiz o que qualquer geek razoável faria... Carreguei um frame breaker.

Iframing seu site nem sempre é malicioso, no entanto. Recentemente, compartilhamos uma ferramenta, Sniply, para adicionar uma frase de chamariz (CTA) para qualquer link de site que você compartilhar. Ele faz isso incorporando todo o seu site em um iframe e aplicando div sobre seu conteúdo com a frase de chamariz.

Mas sou muito exigente quanto ao meu conteúdo e ao esforço que dedico Martech Zone, então não quero que ninguém iframe meu conteúdo, mesmo com uma plataforma de compartilhamento de link. Ao fazer algumas pesquisas, existem algumas maneiras de lidar com isso.

Como parar o iframe de seu conteúdo com JavaScript

Este código JavaScript verifica se a janela atual (self) não é a janela superior (top). Se não estiver, isso significa que a página está em um frame, iframe ou similar, e o script redireciona a janela superior para a URL da janela atual. Isso efetivamente interrompe do iframe.

<script type='text/javascript'>
if (top !== self) top.location.href = self.location.href;
</script>

Existem várias desvantagens nessa abordagem:

  1. Dependência de JavaScript: Se o usuário tiver o JavaScript desabilitado, este método não funcionará.
  2. Atrasos: pode haver um pequeno atraso antes da execução do JavaScript, durante o qual a versão emoldurada de seu site ainda pode estar visível.
  3. Restrições entre origens: Em algumas situações, a política de mesma origem pode impedir que esse script funcione conforme o esperado. Se o documento principal estiver em um domínio diferente, talvez não seja possível acessá-lo top.location.href.
  4. Potencial para destruidores de quadros: também existem scripts (chamados de frame-busting-busters) que podem impedir que os scripts de frame-busting funcionem.

A melhor abordagem é utilizar cabeçalhos de resposta HTTP.

Opções de X-Frame e política de segurança de conteúdo

Ambos X-Frame-Options e Content-Security-Policy (CSP) são cabeçalhos de resposta HTTP usados ​​para aumentar a segurança de um site. Cada um deles serve a propósitos ligeiramente diferentes e tem diferentes níveis de flexibilidade.

X-Frame-Options é um cabeçalho HTTP mais antigo projetado especificamente para controlar se seu site pode ser incorporado em um <frame>, <iframe>, <embed>ou <object> em outro site. Possui três diretivas possíveis:

  1. DENY – A página não pode ser exibida em um quadro, independentemente de o site tentar fazê-lo.
  2. SAMEORIGIN – A página só pode ser exibida em um quadro na mesma origem da própria página.
  3. ALLOW-FROM uri – A página só pode ser exibida em um quadro na origem especificada.

O Mercado Pago não havia executado campanhas de Performance anteriormente nessas plataformas. Alcançar uma campanha de sucesso exigiria X-Frame-Options é limitado porque não pode lidar com cenários mais complexos, como permitir o enquadramento de várias origens diferentes ou usar curingas para subdomínios. Nem todos os navegadores suportam o ALLOW-FROM Directiva.

Content-Security-Policy, por outro lado, é um cabeçalho HTTP muito mais flexível e poderoso. Enquanto ele pode fazer tudo X-Frame-Options pode fazer e muito mais, seu objetivo principal é impedir uma ampla variedade de ataques de injeção de código, incluindo scripts entre sites (XSS) e roubo de cliques. Ele funciona especificando uma lista branca de fontes confiáveis ​​de conteúdo (scripts, estilos, imagens, etc.).

Para controlar quadros, o CSP usa o frame-ancestors diretiva. Você pode especificar várias fontes, incluindo vários domínios e subdomínios curinga. Aqui está um exemplo:

cssCopy codeContent-Security-Policy: frame-ancestors 'self' yourdomain.com *.domain2.com;

Isso permitiria que a página fosse enquadrada em seu próprio site ('self'), sobre yourdomain.com, e em qualquer subdomínio de domain2.com.

O CSP está sendo recomendado como um substituto para X-Frame-Options, já que ele pode lidar com tudo X-Frame-Options pode fazer, e muito mais. Embora a maioria dos navegadores modernos suporte CSP, ainda pode haver alguns navegadores antigos ou menos comuns que não o suportam totalmente.

Como parar de criar iframe em seu conteúdo com HTML

Agora existe uma meta tag Content-Security-Policy que pode ser implantada e que desativa a capacidade de iframe do seu conteúdo:

<meta http-equiv="Content-Security-Policy" content="frame-ancestors 'self' yourdomain.com">

A eficácia da metatag HTML é limitada porque nem todos os navegadores respeitam a Content-Security-Policy quando definido usando uma meta tag.

Como parar o iframe de seu conteúdo com cabeçalhos HTTP

É melhor usar os cabeçalhos HTTP X-Frame-Options or Content-Security-Policy para controlar o enquadramento. Essas opções são mais confiáveis ​​e seguras e funcionam mesmo se o JavaScript estiver desabilitado. O método JavaScript só deve ser usado como último recurso se você não tiver controle sobre o servidor para definir os cabeçalhos HTTP. Para cada exemplo, substitua yourdomain.com com seu domínio real.

apache – Modifique seu .htaccess arquivo da seguinte maneira:

Header always set X-Frame-Options SAMEORIGIN
Header always set Content-Security-Policy "frame-ancestors 'self' yourdomain.com"

nginx – Modifique seu bloco de servidor da seguinte forma:

add_header X-Frame-Options SAMEORIGIN;
add_header Content-Security-Policy "frame-ancestors 'self' yourdomain.com";

IIS – faça isso adicionando o seguinte ao seu web.config arquivo:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Content-Security-Policy" value="frame-ancestors 'self' yourdomain.com" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

WordPress – faça isso adicionando este código ao seu arquivo functions.php:

function add_security_headers() {
  header('X-Frame-Options: SAMEORIGIN');
  header("Content-Security-Policy: frame-ancestors 'self' yourdomain.com");
}
add_action('send_headers', 'add_security_headers');

Essas configurações permitirão apenas que sua página seja incorporada em iframes no domínio exato que você especificar, não em nenhum subdomínio de domínio. Se quiser permitir determinados subdomínios, você terá que listá-los explicitamente, como subdomain1.yourdomain.com subdomain2.yourdomain.com, E assim por diante.

Permitir iframe de seu conteúdo de vários domínios

Você pode especificar vários domínios com o cabeçalho de resposta HTTP Content-Security-Policy e a diretiva frame-ancestors. Um espaço deve separar cada domínio. Aqui está um exemplo:

Content-Security-Policy: frame-ancestors 'self' domain1.com domain2.com domain3.com;

apache – Modifique seu .htaccess arquivo da seguinte maneira:

Header always set X-Frame-Options SAMEORIGINHeader always set Content-Security-Policy "frame-ancestors 'self' domain1.com domain2.com domain3.com"

nginx – Modifique seu bloco de servidor da seguinte forma:

add_header X-Frame-Options SAMEORIGIN;add_header Content-Security-Policy "frame-ancestors 'self' domain1.com domain2.com domain3.com";

IIS – faça isso adicionando o seguinte ao seu web.config arquivo:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="SAMEORIGIN" />
      <add name="Content-Security-Policy" value="frame-ancestors 'self' domain1.com domain2.com domain3.com" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

Permitir iframe de seu conteúdo de um domínio curinga

Você também pode especificar um curinga para todos os subdomínios com o Content-Security-Policy Cabeçalho de resposta HTTP e diretiva frame-ancestors. Aqui estão exemplos de Content-Security-Policy código que precisa ser atualizado:

Content-Security-Policy: frame-ancestors 'self' *.yourdomain.com;

apache – Modifique seu .htaccess arquivo da seguinte maneira:

Header always set Content-Security-Policy "frame-ancestors 'self' *.yourdomain.com"

nginx – Modifique seu bloco de servidor da seguinte forma:

add_header Content-Security-Policy "frame-ancestors 'self' *.domain1.com *.domain2.com *.domain3.com";

IIS – faça isso adicionando o seguinte ao seu web.config arquivo:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Content-Security-Policy" value="frame-ancestors 'self' *.yourdomain.com" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

Douglas Karr

Douglas Karr é CMO de AbrirINSIGHTS e o fundador da Martech Zone. Douglas ajudou dezenas de startups de MarTech bem-sucedidas, auxiliou na due diligence de mais de US$ 5 bilhões em aquisições e investimentos da Martech e continua a auxiliar empresas na implementação e automatização de suas estratégias de vendas e marketing. Douglas é um especialista e palestrante em transformação digital e MarTech reconhecido internacionalmente. Douglas também é autor publicado de um guia para leigos e de um livro sobre liderança empresarial.

Artigos Relacionados

Voltar ao topo botão
Fechar

Adblock detectado

Martech Zone é capaz de fornecer a você esse conteúdo sem nenhum custo porque monetizamos nosso site por meio de receita de anúncios, links de afiliados e patrocínios. Agradeceríamos se você removesse seu bloqueador de anúncios ao visualizar nosso site.