I’m manipulating an image in the html5 canvas. The source-image is stored in a database as a base64. Is it possible to ensure this source-image remains hidden and secret for people visiting the website?
Right now I do a mysql query and pass the base64 string from php to the javascript. That’s why it’s easy to figure out the source-base64 string.
Maybe I need to do this otherwise. I hope you can give me some suggestions!
Short answer: Not as long as you do the image processing on the users machine.
Long answer: Javascript is executed on the users machine. Almost all web browsers got debugging tool which allow the user to monitor what your javascript application is doing. You could encrypt your image data, but in order to process it, you will have to decrypt it sooner or later. Any user who knows a bit Javascript will be able to extract your image data at that moment.
You could make it harder through running your js code through an obfuscator. But that’s not a reliable protection either. As long as it’s machine-readable, it’s human-readable. Someone who is determined enough will also dig through obfuscated code.
When you want the source image to stay secret, you have to do all image processing on the server, and send the processed image to the user.