通过<script>标签从PHP模板创建JS变量的实践及安全问题(PHP/WordPress)

一、当前实现是否符合良好开发实践？ #

当前写法可以正常运行，但不属于推荐的最佳实践，存在几个明显的可优化点：

• 存在全局变量污染问题：直接用var在顶层定义变量会挂载到window全局对象上，如果后续其他脚本定义了同名变量，会直接覆盖原有值，这类问题排查成本很高。
• 缺少必要的转义逻辑：当前变量是写死的success所以不会出问题，但如果后续变量值来自用户输入、数据库动态内容，直接拼接字符串到JS代码里，很容易引发JS语法错误，甚至XSS漏洞。
• 存在隐式的时序依赖：变量是否能正常读取完全依赖标签的摆放顺序，如果bundle.js的加载、执行时机早于你输出的这段script标签，调用时就会抛出「变量未定义」的错误，没有明确的依赖契约，后续维护很容易踩坑。

更规范的实现可以参考两种方案：

1. 统一命名空间挂载：把所有需要后端传递给前端的变量，统一挂载到一个专属的全局对象下，避免散点定义全局变量，同时用PHP自带的json_encode做安全转义，示例代码：

<?php
// 所有要传给前端的变量统一放到这个数组里
$frontendPayload = [
    'javascriptVar' => 'success',
];
?>
<script>
// 专属命名空间，不要和其他全局变量冲突
window.APP_RUNTIME_CONF = <?php echo json_encode($frontendPayload, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>;
</script>

对应JS里读取时直接取window.APP_RUNTIME_CONF.javascriptVar即可，json_encode加上指定转义常量后，会自动处理特殊字符，从根源避免语法错误和注入问题。
2. DOM属性挂载：如果传递的变量不多，也可以直接把值写到页面根节点的data-*属性上，完全不需要定义全局变量，示例：

<div id="app" data-javascript-var="<?php echo htmlspecialchars('success'); ?>">
  ...页面内容...
</div>

JS里直接通过document.getElementById('app').dataset.javascriptVar就能拿到值，更干净。

二、在body内部创建script标签是否存在安全隐患？ #

script标签放在body内部是HTML规范明确允许的合法写法，标签本身的位置不存在任何原生安全隐患，安全风险只和标签内写入的内容有关，和标签放在head还是body没有关系。
真正会触发安全问题的场景只有两类：

• 写入script标签的动态内容没有做转义，比如变量值来自用户输入，内容为';alert('恶意代码');const a='，直接拼接进脚本的话就会执行任意攻击者注入的JS代码，这是核心风险点，和标签位置无关。
• 动态插入的script标签引用了不可信的第三方脚本地址，或者脚本内使用了eval等危险API执行未校验的动态内容。

额外提一句：如果放在body中间的script标签没有加defer/async属性，默认会阻塞后续DOM的解析渲染，如果脚本内容不需要第一时间执行，加上defer属性体验会更好。

内容的提问来源于stack exchange，提问作者Anna