I know this may be an odd question, but I’m building a site for HTML5 games. The files for these games will be hosted on Netlify (as Wix doesn’t allow for the necessary file hosting).
I’d like to place these games on separate pages, each behind it’s own subscription. But how do I protect my HTML5 game? Anyone can buy a subscription, inspect the embed and find the Netlify URL and then embed the game on their own sites.
I thought, maybe I could perform some kind of check on Netlify, in the game’s index file, to ensure the request is coming from my site and not from another, but I’m not exactly sure how to do this or how a request from my site would look to Netflify. So, I don’t know what to check for.
Other than that, does anyone have any ideas?
Here is an example:
I built this app using Gamemaker Studio 2. If you inspect the embed (iframe) provided in the link below, you’ll see the Netflify URL. Just pop the URL into your browser, and BOOM! You have my app and can embed it anywhere.
You can’t prevent front-end element inspection.
If you wish to prevent theft, you’ll have to use some backend components that are crucial for the game functionality.
J.D., what do you think about simply burying the URL as an item in a dataset? Or, getting the URL from a dataset but as three or four separate variables that I would then combine to form the URL string for the iframe?
I’m going to test this today and see how Chrome inspection interprets the page once loaded. I’m curious if the browser will still see the iframe’s URL once the page is up.
Anyone know the answer to this before I get started today?
On a related note, I’m going to use a random string of numbers instead of a conventional URL, something in the 256-bit range (ex: “flipping-frogs_netflify.com” changed to "1157DA2089A3731619542687907C853269 98466F…). If all works as hoped, using the dataset, plus the multi-variable method for the URL string, combined with the random string of numbers as the Netlify URL may do it.
If this won’t work for some reason, please let me know and why, and I’ll try for another solution. I eagerly await your insights and ideas, my man.
The problem is the inspection console. It shows the raw http(s) requests for elements, even inside the game and regardless of how you attempt to hide specific aspect/elements of your supporting code. And even if hosted on Wix, I assume these request would still reveal everything, allowing folks embed your game (or any other app) on other sites.
Oh, well. Learned a lot. Didn’t know much about Chrome’s inspection tool before this. I’ll take that as a win, however small.
You can use some programs to obfuscate your JavaScript and make it less readable (to humans), but doing only that won’t prevent theft.
Try to put the logics and data in the backend, import it in multi-step procedure (as much as possible without affecting the performance too much).