PHP与JavaScript数据交互的编码安全实践
年卡会员在 Web 开发的世界里，PHP 和 JavaScript 就像一对朝夕相处的搭档。一个在服务器端构建数据的“源头”，一个在浏览器端负责呈现用户的“界面”。而连接这对搭档的桥梁，最常见的就是 JSON 和 AJAX。
但凡是桥梁，就必然是攻防的焦点。我们在享受 PHP 传来的数据直接填充进页面 DOM 的便利时，一个不小心，就可能为恶意脚本大开方便之门。今天，咱们就抛开教科书式的理论，聊聊这中间那些容易踩坑，但又能轻松规避的编码安全实践。
问题的根源：HTML 上下文与 JavaScript 解析器
很多人觉得，我用 `json_encode` 把数组输出成 JSON，前端拿 JSON.parse 一解析，不就完事了吗？安全得很！
其实不然。最大的隐患往往出现在数据输出阶段。如果你的 PHP 代码直接这样写：
<?php
$data = ['name' => $_GET['name']]; // 来自用户的输入
?>
<script>
var userInfo = <?php echo json_encode($data); ?>;
</script>
假设用户传入的 `name` 值是 `</script><script>alert('XSS')</script>`，服务器返回的 HTML 源码就会变成：
<script>
var userInfo = {"name":"</script><script>alert('XSS')</script>"};
</script>
浏览器的 HTML 解析器会先识别 `</script>` 标签，导致原本的 `<script>` 块被提前闭合，紧接着的恶意 `<script>` 代码就会跟在后头执行——你辛辛苦苦用 `json_encode` 转义的引号，在 HTML 解析器面前根本不值得一提。这种跨界攻击，数据在进入 JavaScript 之前，就已经在 HTML 层被“带偏”了。
第一道防线：让 PHP 输出的数据嵌入安全
解决这个问题的思路并不复杂——不能让任何不可信内容直接进入 `<script>` 标签的上下文。如果你必须将 PHP 变量直接输出到页面的 JavaScript 中，不应该用 `htmlspecialchars`（那只会把 `"` 变成 `"`，对 `</script>` 毫无办法）。
正确的姿势是结合 `JSON_UNESCAPED_UNICODE` 和 `JsonSerializable` 等手段，同时留意 `</script` 字符组合本身。PHP 的 `json_encode` 并不会自动转义 `/`，所以安全的做法是对输出做一次字符串替换：
<?php
function safeJsonEncode($data) {
$json = json_encode($data, JSON_UNESCAPED_UNICODE);
// 将 </script 替换为 <\/script，这会被 JavaScript 字符串原样识别
return str_replace('</script', '<\\/script', $json);
}
$data = ['name' => $_GET['name']];
?>
<script>
var userInfo = <?php echo safeJsonEncode($data); ?>;
</script>
但是，更推荐的方案却是避免这种尴尬的混合编程。别在 HTML 的 `<script>` 标签里直接模板化注入 PHP 数据。把数据放到一个隐藏的 DOM 节点属性里（用 `data-*`），再让 JavaScript 通过 `document.getElementById('data')` 去读取，从根本上绕开了解析器劫持问题。
第二道防线：AJAX 接收端的“双重解码”思维
现在更多的实践是 AJAX 请求。PHP 端 `echo json_encode($data)`，JS 端用 `$.getJSON` 或者 `fetch` 拿到 JSON 数据。这时候常见的安全坑不在服务器，而在前端处理逻辑。
许多新手拿到数据第一时间就拼字符串插入 DOM：
fetch('/api/user?id=1')
.then(res => res.json())
.then(data => {
$('#username').html(data.username); // 危险！如果 username 是 <img src=x onerror=alert(1)>
});
这里要纠正一个误区：JSON 编码不是 HTML 编码。`json_encode` 只能保证你在 JavaScript 上下文里得到一个合法的字符串，但它不会帮你过滤掉 `<img>` 或 `<svg>` 标签。PHP 端的 `htmlspecialchars` 是给 HTML 用的，不能用来处理 JSON 里的通用字段。
PHP 端该做的，是把最核心的数据字段做收口校验。比如，约定用户名必须符合 `[a-zA-Z0-9_\x{4e00}-\x{9fa5}]` 的正则，越权数据在源头就被拒绝；而在前端，凡是准备用 `innerHTML` / `insertAdjacentHTML` 之类的 DOM 渲染接口，一律改用 `textContent` 或者基于文本节点的库（如 `escapeHtml` 工具函数）。数据交互的安全，不只是后端编码的锅，更是前端永远不要用 innerHTML 渲染动态数据的自觉。
第三道防线：统一封装，避免“漏网之鱼”
上面是微观层面的编码。宏观来看，大项目最常见的安全危机是输出格式不统一。有些接口返回 JSON，有些接口直接返回一个裸字符串，调试时用 `var_dump` 打出来，前端误当数组读取，结果某个字段在中间层被组合了两次。
这里不妨定义一套服务端的最小的响应契约：
<?php
function response($code, $message, $data = []) {
header('Content-Type: application/json; charset=utf-8');
$res = [
'code' => $code,
'message' => $message,
'data' => $data
];
// 强制转义任意HTML实体，但保留JSON结构
exit(json_encode($res, JSON_UNESCAPED_UNICODE));
}
// 使用示例
response(200, 'success', ['username' => 'Alice', 'bio' => '<script>alert(1)</script>']);
这段代码的优势在于，把所有的出口数据都放在同一个 `response` 函数里，方便做全局的特殊编码策略或日志审计。对于 HTML 片段类数据，如果实在需要返回，就约定字段名叫 `html`，并且明文注释“前端必须用 DOMPurify 清洗后再插入 DOM”；如果不需要 HTML 渲染，则统一输出纯文本。没有混合地带，安全风险就少了一大半。
别忘了“加密编码”：敏感数据不能裸奔
还有一种编码常被误解——URL 编码和 Base64。如果你用 AJAX 传递用户 ID，别图省事直接把自增 ID 放进 `data`（如 `data: { uid: 1024 }`）。防人之心不可无，这里要说的不只是 XSS，还有越权。不过即便你非要传递，也建议类似 JWT 签名的思路，但是这一章我们聊的是编码。
例如在 PHP 端生成了签名：
<?php
$secret = 'your-app-secret-key';
$payload = base64_encode(json_encode(['uid' => 1024, 'exp' => time() + 600]));
$signature = hash_hmac('sha256', $payload, $secret);
// 返回给前端
response(200, 'success', ['token' => $payload . '.' . $signature]);
而 JavaScript 端，永远不要试图去把签名的密钥写进前端代码。前端只负责存 token、传 token；验证解码，永远在 PHP 服务端做。这能防的是数据在传输过程中被篡改，防止“编码”变成“裸奔”。
总结
PHP 与 JavaScript 的数据交互，本质就是一个“传递信任”的过程。安全编码的核心不在于你用不用 `mysqli_real_escape_string`（如今已用 PDO 预处理），而在于每一层解析器（HTML解析器、JavaScript解析器、JSON解析器）都有各自的语法规则，你的数据只要穿过哪一层，就已按那一层的转义规则来进行处理。
几句话可供参考：
1. 不要把 PHP 的 `echo json_encode()` 毫无处理地塞进 `<script>` 标签里。
2. 不要在 AJAX 数据渲染时迷信 JSON 编码等同于“安全无害”。
3. 要做输出契约的规范统一，对纯文本数据和富文本数据有所区分。
4. 要把前端的变量当作“不可信输入”来对待，永远只借助 `textContent` 去输出动态文本。
Web 安全的本质是比较简单的——让数据在合适的上层语言中被正确地编码，把该转义的转义，把该拒绝的拒绝。PHP 是你的后端，JavaScript 是你的门帘，你要做的，只是确保它们之间的握手——在编码这一刻，始终干净而清晰。