Lazy passing a variable to an HTML element in a PHP page or replace it with an updated value

Question

/public/register.php ## [1] "public" registration form
/public/js/checkout.js ## [2] "public" payment processing
/src/register.php ## [3] "private" additional processing

• [1] Load via [2]
• [1] via require __DIR__ . '/../src/register.php'; contains [3]

[1] contains an HTML element (included as HTML code in the PHP file, i.e. outside the tag):

;

<div id="secret" style="display: none;">
  <?php
    echo htmlspecialchars($secret_var);
  ?>
</div>

$secret_var is declared/instantiated in [3].

[2] This JS file contains

var div = document.getElementById("secret");
var secret_var = div.textContent;
console.log(secret_var)

[3] contains

session_start();
// Payment partner processing code, response
$secret_var = json_encode(array(secret_var);
$_SESSION['secret_var'] = $secret_var;

$secret_var is passed as a $_SESSION variable from [3] to [1] where [2] retrieves it.

When echoing $secret_var in the browser from a JavaScript file's console.log statement, it returns null ;.

When echoing $secret_var from src/register.php (shown in the rendered registration.php page ), which has the correct (string) value.

How can I delay passing the $secret_var to the HTML's #secret element, or replace it with an updated (non-null) value?

Answer 1

Guess you have encountered a problem with the execution order. For example, the [2] script has been executed when <div id="secret"> does not even exist in the DOM. You can simply add something like <script>var secret_var at [1] before outputting <script src="js/checkout.js"></script> = <?= json_encode($secret_var); ?>;</script>'s content, so that it is public and known before checkout.js is executed, and Already exists as a variable, no need to read the element content. Or just use an event such as window.onload to perform [2] the reading of the element.

If the secret value changes and you need to update it, you can check for changes periodically, or better still, request the latest value before using it.

Please note that anything you output to the client is no longer a secret, if you really want to protect a value you have to keep it only on the server side, this is not the case in cases like API keys for payment gateways etc. Very important. Server side means storing the secret in a database or session. Then whenever you need to interact with the remote service, just call a PHP script (e.g. ajax) to perform that task on the server side, this way you separate the use of the secret to server side only and then you don't need to pass it to the client terminal or request an update.