将变量延迟传递给PHP页面中的HTML元素，或者用更新后的值替换它

Question

/public/register.php      ## [1] "public" 注册表单
/public/js/checkout.js    ## [2] "public" 付款处理
/src/register.php         ## [3] "private" 附加处理

• [1] 通过 加载 [2]
• [1] 通过 require __DIR__ . '/../src/register.php'; 包含 [3]

[1] 包含一个 HTML 元素（作为 HTML 代码包含在 PHP 文件中，即在 标签之外）：

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

$secret_var 在 [3] 中声明/实例化。

[2] 这个 JS 文件包含

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

[3] 包含

session_start();
// 付款合作伙伴处理代码，响应
$secret_var = json_encode(array(secret_var);
$_SESSION['secret_var'] = $secret_var;

$secret_var 作为一个 $_SESSION 变量从 [3] 传递到 [1]，[2] 在其中检索它。

当从 JavaScript 文件的 console.log 语句中在浏览器中回显 $secret_var 时，它返回 null。

当从 src/register.php 中回显 $secret_var（在渲染的 registration.php 页面中显示），它具有正确的（字符串）值。

如何延迟将 $secret_var 传递给 HTML 的 #secret 元素，或者用更新的（非空）值替换它？

Answer 1

猜测您在执行顺序方面遇到了问题，比如在DOM中甚至还不存在<div id="secret">时，[2]脚本就已经执行了。您可以在输出<script src="js/checkout.js"></script>之前，简单地在[1]处添加类似于<script>var secret_var = <?= json_encode($secret_var); ?>;</script>的内容，这样它就在checkout.js执行之前就是公开的并且已知的，而且已经作为变量存在，无需读取元素内容。或者只需使用事件，如window.onload来执行[2]对元素的读取。

如果该秘密值发生变化并且您需要进行更新，您可以定期检查变化，或者更好地在使用之前请求最新的值。

请注意，您输出到客户端的任何内容都不再是秘密，如果您真的想保护某个值，您必须将其仅保留在服务器端，这在像支付网关的API密钥等情况下非常重要。服务器端意味着将秘密存储在数据库或会话中。然后，每当您需要与远程服务交互时，只需调用PHP脚本（例如ajax）在服务器端执行该任务，这样您就将秘密的使用分离到仅限服务器端，然后您无需将其传递给客户端或请求更新。