Hiding Javascript for puzzle game

Question

For a fun project I wanted to make a puzzle game that is a series of riddles with the answers being a link to the next level, a la Notpron. I've been working on this in Javascript so it can have more interactive elements. However, anyone can look at the JS source and immediately figure out the link to the next puzzle. Especially if I have something like:

 window.location.href = "levels/1.html"

It would be nice if I could hide this somehow, but most obfuscation tools I've looked at seem like it would be very easy to identify where a link string is and decode it. Notpron gets around this by only having clues that lead to the user manually typing in the URL to the next level, but I would like to stay away from that.

Like I said, this is just for fun. But my question is if there is any way to accomplish hiding code on the web. I'm open to using different tools as well.

you can't hide js. Obfuscation just makes it a little more of a pain for general users to see your code but isn't going to stop anyone. — scrappedcola, Jun 30 '16 at 14:34
What you do is use some sort of simple character replacement encryption with a decryption key. So if someone looks at your code, they'd see gobbligook. But when the program runs, the decrypted string is shown. — durbnpoisn, Jun 30 '16 at 14:35
@durbnpoisn That's just another layer of obfuscation. If the browser can see it and execute it, the user can see it too. — James Thorpe, Jun 30 '16 at 14:37

newfurniturey · Answer 1 · 2016-06-30T15:05:17.453

With JavaScript alone, not really. Plus, doing obfuscation at that level is a bit overkill.

However, if you have a server-side script that runs any other language, such as PHP, ASP, etc, you can have the JavaScript (via an AJAX request) submit the user's "answer" to the riddle and if it's correct, it returns the link to the next one.

An example, with jQuery:

$.post("/check_answer.php", { riddle: 2, answer: users_answer })
    .done(function(response) {
        if (response== "false") {
            // display some error message
        } else {
           document.location = response;
        }
    });

score 1 · Answer 2 · answered Jun 30 '16 at 14:39

What you could do, is make the url (or path part of the URL) of the next question be the answer of the previous question. So the only way to advance in the game, is by answering the question correctly.

So, if the answer of the question is 'google'. The url of the next question could be: http://mypuzzle.com/google

Note: just to be safe, i would base64-encode the answer. 'google', would become 'Z29vZ2xl' so the url would become http://mypuzzle.com/Z29vZ2xl

score 1 · Answer 3 · 2016-06-30T15:59:39.127

As others have said you cannot 100% prevent someone from viewing your code but it seems that you are looking to stop the quick view-source and see the URL. A simple ceasar shift will obfuscate the string for you. you can guise it as some sort of jQuery function to throw off the casual glance

function jQuery148951(s, n) {
    return {
        val: function() {
            return s.split("").map(function(char) {
                return String.fromCharCode(char.charCodeAt(0) + n)
            }).join("")}
    }
}
...
>jQuery148951("levels/1.html",-2).val()
"jctcjq-/,frkj"
...
window.location.href = jQuery148951("jctcjq-/,frkj",2).val()

Or to reduce complexity as pandavenger suggested you can use window.atob and window.bota

>btoa("levels/1.html")
"bGV2ZWxzLzEuaHRtbA=="
...
window.location.href = atob("bGV2ZWxzLzEuaHRtbA==")

why not use the `window.atob()` and `window.btoa()` to base64encode instead of writing your own? — pandavenger, Jun 30 '16 at 14:55

score 0 · Answer 4 · answered Jun 30 '16 at 14:37

0

You can use ajax and a server side language to check the answers and send back a response. The response can either say they are wrong with a message or say they are correct and give them a link to the next puzzle.

answered Jun 30 '16 at 14:37

Joseph Evans

1,360
9
14

Hiding Javascript for puzzle game

4 Answers4