PHP 陣列傳遞給 JavaScript 三大主流方案對比

PHP 後端陣列安全高效傳遞給前端 JS 的最佳實踐

PHP 陣列無法直接在 JS 中使用，必須經過序列化、編碼、輸出、解析四步。主流方案三種，各有優劣：

方案一：內聯輸出 JSON + json_encode（推薦）

<script>
const list = <?= json_encode($data['arr'], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) ?>;
drawGpsMap(list);
</script>

優點：零額外請求、首屏直出、無 XSS 風險（配合 JSON_HEX_* 旗標）。
適用：資料量 < 50KB、首屏必需、非極度敏感資料。

方案二：AJAX 非同步請求（按需加載）

<script>
fetch('/api/get-list')
  .then(r => r.json())
  .then(list => drawGpsMap(list))
  .catch(console.error);
</script>

優點：首屏快、資料隔離、支援分頁/篩選、敏感資料可做權限校驗。
適用：大資料量、非首屏關鍵、需即時更新、權限控制場景。

方案三：隱藏域 / 全域變量 / 生成 .js 檔（舊專案常見）

// 隱藏域
<input type="hidden" id="js-data" value="<?= htmlspecialchars(json_encode($arr)) ?>">
<script> const list = JSON.parse(document.getElementById('js-data').value); </script>

// 生成靜態 .js（需寫入磁碟、快取失效處理）
file_put_contents('public/data/list.js', 'const LIST = ' . json_encode($arr) . ';');

缺點：隱藏域汙染 DOM、全域變量汙染命名空間、生成 .js 增加部署複雜度與快取問題。不推薦新專案使用。

核心安全原則

1. 永遠使用 json_encode，禁止手動拼接字串；
2. 內聯輸出必須加 JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP 防 XSS；
3. Content-Type 設置 application/json; charset=utf-8；
4. 敏感資料（Token、身分證、金額）走 AES 加密或 JWT，前端解密渲染。

常見錯誤對照