Como usar Subresource Integrity (SRI) para segurança — seu primeiro passo com a GeHost
Olá, querido cliente! 👋 Seja muito bem-vindo ao nosso Guia de Segurança com Carinho da GeHost. Hoje vamos aprender algo super importante, mas que parece complicado: Subresource Integrity (SRI). Não se preocupe — vamos desvendar isso juntos, passo a passo, como se fosse uma conversa entre amigos.
Imagine que você está baixando um pacote de música de um site. E se, sem você saber, alguém tivesse trocado a música por um vírus? 😱
O SRI é como um selo de autenticidade para arquivos que você carrega no seu site — como scripts JavaScript ou folhas de estilo CSS. Ele garante que o arquivo que você está usando é exatamente o mesmo que o original, e não foi alterado por alguém mal-intencionado.
Com a GeHost, você já tem tudo que precisa para usar SRI com segurança. Vamos lá?
Passo 1: Entenda o que é SRI
Quando você inclui um arquivo externo no seu site (por exemplo, uma biblioteca JavaScript do Google ou do CDN), você está confiando nele. Mas e se o arquivo for hackeado?
O SRI evita isso. Ele funciona com um código de verificação (um hash) que você adiciona ao seu código HTML. Se o arquivo for alterado, o hash não bater — e o navegador simplesmente não carrega o arquivo.
Dica do Sensei: SRI é como colocar um cadeado na porta do arquivo. Só abre se o código estiver certo!
Passo 2: Como gerar o hash (o "código de segurança")
Para usar SRI, você precisa de um hash do arquivo. Ele é gerado com base no conteúdo real do arquivo.
Por exemplo, se você quer usar o jQuery do CDN do Google, você pode gerar o hash assim:
- Acesse um site seguro de geração de hash, como srihash.org (não é da GeHost, mas é confiável).
- Cole o conteúdo do arquivo (ou o link dele) no campo.
- Escolha o tipo de hash (geralmente
sha256). - Clique em "Generate" — e pronto! Você terá o código de segurança.
Exemplo de resultado:
sha256-abc123def456ghi789...
Passo 3: Adicione o SRI no seu código HTML
Agora que você tem o hash, é só colocar ele no seu código HTML. Veja como:
Antes (sem segurança):
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Depois (com SRI):
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-2LlMm35p66k8Y97QZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ3TQZ8XvX3dZ5Z1fXk0VZ97RJ