使用 javascript 的图像的子资源完整性

Posted 2023-03-03

【中文标题】使用 javascript 的图像的子资源完整性

【英文标题】：Sub Resource Integrity for images using javascript

【发布时间】：2017-10-18 07:21:13

【问题描述】：

我最近了解了子资源完整性，它可以防止执行更改的 JS 和 CSS。由于当前的实现缺乏对图像的支持，我尝试尝试自己的实现。

<img data-src="http://localhost:8888/4.jpg"  data-hash="" class="image">
<img data-src="http://localhost:8888/2.jpg"  data-hash="" class="image">
<img data-src="http://localhost:8888/3.jpg"  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 哈希值。请帮我找出我做错了什么。

我正在使用 javascript-MD5 (https://github.com/blueimp/JavaScript-MD5) 获取 MD5 哈希，并使用 Qwest.js (https://github.com/pyrsmk/qwest) 获取图像

【参考方案1】：

通过轻微的更改，我能够得到正确的结果。我使用 arrayBuffer 而不是 blob 和 sha-256 散列。我为此制作了一个小型图书馆。

https://github.com/ShopupStore/IntegrityChecker