Protect content in Javascript

Question

I'd like to port one of my games to WebGL, but it uses sounds and images I licensed from third parties. It would go against the license to have it just pull the unprotected files straight from the web server.

Before, I got around this by embedding a bunch of these files in my own file format, but I'm not sure if I can just read in X amount of bytes from a file and then pass it to Javascript and say "hey, this is a png image." Is that possible? Are there any other good ways to protect files?

Answer 1

If the stuff has to end up in a user's browser, then, well, there it is in the user's browser. You can't protect it other than by obfuscation, which is a complete waste of time if the stuff you're protecting has actual value. (Think of it this way: if it's really valuable stuff — meaning that you'd suffer some considerable loss if somebody got it illicitly, and that the thief would reap considerable gains — then the minor effort necessary to overcome obfuscation is obviously worthwhile to the thief.)

Answer 2

If you want to protect content in your JS file you will need to create a JS durable object, by defining an object that is the result of a function call.

something like this...

var imageContainer = function(protectedImageContainer) {
        var that = {};
        that.getImage = function () { 
              // bytes -> image transform would happen here.
              return protectedImageContainer.data; 
        };
        return that;
};

In this example, protectedImageContainer.data is protected and tamper-proof, only accessible through your getImage method.

This along with blocking a right-click "Save as..." should get you closer to where you want to be.