Dica de segurança no Desenvolvimento Web utilizando X-Frame-Options
Marcelo Pereira
Desenvolvedor Front-End Sênior | React.js, Next.js, TypeScript, JavaScript, Tailwind CSS, Node.js
Olá pessoal! Passando aqui para compartilhar uma dica rápida para aumentar a segurança dos seus sites e páginas web.
Hoje vou falar sobre o cabeçalho HTTP (X-Frame-Options), que em resumo pode ser usado para indicar se o navegador web do usuário deve renderizar a página dentro de um <iframe>, <embed>, <object>, etc. Desta forma evitamos ataques como por exemplo, o Click-jacking, que na prática tenta enganar o usuário com links ou botões com a finalidade de roubar credenciais de login ou para obter a permissão involuntária do usuário para instalar algum malware.
Você poder ler mais sobre Click-jacking e X-Frame-Options na documentação da MDN.
Então como proteger o nossos sites utilizando o cabeçalho HTTP X-Frame-Options? É bem simples! 🤓 Vamos lá! 🚀
1) Como configurar o HTTP X-Frame-Options em páginas HTML:
<meta http-equiv="X-Frame-Options" content="deny" />
2) Como configurar o HTTP X-Frame-Options no NextJs
async headers() {
return [
{
source: "/:path*/",
headers: [
{
Recomendados pelo LinkedIn
key: "x-Frame-Options",
value: "DENY",
},
],
},
];
},
3) Como configurar o HTTP X-Frame-Options no GatsbyJs:
<meta http-equiv="X-Frame-Options" content="deny" />
Bem simples não é mesmo? 🤓
Então se gostou desta dica compartilha aí nas suas redes e comunidade! Se tiver alguma dica ou outras sugestões sobre segurança, deixa aí no comentários. \0/ 😍
Vamos juntos compartilhar conhecimento e tornar a internet um lugar mais seguro e inclusivo de verdade! 🚀❤