무결성과 crossorigin 속성은 무엇입니까?

362

Bootstrapcdn은 최근에 링크를 변경했습니다. 이제 다음과 같이 보입니다 :

<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">

무엇을 integrity하고 crossorigin평균 속성? 스타일 시트의로드에 어떤 영향을 줍니까?

— 새로운 사용자
소스

답변:

237

Subssource Integrity 를 구현하기 위해 두 속성이 모두 Bootstrap CDN에 추가되었습니다 .

하위 리소스 무결성 사용자 에이전트는 리소스 반입 예기치 조작없이 전송되었는지 확인할 수있는 메커니즘을 정의 참조

무결성 속성 은 소스가 조작 된 경우 브라우저가 파일 소스를 검사하여 코드가로드되지 않도록하는 것입니다.

Crossorigin 속성 은 요청이 'CORS'를 사용하여로드 될 때 존재하며, 이제 '동일 출처'에서로드되지 않은 경우 SRI 확인이 필요합니다. crossorigin에 대한 추가 정보

Bootstrap CDN 구현에 대한 자세한 내용

— jim.taylor.1974
소스

w3c html validator를 사용하고 "integrity"속성을 사용할 때이 메시지가 나타납니다.Attribute integrity not allowed on element link at this point.

— Tomas Gonzalez

@TomasGonzalez w3c 도구가 아직 SRI 지원을 포함하도록 업데이트되지 않았다고 가정 할 수 있습니다.

— Josh_at_Savings_Champion

참고 : 너무 발리 버그를 출원 : github.com/validator/validator/issues/151

— jonathanKingston에게

W3C HTML Checker (일명 유효성 검사기)의 관리자입니다. 예, 죄송합니다. 검사기는 integrity속성 에 대해 아직 아무것도 모릅니다 . 그러나 github.com/validator/validator/issues/151 에서 요청 한대로 곧 지원을 추가 할 예정 입니다. 따라서 문제가 발생했을 때 알림을 받으려면 해당 문제를 구독하고 싶을 수 있습니다.

— sideshowbarker

OnlineWebCheck.com 은 integrity속성을 지원 합니다 (저는 해당 체커의 관리자입니다).

— Albert Wiersch

112

무결성 -브라우저가 실행하도록 일치시켜야하는 체크섬과 같은 리소스의 해시 값을 정의합니다. 해시는 파일이 수정되지 않았으며 예상 데이터를 포함하는지 확인합니다. 이런 방식으로 브라우저는 다른 리소스 (예 : 악성)를로드하지 않습니다. 자바 스크립트 파일이 CDN에서 해킹되어이를 알 방법이없는 상황을 상상해보십시오. 무결성 속성은 일치하지 않는 내용을로드하지 못하게합니다.

교차 출처에 관계없이 잘못된 SRI가 차단됩니다 (Chrome 개발자 도구). 무결성 속성이 일치하지 않는 NON-CORS의 경우 :

무결성 은 https://www.srihash.org/를 사용하여 계산 하거나 콘솔에 입력 ( link ) 할 수 있습니다 .

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

crossorigin- 자원이 다른 출처의 서버에서로드 될 때 사용되는 옵션을 정의합니다. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS 에서 CORS (Cross-Origin Resource Sharing)를 참조하십시오 . 브라우저가 보낸 HTTP 요청을 효과적으로 변경합니다. “crossorigin”속성이 추가되면 아래와 같이 origin : <ORIGIN> 키-값 쌍이 HTTP 요청 에 추가 됩니다.

crossorigin 은“익명”또는“사용 자격 증명”으로 설정할 수 있습니다. 둘 다 원점을 요청 에 추가 합니다. 그러나 후자는 자격 증명을 확인합니다. 태그에 crossorigin 속성이 없으면 origin : key-value pair없이 요청을 보냅니다.

다음은 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>

crossorigin이 잘못 설정된 경우 브라우저가 요청을 취소 할 수 있습니다.

링크-https
: //www.w3.org/TR/cors/-https
: //tools.ietf.org/html/rfc6454-https
: //developer.mozilla.org/en-US/docs/Web/HTML / 요소 / 링크

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

— 비 톨드 카추 르바
소스

매우 유용한 답변입니다!

— Emiel Koning

답변 주셔서 감사합니다. 나는 기술적 인 세부 사항을 좋아한다!

— Anh Tran

파일의 무결성이 아직 조작되지 않은 파일인지 어떻게 알 수 있습니까? 어떤 충고?

— vadi taslim

@ yon.fun : 자신의 링크를 추가하기위한 편집을 제안하지 마십시오. 귀하의 콘텐츠가 가치가 있더라도 스팸 가능성에 매우 민감합니다.

— halfer

기술적으로 Integrity 속성 은 데이터 소스를 올바르게 확인할 수 있도록 도와줍니다. 즉, 브라우저가 CDN 서버에있는 소스 파일이 요청한 양으로 올바른 소스 파일의 숫자를 확인할 수 있습니다.

이 소스의 암호화 된 해시 값이 설정되고 브라우저에서 미리 정의 된 값을 준수하는지 확인 된 경우 코드가 실행되고 사용자 요청이 성공적으로 처리됩니다.

Crossorigin 속성 은 개발자가 동시에 CDN 성능을 최적화하여 악성 스크립트로부터 웹 사이트 코드를 보호합니다.

특히 Crossorigin은 쿠키를 다운로드하거나 인증 절차를 수행하지 않고 사이트의 프로그램 코드를 익명 모드로 다운로드합니다. 이렇게하면 특정 CDN 서버에 사이트를 처음로드 할 때 네트워크 사기꾼이 주소를 쉽게 바꿀 수있는 사용자 데이터 유출을 방지 할 수 있습니다.

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

— yon.fun
소스