PHP 轉義輸出 HTML 到 JavaScript 字符串：jsformat 函數實現與安全最佳實踐

核心問題

PHP 變量包含 HTML/JS 特殊字符（引號、換行、反斜杠），直接拼接到 JS 字符串會導致語法錯誤或 XSS 漏洞。

jsformat 函數實現

function jsformat(string $str): string {
    $str = trim($str);
    // 1. 合併多餘空白（可選，視業務而定）
    $str = preg_replace('/\s+/', ' ', $str);

    // 2. 移除換行符（JS 字符串不允許裸換行）
    $str = str_replace(["\r\n", "\r", "\n"], ['\\n', '\\n', '\\n'], $str);

    // 3. 轉義反斜杠（必須最先處理）
    $str = str_replace('\\', '\\\\', $str);

    // 4. 轉義引號（雙引號上下文）
    $str = str_replace('"', '\\"', $str);

    // 5. 轉義單引號（單引號上下文）
    $str = str_replace("'", "\\'", $str);

    // 6. 轉義  防止標籤閉合（XSS 關鍵）
    $str = str_replace('', '<\\/script>', $str);

    // 7. 可選：Unicode 轉義非 ASCII 字符（確保純 ASCII 輸出）
    // $str = json_encode($str, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
    // return substr($str, 1, -1); // 去掉 json_encode 加的雙引號

    return $str;
}

使用示例

$html = '
內容\n換行
';
$jsSafe = jsformat($html);

echo "";

現代最佳實踐：json_encode 一鍵搞定

$data = ['html' => $html, 'title' => '標題'];
// 自動處理：引號、換行、Unicode、、控制字符
$jsCode = 'var data = ' . json_encode($data, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) . ';';
echo "";

標誌位解析

安全檢查清單

1. ✅ 所有動態數據進入 JS 必須經 json_encode 或 jsformat。
2. ✅ 頁面 `` 與 PHP `header('Content-Type: text/html; charset=utf-8')` 一致。
3. ✅ 避免 `echo ""` 手動拼接模式。
4. ✅ CSP 標頭：`Content-Security-Policy: script-src 'self'` 限制內聯腳本（需配合 nonce/hash）。