Pass string securely to JS

Question

How do I receive a string in JS (maybe through an alert) without the user being able to see it beforehand (e.g. in the source code)? You probably know this from Geocaching Checkers, how do they secure the real Coordinates from being seen in the source code or wherever? I have a web server and some basic JS and HTML understanding, I read about PHP and AJAX but I didn't found the solution to my problem yet. My objective is to reveal a information only if the user completed a condition on my website, and its vital that it's not seen before. I tried using a separate PHP file:

<?php
    $koords =  "N 53° 13.869 E 10° 22.716";
?>

but how do i reciev this variable in JS and can the php file be seen by the user?

Answer 1

In your browser (JS) it will always be available to be seen by someone with JS knowledge.

The only thing you can do is set up a server which evaluates if your user has fulfilled the condition for completing the challenge. Once the server recognizes the challenge as completed it would send back your secret to the client, so that it can be displayed to the user there. How you set up that server and with what language or framework /tools (for example PHP) depends on your background and the environment you will host your website in.

Adding a bit of detail: You will want to make a Http request in your JS somehow sending user input to the server (for example PHP). If it is simple content you could add it in the url itself with &parameter=foo, otherwise you would likely send a post request and send your data as JSON body. You would then need to evaluate the parameter in your PHP and if it meets the challenge's requirement you would answer to the client in your response with your secret or if not with a message like try again.

Answer 2

Ok, here is what I did, to help anyone who sees this. The method is easy to "hack" so don't use this to hide actual sensible data, its more an obstruction to easily see in the sourcecode whats going on. I created a PHP looking like this

<?php

$secret =  "data";
$givesecret = $_GET['givesecret'];

if ($givesecret>0) {
    echo $secret;
}
?>

Then, when I want the secret Information I let my JS call the PHP via XHR

var rndvar = 0;
//something is done in a loop
rndvar++;
//now something is completed and i want to reveal the secret
var xhr = new XMLHttpRequest();
            xhr.open("GET", "containssecret.php?givesecret="+rndvar);
            xhr.onreadystatechange = function()
            {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    alert(xhr.responseText);
                }
            }
xhr.send();

Pretty basic, and the obvious flaw is, of course, I could call https://www.mywebsite.org/containssecret.php?givesecret=5 and it will give the secret right away, so the goal would be to name everything less obvious and don't make it clear what the criteria in the PHP is (here it is int greater then zero). But it will always be possible to find that out if you know some coding, this is just an easy way to obfuscate and it's only relatively secure from the ordinary users. For my purpose this is well enough :-D