PHP 向 JavaScript 傳遞變數的正確姿勢：JSON 編碼與 XSS 防護

常見錯誤寫法（極度危險）

<?php
// 錯誤 1：直接輸出變數，單引號破壞 JS 語法
echo "<script>test('$_POST[userid]');</script>";

// 錯誤 2：雙引號內插變數，同樣有注入風險
$para = "hello boby!";
echo "<script> var para=\"$para\"; alert(para);</script>";

後果：使用者輸入 ' ; alert(1) // 即可導致 XSS 攻擊。

標準安全做法：json_encode() + 資料屬性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app" data-user-id="<?= htmlspecialchars(json_encode($userId), ENT_QUOTES, 'UTF-8') ?>"></div>

    <script>
    // 讀取：自動解析為 JS 物件/字串/數值
    const userId = JSON.parse(document.getElementById('app').dataset.userId);
    console.log(userId);
    </script>
</body>
</html>

進階：內聯 Script 標籤傳遞複雜資料

<?php
$userData = [
    'id' => 123,
    'name' => "O'Reilly", // 單引號
    'roles' => ['admin', 'editor'],
    'settings' => (object)['theme' => 'dark', 'lang' => 'zh-TW'],
];
// json_encode 會正確處理編碼、轉義、型別
$jsVar = json_encode($userData, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_UNESCAPED_UNICODE);
?>

旗標詳解

PHP 7.3+ 可直接用 JSON_THROW_ON_ERROR 捕獲編碼失敗。

Session 變數同樣適用

<?php
session_start();
$csrfToken = $_SESSION['csrf_token'] ?? bin2hex(random_bytes(32));
?>

架構建議：前後端分離下的資料傳遞

1. API 回傳 JSON：header('Content-Type: application/json'); echo json_encode($data);
2. 首屏資料內聯：僅在 SSR/CSR 混合時，將初始狀態序列化到 window.__INITIAL_STATE__。
3. 敏感資料勿前端：Token、金鑰、個資走 HTTP-only Cookie 或後端驗證，不要輸出到 JS。

總結

• 永遠使用 json_encode() 將 PHP 變數序列化為 JS 常值。
• 輸出到 HTML 時加 htmlspecialchars(..., ENT_QUOTES) 雙重保護。
• 優先用 data-* 屬性或 <script type="application/json"> 隔離資料與邏輯。