Image Scrambling Tool

[Spots]

All right, folks, it has been a while since I've posted here, but I finally have a published project to show off. It's an image scrambling tool, which can be found here: https://spotsboi.github.io/imagescrambler/ The source code is also available under the Zlib license and is linked on the site, so you can check out how it works or use parts of it in your own sites if you want. In addition to having an interface for scrambling and unscrambling images, the site also has a feature for creating direct links that can automatically unscramble and display an image in the center of the screen like any normal image. Here's an example of that in action: https://spotsboi.github.io/imagescrambler/link/#/Hau3RiZza8T+jsaGVuaWDTZ5rI6YXSHNLY7wTRE828=01https://i.imgur.com/Z6tsnUe.png

This is sort of a follow up to my previous post about thwarting web scraping, specifically in regards to protecting images. In that post, I suggested using an XOR cipher to encrypt images, which was a rather naive and not-so-ideal solution. I've done a lot of thinking and reading up on encryption since then and I've made a tool that randomly scrambles images without changing the values of the pixels. It essentially works by using the AES encryption algorithm to generate a block of random numbers which are then used to randomly swap pixels or square chunks of an image. The random number generation is seeded by hashing a password and using it as the key to the AES algorithm.

This approach avoids one of the biggest limitations of the old XOR cipher approach, which is that using lossy compression on the image would throw off the colors enough to severely reduce the quality of the decrypted image. So, the technique wasn't suitable for uploading to social media platforms like Twitter/X that automatically compress images. With this new scrambling method, images can be compressed very signiciantly and still end up being recognizable when unscrambled. The block size used when scrambling has a big impact on how much color information is retained when a compressed image is unscrambled. A scrambled image with a block size of 8 can be compressed as a JPG without losing noticeably more color information than an unscrambled image would. Compressed WebP images will lose color up to a block size of 16, though. When images are scrambled with a low block size, the result looks like static that takes on a sort of average color of the original image. This causes lossy compression algorithms to discard most of the color information apart from that average color, so the unscrambled image will take on a similar color. However, it will still be recognizable since brightness information is mostly retained. Here's an example of what I mean:


The kind of quality that can be expected after scrambling, compressing, and then unscrambling an image depends on what style of image it is and how heavily it gets compressed. Of course, saving the scrambled image as a PNG or some other lossless format completely avoids this problem, although the file size may be signiciantly increased due to the randomness of scrambled images.

The security of the scrambled images isn't exactly bulletproof, but I think this tool could certainly be useful for preventing scraping or thwarting any system that tries to identify the visual content of an image. If a very strong password is used when scrambling the image, then I think it would be infeasible to unscramble it by brute force or idenitfy it without having a copy of the original image. However, there are a few specific security pitfalls that I'm aware of which are explained in more detail on the website.

Anyway, please let me know your thoughts on all this. Any questions, comments, and critiques are welcome and I particularly want to know if the site's interface and instructions are clear enough. Hopefully some of y'all can find a use for this or at least have some fun exchanging scrambled images with your friends. I will be polishing the website a bit more over time and adding additional information on the GitHub repository.

[ThunderPerfectWitchcraft]

This is damn cool  .
Congratulations! The main problem is that you would need some way to communicate the decryption routine to potential users without scaring them off :3.


Its not directly related, but remembered me of it: Do you know the concept of Steganography?
https://en.wikipedia.org/wiki/Steganography

[Spots]

This is damn cool  .
Congratulations! The main problem is that you would need some way to communicate the decryption routine to potential users without scaring them off :3.


Its not directly related, but remembered me of it: Do you know the concept of Steganography?
https://en.wikipedia.org/wiki/Steganography

Thanks! I put all of the code specific to scrambling and unscrambling images and drawing the result to a canvas in a separate JavaScript file, so it's something that could be integrated into a personal site without being too obvious. But yeah, I think the biggest problem right now is just that this whole thing may be a little impractical in regards to giving out passwords and making people go through the hassle of unscrambling images. The direct link feature somewhat addresses that, but the links do look a little crazy.

As far as steganography goes, I actually made my own steganography tool a while back that can encrypt and hide files in images or WAV audio. But, it's not a web app and I haven't published it anywhere because I think I need to reevaluate my technique. I did it in a pretty simple way where it just discards the lowest bits of the information and replaces them with the encrypted data and I think it would be too easy to detect that the files have been tampered with. I think steganography is super cool and I've been thinking a lot about possible ways of hiding data. I'll definitely be doing more research and experimentation with it into the future.

[ThunderPerfectWitchcraft]

Just fully realized the implications of the Web-Descrampling: Crawlers and AI-Trainers will autofetch it, as the crawlers most certainly follow direct links and save the resulting image; by giving them the key (in form of the link) you render your defense-mechanism useless.

[Spots]

Just fully realized the implications of the Web-Descrampling: Crawlers and AI-Trainers will autofetch it, as the crawlers most certainly follow direct links and save the resulting image; by giving them the key (in form of the link) you render your defense-mechanism useless.

I think a bot would only be able to scrape those URLs if it was specifically designed to do so. The way it works is that the site fetches the scrambled image, unscrambles it on the client side, and renders it to a canvas element. So, the unscrambled image only ever exists on the client side and isn't hosted anywhere. The main point is to thwart bots that just vacuum up tons of content from everywhere on the Internet. Ultimately, I don't think it's possible to post something publicly and entirely prevent someone from manually scraping it or doing some other kind of targeted attack. I've done a lot of thinking about if there's any way to outright prevent scraping, but I run into dead ends everywhere I go. Aside from encrypting content and only sharing it privately with a few trusted people, I think the best thing we can hope for is just to make it as much of a hassle as possible. It's a lot more efficient for a bot to just bulk download tons and tons of images from some server than it is to scour the text content of websites for specific links.