PHP 安全輸出 HTML 到 JavaScript：完整轉義方案與最佳實踐

在 PHP 後端渲染頁面時，常需將服務端生成的 HTML 片段、用戶輸入內容、模板數據傳遞給前端 JavaScript 變量。若直接拼接字符串，極易導致 XSS 跨站腳本攻擊 或 JavaScript 語法錯誤。本文提供一個生產級的 PHP 轉義函數，深度解析轉義規則、編碼陷阱與現代替代方案。

核心轉義函數：jsHtmlEscape()

<?php
/**
 * 將任意字符串安全編碼為 JavaScript 字符串字面量內容
 * 適用場景：內聯腳本、JSON 嵌入、HTML data-* 屬性、JS 模板插值
 *
 * @param string $input 原始輸入
 * @param string $encoding 字符編碼（默認 UTF-8）
 * @return string 可直接放入 JS 單雙引號字符串中的安全內容
 */
function jsHtmlEscape($input, $encoding = 'UTF-8') {
    if (!is_string($input)) {
        $input = (string) $input;
    }

    // 1. 統一換行符為 \n（JS 字符串中需轉義）
    $input = str_replace(["\r\n", "\r", "\n"], '\n', $input);

    // 2. 核心轉義序列（按順序執行，避免重複轉義）
    $map = [
        '\\'  => '\\\\',  // 反斜桿最優先（防止後續轉義被再次轉義）
        '"'   => '\\"',   // 雙引號
        "'"   => "\\'",   // 單引號
        ' '<\/',   // 關鍵：防止  過早閉合外層標簽
        '&'   => '\\x26', // & 符號（十六進制轉義，避免 HTML 實體干擾）
        '<'   => '\\x3C', // <
        '>'   => '\\x3E', // >
        // 可選：控制字符轉義（U+0000-U+001F）
    ];

    $result = strtr($input, $map);

    // 3. 處理 Unicode 非 BMP 字符（Emoji 等），轉為 \uXXXX\uXXXX 代理對
    // 注意：json_encode 會自動處理，但這裡手動實現以避免引入 JSON 結構
    $result = preg_replace_callback('/[\x{10000}-\x{10FFFF}]/u', function ($m) {
        $code = hexdec(bin2hex(iconv('UTF-8', 'UTF-32BE', $m[0])));
        $high = 0xD800 + (($code - 0x10000) >> 10);
        $low  = 0xDC00 + (($code - 0x10000) & 0x3FF);
        return sprintf('\\u%04X\\u%04X', $high, $low);
    }, $result);

    return $result;
}

// 使用示例
$userBio = '<script>alert("XSS")</script> 它說: "Hello" & '\'World\'';
$safeJs = jsHtmlEscape($userBio);

// 在內聯腳本中安全使用
echo "<script>
    var userBio = '{$safeJs}';  // 單引號包裹
    console.log(userBio);
</script>";
?>

為何標準 json_encode() 不夠用？

許多開發者習慣用 json_encode($str) 直接輸出 JS 字符串，但存在隱患：

• 輸出包含雙引號： `json_encode('He said "Hi"')` 返回 `"He said \"Hi\""`（含首尾雙引號）。若直接寫入 `var x = ;` 會產生雙重引號語法錯誤。
• 不轉義 ``： `json_encode('')` 返回 `""`。若在 `` 中，瀏覽器解析器會在 JS 引擎介入前、按 HTML 標準關閉腳本標簽，導致語法錯誤或 XSS。
• Unicode 轉義策略差異： PHP 5.4+ JSON_UNESCAPED_UNICODE 保留中文，但舊版本輸出 `\uXXXX`，可能不符合預期。

正確用法： `var x = ;` 但需去除首尾引號或調整模板。

轉義規則完整對照表

現代最佳實踐：避免內聯腳本，採用數據屬性 + 模塊化

反模式（內聯腳本）：

<script>
    var config = { apiUrl: '', user: '' };
    // 極易出錯、難維護、CSP 策略受限
</script>

推薦模式（HTML data-* + ES Module）：

<!-- 頁面模板 -->
<div id="app"
     data-api-url=""
     data-user-name=""
></div>

<!-- 入口腳本 -->
<script type="module">
    import { initApp } from './app.js';
    const el = document.getElementById('app');
    initApp({
        apiUrl: el.dataset.apiUrl,
        userName: el.dataset.userName
    });
</script>

優勢：

1. 徹底分離： PHP 僅負責輸出 HTML 屬性值（用標準 `htmlspecialchars`），JS 負責讀取並處理邏輯
2. CSP 友好： 支援 `script-src 'self'` 等嚴格策略，無需 `'unsafe-inline'`
3. 可維護性： JS 代碼獨立文件，支持構建工具、類型檢查、緩存、懶加載
4. 編碼統一： 避免多層轉義（PHP→JS→HTML）導致的混亂

特殊場景補充

• JSON-LD 結構化數據： `` —— 類型聲明使瀏覽器不執行、不解析 HTML 實體，安全且標準
• Vue/React 服務端渲染： 使用官方方案（`v-server-renderer`、`renderToString`）自動處理注水數據序列化與 XSS 防護
• 舊專案快速修復： 若必須內聯，統一使用 `jsHtmlEscape()` 並強制單引號包裹：`var x = '{$safe}';`

總結： PHP 向 JavaScript 傳遞數據的核心原則是「語境感知輸出編碼」。理解 HTML、JavaScript、JSON 三種語境的轉義規則差異，優先採用「數據屬性 + 模塊化 JS」架構避開內聯腳本坑洼，必要時使用經過嚴格測試的轉義函數。安全不僅是防 XSS，更是消除語法錯誤、編碼亂碼、維護噩夢的系統性工程。