자바 스크립트를 사용하는 이미지의 하위 리소스 무결성

Question

최근 변경된 JS 및 CSS의 실행을 막는 하위 리소스 무결성에 대해 알게되었습니다. 현재의 구현은 이미지 지원이 부족하기 때문에 내 자신의 구현을 실험 해 보았습니다.

<img data-src="http://localhost:8888/4.jpg" alt="" data-hash="" class="image"> 
<img data-src="http://localhost:8888/2.jpg" alt="" data-hash="" class="image"> 
<img data-src="http://localhost:8888/3.jpg" alt="" data-hash="" class="image"> 


<script src="qwest.js"></script> 
<script src="md5.min.js"></script> 
<script> 

var images = document.getElementsByClassName("image"); 

    for(var i = 0, len = images.length; i < len; i++){ 
     popHash(images[i]); 

    } 

    function popHash(image) { 

     qwest.get(image.dataset.src, {}, {responseType:"blob"}) 
     .then(function (xhr, response) { 
      var src = window.URL.createObjectURL(response); 
      image.src = src; 
      image.dataset.hash = md5(src); 
      console.log(image.dataset.hash); 


      /* code to check the equality of hashes here */ 
     }) 
    } 


</script> 

문제

내가 다른 MD5 해시를 얻고마다입니다. 내가 뭘 잘못하고 있는지 찾아 내도록 도와주세요.

나는 정확한 결과를 얻을 수 있었다 약간의 변경으로 이미지

Answer 1

를 가져 오는에 대한 MD5 해시 및 Qwest.js (https://github.com/pyrsmk/qwest)을 얻기를위한 자바 스크립트 MD5 (https://github.com/blueimp/JavaScript-MD5)를 사용하고 있습니다. 나는 blob과 sha-256 해싱 대신 arrayBuffer를 사용했다. 나는 똑같은 작은 도서관을 만들었다.

https://github.com/ShopupStore/IntegrityChecker