我最近了解了Sub Resource Integrity,它阻止了改进的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哈希值。请帮我找一下我做错了什么。
我使用JavaScript-MD5(https://github.com/blueimp/JavaScript-MD5)来获取MD5哈希值和Qwest.js(https://github.com/pyrsmk/qwest)来获取图像
答案 0 :(得分:1)
通过轻微的改变,我能够得到正确的结果。我使用arrayBuffer而不是blob和sha-256哈希。我为此制作了一个小型图书馆。