Is it possible to pass a PHP query variable to JS without showing it inside View Source?

Question

I am attempting to create a system that reads hints from a MySQL database, and displays them to the user at an appropriate time. However, I haven't managed to get the hints (VARCHAR) to the JS variables to be displayed without exposing them in the HTML when viewed on the webpage. Here is my Code:

<?php 
  require_once ('config.php');    <!-- This connects to the database, all details are in the config.php -->

  $result = $link->query ('SELECT `hint1`, `hint2`, `hint3`, `hint4`, `hint5`, `hint6`, `hint7` FROM `hints` WHERE `questNo` = 1');
  while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
    $hint1 = $row['hint1'];
    $hint2 = $row['hint2'];
    $hint3 = $row['hint3'];
    $hint4 = $row['hint4'];
    $hint5 = $row['hint5'];
    $hint6 = $row['hint6'];
    $hint7 = $row['hint7'];
}
?> 

<!DOCTYPE html>
<html>
    <head>
        <title>Help</title>
    </head>
    <body> 
    <!-- Start Hell -->
    
    <div id="dom-target" style="display: none;">
      <?php
          echo htmlspecialchars($hint1);
      ?>
    </div>
    <script>
      var div = document.getElementById("dom-target");
      var hint1 = div.textContent;
    </script>

   (This would be repeated for all hints)

--------------------------------    
       (UNIMPORTANT HTML)
--------------------------------
        <h2 style="text-decoration: underline;"> Hints<br></h2>
        <br>
        <h2 onclick="displayHint()" id="hint1">Click for hint</h2>
        <br>
        <h2 onclick="displayHint()" id="hint2">Click for hint</h2>
        <br>
        <h2 onclick="displayHint()" id="hint3">Click for hint</h2>
        <br>
        <h2 onclick="displayHint()" id="hint4">Click for hint</h2>
        <br>
        <h2 onclick="displayHint()" id="hint5">Click for hint</h2>
        <br>
        <h2 onclick="displayHint()" id="hint6">Click for hint</h2>
        <br>
        <h2 onclick="displayHint()" id="hint7">Click for hint</h2>
        <br>
<script>
function displayHint() {
  document.getElementById("hint1").innerHTML = hint1;
}
</script>
<style>
(Styling Elements)
</style>

    </body>
</html>

This works for my purposes, but it shows the hints in the HTML of the actual website (due to the PHP's echo), which I do not want. I have attempted AJAX (Point 1 in this tutorial How do I pass variables and data from PHP to JavaScript?, but the output did not work correctly, and displayed [object HTMLHeadingElement] when the text was clicked. The database elements are properly transferred in too, as I checked by echoing the PHP variables, and they are right.

Any help would be appreciated, Thanks :P

Ok, that’s what I’ve done with the Javascript, but the normal text of the hints are still visible. Are there any other ways to implement a hints system that displays hints from a Database then? — SamSpudd, Aug 01 '20 at 11:41
Whether you store to the dom (as you are doing) or store to a js variable, it's going to be readable unless you obfuscate (read: scramble, hex, reverse, xor it, etc.) it somehow. Even still, your obfuscation method will be reversible because it has to be to get back the hint in plain-text. — GetSet, Aug 01 '20 at 11:43
@GetSet if you get the hints as responses to AJAX requests, then they will not be in the page source, because the page source will contain the AJAX request and the way it's being handled, but will not contain the actual values received. — Lajos Arpad, Aug 01 '20 at 11:45
@LajosArpad yes true, but will it be still readable from the console? — GetSet, Aug 01 '20 at 11:46
@GetSet the question was about page source. In the console of your browser you have two ways to view these values, that are not found in the page-source: the Network tab and the Console tab. The request will be in the Network tab, no doubt about that, for which case the usage of HTTPS and encryption will be needed. As about the Console tab, you will not be able to see this value if a function is wrapped around it without exposing it. But, again, the question is about page source. — Lajos Arpad, Aug 01 '20 at 11:54
It would be fine for the requests to be viewable in the console, as that doesn't really matter here. This is more of a landing page for a puzzle I create, so people wouldn't have a reason to view the Console of this page specifically. I am currently attempting to implement @Lajos Arpad 's idea, and will update if it does or doesn't work for me. — SamSpudd, Aug 01 '20 at 11:56

score -1 · Accepted Answer · answered Aug 01 '20 at 11:44

You will need to send an AJAX request, you will need to make sure that responseType is text (that's the default, BTW) and use this.responseText in the onreadystatechange callback like in this example:

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str) {
  if (str.length == 0) {
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("txtHint").innerHTML = this.responseText;
      }
    }
    xmlhttp.open("GET", "gethint.php?q="+str, true);
    xmlhttp.send();
  }
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form action="">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>

</body>
</html>

Source: https://www.w3schools.com/php/showphp.php?filename=demo_ajax_php

I’ve followed this, but got stuck. I’ve moved all of the PHP code to “gethint.php”, and have renamed it as such in the code. However, it doesn’t seem to be getting the result from there, and as such, nothing happens when I click the code. Is it enough to have the php script that queries the database and assigns the variables in the other PHP file, or do I need another line of code to run it? — SamSpudd, Aug 01 '20 at 12:15
@SamSpudd please edit your question with your current attempt's full PHP code and the AJAX request. You are probably very close to the actual solution. — Lajos Arpad, Aug 01 '20 at 12:30

Is it possible to pass a PHP query variable to JS without showing it inside View Source?

1 Answers1