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

1241 点作者 manceraio超过 3 年前

37 条评论

oconnor663超过 3 年前

Oh this is great. When we taught SHA-256 last semester, we linked to this YouTube video: <a href="https://youtu.be/f9EbD6iY9zI" rel="nofollow">https://youtu.be/f9EbD6iY9zI</a>. 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 <a href="https://en.wikipedia.org/wiki/SHA-2#Pseudocode" rel="nofollow">https://en.wikipedia.org/wiki/SHA-2#Pseudocode</a>, 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: <a href="https://github.com/oconnor663/applied_crypto_2021_fall/tree/main/sha256" rel="nofollow">https://github.com/oconnor663/applied_crypto_2021_fall/tree/...</a>. At some point I'll clean that up for public consumption, but for now just ignore the parts about grades and cheating :)

评论 #30247472 未加载

评论 #30253054 未加载

评论 #30256315 未加载

评论 #30257248 未加载

picture超过 3 年前

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"?

评论 #30249079 未加载

评论 #30250275 未加载

评论 #30247463 未加载

评论 #30249188 未加载

评论 #30248439 未加载

评论 #30248882 未加载

评论 #30249064 未加载

taviso超过 3 年前

That's really cool. I made a terrible one for SHA1 years ago, yours is 1000x better.<a href="https://lock.cmpxchg8b.com/sha1/visualize.html" rel="nofollow">https://lock.cmpxchg8b.com/sha1/visualize.html</a>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!

评论 #30252920 未加载

mabbo超过 3 年前

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?!"

评论 #30245561 未加载

评论 #30245934 未加载

userbinator超过 3 年前

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.

评论 #30248542 未加载

评论 #30245580 未加载

nayuki超过 3 年前

My way of explaining step by step visually is by implementing in Excel: AES <a href="https://www.nayuki.io/page/aes-cipher-internals-in-excel" rel="nofollow">https://www.nayuki.io/page/aes-cipher-internals-in-excel</a> ; DES <a href="https://www.nayuki.io/page/des-cipher-internals-in-excel" rel="nofollow">https://www.nayuki.io/page/des-cipher-internals-in-excel</a> .Also relevant: <a href="https://www.righto.com/2014/09/mining-bitcoin-with-pencil-and-paper.html" rel="nofollow">https://www.righto.com/2014/09/mining-bitcoin-with-pencil-an...</a>

y42超过 3 年前

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.<a href="https://nickyreinert.medium.com/wie-funktioniert-der-sha256-algorithmus-im-detail-teil-1-2-7a0023cf562a" rel="nofollow">https://nickyreinert.medium.com/wie-funktioniert-der-sha256-...</a>

评论 #30249110 未加载

p1mrx超过 3 年前

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.

评论 #30254292 未加载

评论 #30250188 未加载

评论 #30248684 未加载

评论 #30247025 未加载

ypcx超过 3 年前

Similar project which visualizes SHA-256 into terminal: <a href="https://github.com/in3rsha/sha256-animation" rel="nofollow">https://github.com/in3rsha/sha256-animation</a>

spdebbarma超过 3 年前

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.

评论 #30248674 未加载

brk超过 3 年前

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."

评论 #30246535 未加载

评论 #30246898 未加载

DJPocari超过 3 年前

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.

westurner超过 3 年前

SHA2: <a href="https://en.wikipedia.org/wiki/SHA-2" rel="nofollow">https://en.wikipedia.org/wiki/SHA-2</a><a href="https://rosettacode.org/wiki/SHA-256" rel="nofollow">https://rosettacode.org/wiki/SHA-256</a>Hashcat's GPU-optimized OpenCL implementation: <a href="https://github.com/hashcat/hashcat/blob/master/OpenCL/inc_hash_sha256.cl" rel="nofollow">https://github.com/hashcat/hashcat/blob/master/OpenCL/inc_ha...</a>Bitcoin's CPU-optimized sha256.cpp, sha256_avx2.cpp, sha256_sse4.cpp, sha256_sse41.cpp: <a href="https://github.com/bitcoin/bitcoin/blob/master/src/crypto/sha256_sse41.cpp" rel="nofollow">https://github.com/bitcoin/bitcoin/blob/master/src/crypto/sh...</a><a href="https://github.com/topics/sha256" rel="nofollow">https://github.com/topics/sha256</a> <a href="https://github.com/topics/sha-256" rel="nofollow">https://github.com/topics/sha-256</a>Cryptographic_hash_function#Cryptographic_hash_algorithms: <a href="https://en.wikipedia.org/wiki/Cryptographic_hash_function#Cryptographic_hash_algorithms" rel="nofollow">https://en.wikipedia.org/wiki/Cryptographic_hash_function#Cr...</a>Merkle–Damgård construction: <a href="https://en.m.wikipedia.org/wiki/Merkle%E2%80%93Damg%C3%A5rd_construction" rel="nofollow">https://en.m.wikipedia.org/wiki/Merkle%E2%80%93Damg%C3%A5rd_...</a>(... <a href="https://rosettacode.org/wiki/SHA-256_Merkle_tree" rel="nofollow">https://rosettacode.org/wiki/SHA-256_Merkle_tree</a> ... Merkleized IAVL+ tree that is balanced with rotations in order to optimize lookup,: <a href="https://github.com/cosmos/iavl" rel="nofollow">https://github.com/cosmos/iavl</a>Self-balancing binary search tree: <a href="https://en.wikipedia.org/wiki/Self-balancing_binary_search_tree" rel="nofollow">https://en.wikipedia.org/wiki/Self-balancing_binary_search_t...</a> )

daenz超过 3 年前

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

评论 #30247591 未加载

chris_l超过 3 年前

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

jonathanyc超过 3 年前

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 <a href="https://www.h-schmidt.net/FloatConverter/IEEE754.html" rel="nofollow">https://www.h-schmidt.net/FloatConverter/IEEE754.html</a> . I’d say even <a href="https://godbolt.org/" rel="nofollow">https://godbolt.org/</a> counts!

bmitc超过 3 年前

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.

评论 #30250482 未加载

评论 #30254335 未加载

评论 #30250535 未加载

anonymousDan超过 3 年前

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.

评论 #30255768 未加载

a-dub超过 3 年前

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?)...

Darkphibre超过 3 年前

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."

recursive超过 3 年前

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?

seumars超过 3 年前

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

ansible超过 3 年前

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.

abrookewood超过 3 年前

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

fthtls超过 3 年前

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 -> <a href="https://10015.io/tools/sha256-encrypt-decrypt" rel="nofollow">https://10015.io/tools/sha256-encrypt-decrypt</a>

based2超过 3 年前

<a href="https://en.wikipedia.org/wiki/Secure_Hash_Algorithms" rel="nofollow">https://en.wikipedia.org/wiki/Secure_Hash_Algorithms</a>

anandsuresh超过 3 年前

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.

M4tze超过 3 年前

Great visualization. Might become my new screensaver.

评论 #30245642 未加载

stevofolife超过 3 年前

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

sylware超过 3 年前

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

评论 #30275497 未加载

reincarnate0x14超过 3 年前

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

nwatab超过 3 年前

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

dicroce超过 3 年前

Please do this for b+trees. :)

hombre_fatal超过 3 年前

Beautiful color palette.

berta超过 3 年前

This is awesome!

iqanq超过 3 年前

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

jerpint超过 3 年前

Very satisfying!