17 ms·

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

• nwatab 5y ago
  Looks bautiful. I understand it is really complicated (even I know calculation of SHA256)
• seumars 5y ago
  Fantastic presentation! The utility functions from the source code are just as useful.
• deleted 5y ago
  [deleted]
• mabbo 5y ago
  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?!"
  • mynameismon 5y ago
    > "How can any cryptographer EVER figured out any trick to crack these hash algorithms?!" More so, "How can any cryptographer EVER figure out any trick to come up with these hash algorithms?!" Seriously, they are incredibly impressive mathematical algorithms. Even coming up with an algorithm that is able to show the avalanche effect is mind boggling. To make sure that the algorithm is not biased to a set of samples AND shows the avalanche effect is tremendously mind blowing.
  • sammyo 5y ago
    They can't. But there are certainly unsavory actors that are able to trick a certain percentage of the unsuspecting to just give them a private key.
    • selestify 5y ago
      They actually can, in some situations: https://security.googleblog.com/2017/02/announcing-first-sha1-collision.html https://security.googleblog.com/2017/02/announcing-first-sha...
• userbinator 5y ago
  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.
  • manceraio 5y ago
    I actually started this because my first idea was: can I implement SHA-256 with just TTL logic gates? which should be possible, but it would take months to do. for puzzles try 12037465 for some coffee :)
  • jjeaff 5y ago
    I think making a problem more accessible like that is the fastest path to a solution. It reminds me of the Stephen J Gould quote: "I am, somehow, less interested in the weight and convolutions of Einstein’s brain than in the near certainty that people of equal talent have lived and died in cotton fields and sweatshops."
• M4tze 5y ago
  Great visualization. Might become my new screensaver.
  • colejohnson66 5y ago
    One could even feed the hash back into itself to get a different result each time
    • em3rgent0rdr 5y ago
      how long would the cycle last before it starts repeating?
      • tromp 5y ago
        On the order of 2^256 steps, if SHA-256 behaves randomly, since the largest cycle in a random permutation on N elements has expected length ~ 0.62 * N.
        • MayeulC 5y ago
          Then wouldn't that be 0.62*2^256, closer to 2^255 ? Not that it makes a notable difference: at 1 fs per step (1000 GHz, or 1 TH/s), that would take about 4.5e65 years to happen. The universe is only about 1e10 years old...
          • tromp 5y ago
            It would be at least that, with a smaller contribution to the expectation from smaller cycles. That's why I said "on the order of", i.e. not much smaller.
        • pbsd 5y ago
          SHA-256 is not a permutation; the expected cycle length is ~2^128. It's how collisions are (generically) found.
          • 5y ago
• DJPocari 5y ago
  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 5y ago
  SHA2: https://en.wikipedia.org/wiki/SHA-2 https://en.wikipedia.org/wiki/SHA-2 https://rosettacode.org/wiki/SHA-256 https://rosettacode.org/wiki/SHA-256 Hashcat's GPU-optimized OpenCL implementation: https://github.com/hashcat/hashcat/blob/master/OpenCL/inc_hash_sha256.cl 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/sha256_sse41.cpp https://github.com/bitcoin/bitcoin/blob/master/src/crypto/sh... https://github.com/topics/sha256 https://github.com/topics/sha256 https://github.com/topics/sha-256 https://github.com/topics/sha-256 Cryptographic_hash_function#Cryptographic_hash_algorithms: https://en.wikipedia.org/wiki/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_construction https://en.m.wikipedia.org/wiki/Merkle%E2%80%93Damg%C3%A5rd_... (... https://rosettacode.org/wiki/SHA-256_Merkle_tree 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 https://github.com/cosmos/iavl Self-balancing binary search tree: https://en.wikipedia.org/wiki/Self-balancing_binary_search_tree https://en.wikipedia.org/wiki/Self-balancing_binary_search_t... )
• nayuki 5y ago
  My way of explaining step by step visually is by implementing in Excel: AES https://www.nayuki.io/page/aes-cipher-internals-in-excel https://www.nayuki.io/page/aes-cipher-internals-in-excel ; DES https://www.nayuki.io/page/des-cipher-internals-in-excel https://www.nayuki.io/page/des-cipher-internals-in-excel . Also relevant: https://www.righto.com/2014/09/mining-bitcoin-with-pencil-and-paper.html https://www.righto.com/2014/09/mining-bitcoin-with-pencil-an...
• brk 5y ago
  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."
  • can16358p 5y ago
    If such a movie even mentions SHA-256 I think that's above average on its own.
    • breakingcups 5y ago
      That depends.. "Just a second, I need to backdoor the SHA256 rootkit to penetrate the directory. Shit, they have an X62 firewall. Luckily I brought my pentester."
      • skilled 5y ago
        "These packets are not going to sniff themselves."
      • can16358p 5y ago
        You're right. Still, mentioning SHA-256 brings better possibility of "someone knowing something", compared to, say, GUI, Visual Basic, and tracing IP addresses.
  • reincarnate0x14 5y ago
    Syntax-highlighted ALGOL-y code blocks seem to be back in style if they're not going with the constant "toss that screen up to a hologram" bit. Sometime there will be a nice interview of such on the design that goes into that, not necessarily for "hacker sequences" but general imaginary computer interfaces like https://www.hudsandguis.com/home/2021/theexpanse https://www.hudsandguis.com/home/2021/theexpanse .
• taviso 5y ago
  That's really cool. I made a terrible one for SHA1 years ago, yours is 1000x better. https://lock.cmpxchg8b.com/sha1/visualize.html 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!
  • dragontamer 5y ago
    Your tool seems to understand the gist of differential cryptography better though. You can track a 1-bit change or 3-bit change to "M" and see how it propagates through the SHA256 rounds in your tool. ---------- So your tool is probably better at understanding the underlying design of SHA2. We know that SHA2 was created well into the era of differential-analysis for example, so the designers would have inevitably done analysis similar to how your tool works.
• chris_l 5y ago
  Someone should make a collection of the various visualization web projects that crop up here from time to time.
• iqanq 5y ago
  Two of the buttons at the top have no "title" attribute and therefore no tooltip.
• jerpint 5y ago
  Very satisfying!
• deleted 5y ago
  [deleted]
• daenz 5y ago
  You should be very satisfied with how well you conveyed the algorithm. Well done. What was your approach to arriving at this result?
  • manceraio 5y ago
    Thanks :) I first implemented sha256 in js to understand its inner workings. Then I started displaying its variables with react and adding this stepped mechanism. Finally, I added some notes on the left to add some context of what is going on.
    • daenz 5y ago
      Very nice. Have you built any other algorithm visualizations? I have a very strong interest in how algorithms are visualized so that they are more easily understood.
      • manceraio 5y ago
        First time doing this type of visualizations. I have this one tailwind.ink which will visualize a color palette on their luminance, chroma and hue values, but it's not really representing the algorithm behind.
• p1mrx 5y ago
  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.
  • picture 5y ago
    You could in theory also get that with a lot of computation of course
    • p1mrx 5y ago
      It should be straightforward to design a hash function that can't be preimage attacked using all the computing power in the universe. Maybe an omnipotent cryptographer would find flaws in SHA-256, but then they could design a better function and include it in the book.
      • kzrdude 5y ago
        Maybe their omnipotence includes being lucky enough
        • p1mrx 5y ago
          Why would an omnipotent being need luck? They have infinite brute force.
  • y42 5y ago
    Sure, that would be a pretty high difficult factor, but its possible.
    • p1mrx 5y ago
      But is it provably possible for SHA-256? An n-bit cryptographic hash function should ideally cover every n-bit output value, given slightly more than n bits of input, but I don't know whether this has been proven for any real-world functions.
• ypcx 5y ago
  Similar project which visualizes SHA-256 into terminal: https://github.com/in3rsha/sha256-animation https://github.com/in3rsha/sha256-animation
• oconnor663 5y ago
  Oh this is great. When we taught SHA-256 last semester, we linked to this YouTube video: https://youtu.be/f9EbD6iY9zI 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 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/main/sha256 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 :)
  • manceraio 5y ago
    Thanks for the feedback and I am glad you'll use it for teaching (which was the main goal of this project)! The padding part it's briefly explained on the "dynamic" notes on the left column, but yes, can be improved. Typing on the input gives you some sense of what is doing on the background, specially if it jumps to two blocks. The "for each chunk" is also implemented (which was one of the most difficult parts to synchronize with the UI), but I agree too, I should come up with some way to represent it better. Thanks again :)
    • fragmede 5y ago
      Minor nit: input could also take hex.
  • miki725 5y ago
    Was about to reply with the link to the project. If anyone is curious about sha2 highly highly recommend to go thorough the project. Jack did an amazing job explaining everything step by step. Writing the code really helps to understand all the concepts much better.
• picture 5y ago
  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"?
  • metalrain 5y ago
    Visualized like this it feels like security through obscurity, but there must be reason for this. I did wonder why initialization is like: 1. Initialize hash value h0 to h7: first 32 bits of the fractional parts of the square roots of the first 8 primes 2..19). 2. Initialize array of K constants: first 32 bits of the fractional parts of the cube roots of the first 64 primes 2..311
    • manceraio 5y ago
      https://news.ycombinator.com/item?id=23166713 https://news.ycombinator.com/item?id=23166713 It seems like a "nothing up my sleeve" way to initialize the variables.
    • deleted 5y ago
      [deleted]
    • bsedlm 5y ago
      from what I've seen, there's a lot of "obscurity" to this; there are many seemingly arbitrary choices all over the place. In the end most encryption algorithms boil down to doing 'random' (arbitrary, hard to justify why) things to data and then undoing them exactly in order to decrypt. the math is all incredibly abstract but not all that complex, the high level of abstraction does make it quite difficult to grasp. What's worse is that I fear there are incentives (mostly political/security interests) to keep the field small and to keep many people far away from this very practical use for all these beautiful, elegant, simple (but extremely abstract) mathematics (refering to the entire cryptography field).
      • aaronmdjones 5y ago
• reincarnate0x14 5y ago
  That's super cool. Visualized or illustrated algorithms have always looked so magical, to me at least.
• berta 5y ago
  This is awesome!
• jonathanyc 5y ago
  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 https://www.h-schmidt.net/FloatConverter/IEEE754.html . I’d say even https://godbolt.org/ https://godbolt.org/ counts!
• Darkphibre 5y ago
  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."
• stevofolife 5y ago
  Well made! Can you share how you made the website?
• spdebbarma 5y ago
  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.
  • zahllos 5y ago
    Rather than write crypto, what I'd actually recommend is to break it. Schneier put together a block cipher cryptanalysis course a long time ago and while I don't usually recommend his crypto books these days, the course is good: https://www.schneier.com/academic/archives/2000/01/self-study_course_in.html https://www.schneier.com/academic/archives/2000/01/self-stud... (in this case, his crypto book might actually be useful, because it documents some of these out of date ciphers. There's (was?) a mistake in the DES code though iirc). It is essentially a tour of all the early cryptanalysis literature, complete with suggestions of ciphers to target (e.g. FEAL). This will give you a sense of how the attacks work. Many of the ciphers are old, but I wouldn't let that put you off. The study technique for this would be a) implement each cipher with toggles to control rounds and any other features, then implement attacks. Most of the papers should be open access by now since the 'course' was written in the year 2000. You could also 'catch up' on the constructions and attacks that have come out since. I would caveat this with: what I am advising is purely for potential interest. Bear in mind there is little need to implement new block ciphers these days (what I'm saying is: this is a very specialized skill and most people won't find jobs in it).
• y42 5y ago
  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-algorithmus-im-detail-teil-1-2-7a0023cf562a https://nickyreinert.medium.com/wie-funktioniert-der-sha256-...
  • edwnj 5y ago
    not everybody speaks barbarian sir
    • y42 5y ago
      Python that bad?
      • lelandbatey 5y ago
        I think it's a reference to the written human language of the blog post, which when I attempt to view, is in German. I realize both of the parent comments could be read in jest; I'm mentioning this here very clearly since tone and implication sometimes may not translate, and passing readers may stumble on the context(s) here.
      • edwnj 5y ago
        hahahaha lol
• hombre_fatal 5y ago
  Beautiful color palette.
• based2 5y ago
  https://en.wikipedia.org/wiki/Secure_Hash_Algorithms https://en.wikipedia.org/wiki/Secure_Hash_Algorithms
• bmitc 5y ago
  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.
  • manceraio 5y ago
    For that I like this one: https://cryptobook.nakov.com/ https://cryptobook.nakov.com/
    • bmitc 5y ago
      Thanks!
  • tptacek 5y ago
    JP Aumasson is one of the authors of the BLAKE hashes and wrote "Serious Cryptography": https://www.amazon.com/Serious-Cryptography-Practical-Introduction-Encryption/dp/1593278268 https://www.amazon.com/Serious-Cryptography-Practical-Introd...
    • bmitc 5y ago
      Thanks!
  • lanecwagner 5y ago
    I wrote this one: https://app.qvault.io/course/6321ddbf-49eb-4748-9737-6bc12e8bb705/4907b729-6a49-409c-a634-d64d357f9a8b/5c7bdecf-b3be-4947-aea6-749e2d1d96b4 https://app.qvault.io/course/6321ddbf-49eb-4748-9737-6bc12e8... it's a crypto course where you write the solutions in Go. you might enjoy it :)
• sylware 5y ago
  Can we have a video of this on youtube/dailymotion/vimeo/etc which we can download with yt-dlp?
  • haunter 5y ago
    You can screen record the full screen browser window with OBS (with the mouse disabled too)
• recursive 5y ago
  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?
• ansible 5y ago
  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.
• a-dub 5y ago
  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?)...
• anandsuresh 5y ago
  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.
• abrookewood 5y ago
  Looks fantastic, but the only thing missing is why each step is done.
• deleted 5y ago
  [deleted]
• anonymousDan 5y ago
  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.
  • oib 5y ago
    Yes, sha3 reads every input byte only once. It does hold a pretty large internal state that doesn't fit in only registers.
• fthtls 5y ago
  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 https://10015.io/tools/sha256-encrypt-decrypt
• dicroce 5y ago
  Please do this for b+trees. :)