Quais são os atributos de integridade e de origem cruzada?


363

Bootstrapcdn alterou recentemente seus links. Agora, fica assim:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
rel="stylesheet" 
integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 
crossorigin="anonymous">

O que os atributos integritye crossoriginsignificam? Como eles afetam o carregamento da folha de estilo?

Respostas:


237

Ambos os atributos foram adicionados ao CDN do Bootstrap para implementar a integridade do sub-recurso .

Subrecurso integridade define um mecanismo pelo qual os agentes poderão verificar que um recurso obtido foi entregue sem inesperado manipulação de Referência

O atributo Integrity é para permitir que o navegador verifique a fonte do arquivo para garantir que o código nunca seja carregado se a fonte tiver sido manipulada.

O atributo crossorigin está presente quando uma solicitação é carregada usando 'CORS', que agora é um requisito de verificação do SRI quando não carregada da 'mesma origem'. Mais informações sobre crossorigin

Mais detalhes sobre a implementação das CDNs do Bootstrap


2
Apenas usada HTML do W3C validador e recebeu esta mensagem ao usar o atributo "integridade":Attribute integrity not allowed on element link at this point.
Tomas Gonzalez

9
@TomasGonzalez Eu acho que você pode seguramente assumir que a ferramenta W3C não foi atualizado para incluir suporte SRI apenas ainda
Josh_at_Savings_Champion

5
FYI: Arquivou um bug com o validador também: github.com/validator/validator/issues/151 #
jonathanKingston

72
Mantenedor do W3C HTML Checker (também conhecido como validador) aqui. Sim, desculpe, o verificador ainda não sabe nada sobre o integrityatributo. Mas adicionarei suporte a ele em breve, conforme solicitado em github.com/validator/validator/issues/151 . Portanto, convém assinar esse problema para receber uma notificação quando ele chegar.
sideshowbarker

7
OnlineWebCheck.com suporta o integrityatributo (eu sou o mantenedor desse verificador).
Albert Wiersch

112

integridade - define o valor do hash de um recurso (como uma soma de verificação) que deve ser correspondido para que o navegador o execute. O hash garante que o arquivo não foi modificado e contém os dados esperados. Dessa forma, o navegador não carregará recursos diferentes (por exemplo, maliciosos). Imagine uma situação em que seus arquivos JavaScript foram invadidos na CDN e não havia como saber disso. O atributo de integridade impede o carregamento de conteúdo que não corresponde.

O SRI inválido será bloqueado (ferramentas do desenvolvedor do Chrome), independentemente da origem. Abaixo do caso NON-CORS quando o atributo de integridade não corresponde:

insira a descrição da imagem aqui

A integridade pode ser calculada usando: https://www.srihash.org/ Ou digitando no console ( link ):

openssl dgst -sha384 -binary FILENAME.js | openssl base64 -A

crossorigin - define as opções usadas quando o recurso é carregado de um servidor em uma origem diferente. (Consulte CORS (compartilhamento de recursos de origem cruzada) aqui: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS ). Ele efetivamente altera as solicitações HTTP enviadas pelo navegador. Se o atributo "crossorigin" for adicionado - ele resultará na adição de origem: par de valores-chave <ORIGIN> na solicitação HTTP, como mostrado abaixo.

insira a descrição da imagem aqui

crossorigin pode ser definido como "anônimo" ou "use-credentials". Ambos resultarão na adição de origem: à solicitação. Porém, este último garantirá que as credenciais sejam verificadas. Nenhum atributo crossorigin na tag resultará no envio de uma solicitação sem o par origem: chave-valor.

Aqui está um caso ao solicitar "credenciais de uso" da CDN:

<script 
        src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
        integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" 
        crossorigin="use-credentials"></script>

Um navegador pode cancelar a solicitação se a origem cruzada estiver configurada incorretamente.

insira a descrição da imagem aqui

Links
- https://www.w3.org/TR/cors/
- https://tools.ietf.org/html/rfc6454
- https://developer.mozilla.org/en-US/docs/Web/HTML / Elemento / link

Blogs
- https://frederik-braun.com/using-subresource-integrity.html
- https://web-security.guru/en/web-security/subresource-integrity


6
Resposta muito útil!
Emiel Koning

4
Obrigado pela sua resposta. Eu amo detalhes técnicos!
Anh Tran

Como podemos saber se a integridade do arquivo ainda não foi manipulada? Algum conselho?
vadi taslim 5/04

@ yon.fun: não sugira edições para adicionar seus próprios links. Somos bastante sensíveis a possíveis spams aqui, mesmo que seu conteúdo seja valioso.
halfer

1

Tecnicamente, o atributo Integrity ajuda com isso - ele permite a verificação adequada da fonte de dados. Ou seja, apenas permite ao navegador verificar os números no arquivo de origem correto com os valores solicitados pelo arquivo de origem localizado no servidor CDN.

Aprofundando um pouco, no caso do valor de hash criptografado estabelecido dessa fonte e sua conformidade verificada com um valor predefinido no navegador - o código é executado e a solicitação do usuário é processada com êxito.

O atributo Crossorigin ajuda os desenvolvedores a otimizar as taxas de desempenho da CDN, ao mesmo tempo, protegendo o código do site contra scripts maliciosos.

Em particular, o Crossorigin baixa o código do programa do site no modo anônimo, sem baixar cookies ou executar o procedimento de autenticação. Dessa forma, evita o vazamento de dados do usuário quando você carrega o site pela primeira vez em um servidor CDN específico, cujos fraudadores de rede podem substituir endereços facilmente.

Fonte: https://yon.fun/what-is-link-integrity-and-crossorigin/

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.