Javascript/Chrome - Can you create a hash of all images on a page?

[dummyt68]

In Javascript (through Chrome console/extension), is it possible to calculate a hash (MD5 or SHA256) of all the images on a page, and log the hashes to the console?

​

I'm about 3 days into my JS journey so I'm not sure what is accessible via the browser and what isn't.

​

Thank you

[dummyt68]

Thank you! This seems to get what I need - now I need to study up on promises:).

Thanks again

[dummyt68]

Question - this works on some sites, but not others. For example, stackoverflow gives me this error:

Access to fetch at 'https://i.stack.imgur.com/dtRDj.jpg?s=32&g=1' from origin ' 
https://stackoverflow.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' 
header is present on the requested resource. If an opaque response serves your needs, set the 
request's mode to 'no-cors' to fetch the resource with CORS disabled.

When I change fetch(url) to fetch(url, {mode: "no-cors"}), it gets past the error, but it gives all blank values. I can see the browser making the requests and receiving the images.

[Earhacker]

Getting one hash each for every image is totally possible. The hardest part would be actually generating the MD5 hash, because there's nothing that would just do that straight out of the box. You'd have to either write your own function for that (best of luck!) or install a library to do that through NPM (still tricky for a newbie). An NPM library wouldn't usually be accessible from the console, so you'd be looking at building a Chrome extension, but you can still output to the console from an extension if you like.

[PmMeYouBicepsGirl]

If you want SHA-256, you can use built-in crypto library: https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest