Lazy passing a variable to an HTML element in a PHP page or replace it with an updated value
P粉253800312
2023-08-17 22:55:08
<p><br /></p>
<pre class="brush:bash;toolbar:false;">/public/register.php ## [1] "public" registration form
/public/js/checkout.js ## [2] "public" payment processing
/src/register.php ## [3] "private" additional processing
</pre>
<ul>
<li>[1] Load via <code><script src="js/checkout.js"></script></code> [2]</li>
<li>[1] via <code>require __DIR__ . '/../src/register.php';</code> contains [3]</li>
</ul>
<p>[1] contains an HTML element (included as HTML code in the PHP file, i.e. outside the <code><php ... ?></code> tag): </p> ;
<pre class="brush:html;toolbar:false;"><div id="secret" style="display: none;">
<?php
echo htmlspecialchars($secret_var);
?>
</div>
</pre>
<p><code>$secret_var</code> is declared/instantiated in [3]. </p>
<p>[2] This JS file contains</p>
<pre class="brush:js;toolbar:false;">var div = document.getElementById("secret");
var secret_var = div.textContent;
console.log(secret_var)
</pre>
<p>[3] contains</p>
<pre class="brush:php;toolbar:false;">session_start();
// Payment partner processing code, response
$secret_var = json_encode(array(secret_var);
$_SESSION['secret_var'] = $secret_var;
</pre>
<p><code>$secret_var</code> is passed as a <code>$_SESSION</code> variable from [3] to [1] where [2] retrieves it. </p>
<p>When echoing <code>$secret_var</code> in the browser from a JavaScript file's <code>console.log</code> statement, it returns <code>null</code> ;. </p>
<p>When echoing <code>$secret_var</code> from <code>src/register.php</code> (shown in the rendered <code>registration.php</code> page ), which has the correct (string) value. </p>
<p>How can I delay passing the <code>$secret_var</code> to the HTML's <code>#secret</code> element, or replace it with an updated (non-null) value? </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 beforecheckout.jsis executed, and Already exists as a variable, no need to read the element content. Or just use an event such aswindow.onloadto 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.