將變數延遲傳遞給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）在伺服器端執行該任務，這樣您就將秘密的使用分離到僅限伺服器端，然後您無需將其傳遞給客戶端或請求更新。