from Hacker News

Show HN: SHA-256 explained step-by-step visually

by manceraio on 2/7/22, 1:31 PM with 137 comments

  • by oconnor663 on 2/7/22, 4:33 PM

    Oh this is great. When we taught SHA-256 last semester, we linked to this YouTube video: https://youtu.be/f9EbD6iY9zI. Next time we do it, we'll probably link to both. Having several different ways to visualize the same thing is very helpful, and I like that this one moves quickly.

    A couple of details missing from this visualization are how you pad a message to be a multiple of the block size, and how you chain blocks together to form a longer message. In the pseudocode at https://en.wikipedia.org/wiki/SHA-2#Pseudocode, that's the "Pre-processing (Padding)" part and the "for each chunk" loop just below it. I get why you'd want to leave those things out, since they're not really the interesting part, and the screen is already pretty packed as it is.

    If anyone's feeling curious about implementing this yourself, take a look at these project notes: https://github.com/oconnor663/applied_crypto_2021_fall/tree/.... At some point I'll clean that up for public consumption, but for now just ignore the parts about grades and cheating :)

  • by picture on 2/7/22, 4:33 PM

    So, how do people come up with these things? I assume every aspect of the design is carefully considered to defend it against various attacks. For example, why "right rotate 7 XOR right rotate 18 XOR right shift 3" and not "right rotate 2 XOR right rotate 3 XOR right shift 4"?

  • by taviso on 2/7/22, 3:26 PM

    That's really cool. I made a terrible one for SHA1 years ago, yours is 1000x better.

    https://lock.cmpxchg8b.com/sha1/visualize.html

    I read a paper at the time where someone described a tool they made to find a near-collision, they explained they were just flipping bits and visually observing the affects. That sounded kinda fun, but they didn't release it, so I tried to replicate it from their description!

  • by mabbo on 2/7/22, 2:38 PM

    Before watching this: "Why can't cryptographers just figure out some tricks to crack these hash algorithms?"

    After watching this: "How can any cryptographer EVER figured out any trick to crack these hash algorithms?!"

  • by userbinator on 2/7/22, 2:38 PM

    This reminds me that I've always wanted to make a huge interactive combinatorial circuit that computes SHA-256 and shows all its internal state, then put it on a site with the claim that anyone who can make its output match a certain clearly-constructed value (e.g. 0123456...ABCD...) will win a prize. No mentions of hash algorithms or other such phrasing to deter anyone. I wonder how many people would try such a "logic puzzle", how much time they'd spend on it, and if we might even get the first successful preimage attack from that.

  • by nayuki on 2/7/22, 3:08 PM

  • by y42 on 2/7/22, 6:09 PM

    There also exists a written description showing the process in Python, step by step, which I consider more helpful, because you do not need to stop and play the video.

    https://nickyreinert.medium.com/wie-funktioniert-der-sha256-...

  • by p1mrx on 2/7/22, 4:27 PM

    Can it be proven whether values of m exist such that SHA256(m) == 0?

    If I were omnipotent and wanted people to believe in me, I would write a book that hashes to 0, so that anyone could verify its authenticity.

  • by ypcx on 2/7/22, 4:27 PM

    Similar project which visualizes SHA-256 into terminal: https://github.com/in3rsha/sha256-animation

  • by spdebbarma on 2/7/22, 5:51 PM

    This comes to my attention at a really convenient time. As a teenager, I initially got interested in Computer Science due to cryptography. Over a decade later, I've gotten into the subject for the first time since then.

    For the last few days, I've been writing my own encryption for fun even though it's 100% not secure enough or powerful. My belief is that even though it's not super useful, the experience of attempting to write one is teaching me a lot more than I would have by simply studying it.

  • by brk on 2/7/22, 3:14 PM

    How long before we see this website as the source for some "hacker sequence" in a movie where a person wearing a black hoodie states they are "... working on cracking their SHA-256 encryption, should only take a sec."

  • by DJPocari on 2/7/22, 2:55 PM

    This is fantastic. I once implemented SHA-256 in Google Sheets to visualize it, but it had horrible performance compared to this. This is the best visualization I've seen yet.

  • by westurner on 2/7/22, 3:05 PM

    SHA2: https://en.wikipedia.org/wiki/SHA-2

    https://rosettacode.org/wiki/SHA-256

    Hashcat's GPU-optimized OpenCL implementation: https://github.com/hashcat/hashcat/blob/master/OpenCL/inc_ha...

    Bitcoin's CPU-optimized sha256.cpp, sha256_avx2.cpp, sha256_sse4.cpp, sha256_sse41.cpp: https://github.com/bitcoin/bitcoin/blob/master/src/crypto/sh...

    https://github.com/topics/sha256 https://github.com/topics/sha-256

    Cryptographic_hash_function#Cryptographic_hash_algorithms: https://en.wikipedia.org/wiki/Cryptographic_hash_function#Cr...

    Merkle–Damgård construction: https://en.m.wikipedia.org/wiki/Merkle%E2%80%93Damg%C3%A5rd_...

    (... https://rosettacode.org/wiki/SHA-256_Merkle_tree ... Merkleized IAVL+ tree that is balanced with rotations in order to optimize lookup,: https://github.com/cosmos/iavl

    Self-balancing binary search tree: https://en.wikipedia.org/wiki/Self-balancing_binary_search_t... )

  • by daenz on 2/7/22, 4:22 PM

    You should be very satisfied with how well you conveyed the algorithm. Well done. What was your approach to arriving at this result?

  • by chris_l on 2/7/22, 3:35 PM

    Someone should make a collection of the various visualization web projects that crop up here from time to time.

  • by jonathanyc on 2/7/22, 5:15 PM

    I love single-purpose websites like this that put a potentially complex implementation behind an elegantly simple interface. This website’s design and styling are pretty too :) Another useful one is https://www.h-schmidt.net/FloatConverter/IEEE754.html . I’d say even https://godbolt.org/ counts!

  • by bmitc on 2/7/22, 8:20 PM

    Does anyone have any good references, preferably a book but a good detailed website is fine, on cryptography, hashing, public/private keys, tokens, encryption, etc. as it relates to a software engineer? I don't necessarily want to know all the nitty gritty details of how these things are implemented. Rather, I think I would prefer simply understanding them and how to use them, piece them together, etc. to build something out of them.

    I just have very little knowledge in this area. I'm going through a how to build a blockchain book right now, and I find myself struggling a little bit where I'm just calling some library functions but not necessarily knowing how to compose things properly.

  • by anonymousDan on 2/8/22, 7:00 AM

    I have an odd request regarding e.g. SHA-3. Can anyone tell me if it is implemented in a way that is in a sense 'one-pass' over its input, i.e. each byte of its input in memory is accessed only once, after which all of the algorithm state is held in registers and the original input is never accessed again? My scenario is one where I'm concerned about TOCTOU-like attacks on the memory where the input is stored, but I don't want to pay the overhead of first copying the whole input to a 'safe' memory location, e.g. imagine I have kernel code wanting to compute a hash over data stored in userspace.

  • by a-dub on 2/8/22, 1:44 AM

    this is funny. when i first learned the algorithm, i found some matlab code that computes it with bit vectors. i added support for displaying them as an image and used the movie feature to generate step by step movies to build intuition.

    nice to see someone build something polished that visualizes it in the same way. once you look at the mechanics for each round of the compression function and see the bits get swirled around for yourself, it starts to make intuitive sense.

    the other big intuitions are of course, the trapdoor nature of add mod 2^32 (which is implicit in unsigned integer overflow on many machines) and the fact that some operations (like xor) operate in galois field 2, while others (like addition) operate in galois field 32 and the repeated stacking of the operations in different fields gives the function it's nonlinear trapdoor property.

    i remember reading a pretty good paper on the arx (add, rotate, xor) family of ciphers back in the day (sort of in the vein of, is that all you need?)...

  • by Darkphibre on 2/7/22, 5:24 PM

    Man, this is amazing. I had to hand-unroll bit packing in a binary encoding scheme we used in a game. Rare enough that making a tool wasn't worth it, but damn I love your visualizations! Doing something like that would have helped others understand how I was "seeing the matrix."

  • by recursive on 2/7/22, 9:41 PM

    On the third step(?) of the second step, it says "Copy 2nd chunk into 1st 16 words", but it's accompanied by a visualization of copying the 1st chunk into the 1st 16 words. Am I just totally misunderstanding something?

  • by seumars on 2/7/22, 2:32 PM

    Fantastic presentation! The utility functions from the source code are just as useful.

  • by ansible on 2/7/22, 11:14 PM

    Is there a library or application that can take an annotated algorithm, and then generate a website like this one? That would be great for beginning CS and the sorting algorithms and other basic data structures too.

  • by abrookewood on 2/8/22, 1:58 AM

    Looks fantastic, but the only thing missing is why each step is done.

  • by fthtls on 2/8/22, 9:48 AM

    great visualization. i've also checked the source code and utility functions. they are very well defined and useful too.

    i've coded a sha256 decrypter recently which uses dictionary attack and brute force. I read lots of articles about sha256 while coding this tool. there were still some missing parts on my mind, but your project clarified all.

    btw, the decrypter i coded -> https://10015.io/tools/sha256-encrypt-decrypt

  • by based2 on 2/7/22, 7:53 PM

  • by anandsuresh on 2/8/22, 1:49 AM

    Pretty cool. Have been looking for something like this for a while. Thanks for building it.

    Just sent you a PR for some typos I found while running through an example.

  • by M4tze on 2/7/22, 2:50 PM

    Great visualization. Might become my new screensaver.

  • by stevofolife on 2/7/22, 5:43 PM

    Well made! Can you share how you made the website?

  • by sylware on 2/7/22, 8:56 PM

    Can we have a video of this on youtube/dailymotion/vimeo/etc which we can download with yt-dlp?

  • by reincarnate0x14 on 2/7/22, 4:33 PM

    That's super cool. Visualized or illustrated algorithms have always looked so magical, to me at least.

  • by nwatab on 2/7/22, 1:47 PM

    Looks bautiful. I understand it is really complicated (even I know calculation of SHA256)

  • by dicroce on 2/8/22, 2:19 PM

    Please do this for b+trees. :)

  • by hombre_fatal on 2/7/22, 7:30 PM

    Beautiful color palette.

  • by berta on 2/7/22, 5:11 PM

    This is awesome!

  • by iqanq on 2/7/22, 3:41 PM

    Two of the buttons at the top have no "title" attribute and therefore no tooltip.

  • by jerpint on 2/7/22, 3:42 PM

    Very satisfying!