怎么在JSP中将Java变量安全传递给JavaScript

一、为什么直接在<script>中拼接变量极度危险

在很多早期Java Web项目中，初学者或习惯直接编写模板的开发者往往会随手在 <script> 标签内使用JSP表达式或EL表达式进行变量赋值，例如：

<%-- 常见的高危错误示范 --%>
<script>
    var userName = "<%= request.getAttribute("userName") %>";
    var userRole = "${userRole}";
</script>

这种写法存在两大致命漏洞：

• 破坏代码语法导致脚本崩溃：如果后台变量的值中包含双引号、单引号或反斜杠（例如用户的昵称输入为 Tom" || alert(1)），生成的HTML会导致字符串提前闭合，引发前端JavaScript语法错误（Uncaught SyntaxError）。
• 引发跨站脚本注入（XSS）：如果攻击者构造输入包含闭合标签 </script><script>alert(document.cookie)</script>，HTML解析器会优先识别并截断原有的脚本块，直接执行注入的恶意代码。此时即使用户对普通双引号做了过滤，也无法防御闭合标签带来的结构性逃逸。

二、方案一：通过 HTML5 data-* 属性传递（简单变量首选）

当需要传递的数据是简单的配置项、状态码、ID或普通字符串时，使用HTML5的 data-* 自定义属性是最简洁、可靠的方式。

1. 实现原理

在JSP页面渲染时，将Java后台变量输出到特定的HTML元素属性中。由于该元素处于常规HTML文档流内（如 <div>、<meta> 或按钮上），必须使用标准HTML转义函数进行编码，浏览器在解析属性值时绝不会将其当作可执行脚本。随后JavaScript在DOM加载完毕后，使用 element.dataset 属性安全读取。

2. 完整代码示例

在JSP文件中使用JSTL的 <c:out> 或 fn:escapeXml 保证输出安全性：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%-- 方案A：挂载在具体的业务容器元素上 --%>
<div id="userProfile"
     data-user-id="<c:out value="${user.id}" />"
     data-user-name="${fn:escapeXml(user.name)}"
     data-is-admin="${user.admin ? 'true' : 'false'}">
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var profileElem = document.getElementById('userProfile');
    
    // 通过 dataset 属性读取，连字符自动转换为驼峰命名
    var userId = profileElem.dataset.userId;
    var userName = profileElem.dataset.userName;
    var isAdmin = profileElem.dataset.isAdmin === 'true';

    console.log("用户ID:", userId, "用户名:", userName, "是否管理员:", isAdmin);
});
</script>

三、方案二：使用 application/json 脚本块（复杂对象与列表首选）

如果需要从Java端传递复杂的实体对象（JavaBean）、Map或者List列表到前端，继续使用多个 data-* 属性会显得繁琐且易丢失结构。此时最佳方案是在后台将数据序列化为JSON，放置在不可执行的 <script type="application/json"> 容器中。

1. 为什么必须是 type="application/json"

当 <script> 标签的 type 属性被赋予未知的MIME类型（例如 application/json）时，现代浏览器会认为它是一个数据块，仅将其加载为纯文本DOM节点，绝不会触发脚本执行引擎。

2. 后端序列化中的字符转义处理

仅仅将数据放入 <script type="application/json"> 还不够，必须提防闭合标签注入。例如JSON内部恰好有某个字符串字段包含了 </script>，HTML扫描引擎依然会在遇到闭合标签时强制切断。

因此在Java服务端，需要将序列化后的JSON字符串中的 < 字符转换为Unicode形式 \u003c。在标准JSON语法中，\u003c 是合法的Unicode转义，前端 JSON.parse() 解析时会自动还原为 <，同时又规避了HTML解析器的标签识别。

// Java Controller / Servlet 处理代码示例
import com.fasterxml.jackson.databind.ObjectMapper;

List<Product> productList = productService.getHotProducts();
ObjectMapper mapper = new ObjectMapper();
String jsonRaw = mapper.writeValueAsString(productList);

// 关键转义：防止提前闭合 </script>
String safeJson = jsonRaw.replace("<", "\\u003c");
request.setAttribute("safeProductsJson", safeJson);

在JSP页面中接收并消费该数据：

<%-- 存放数据的独立容器，不会被作为JS代码执行 --%>
<script id="server-payload" type="application/json">${safeProductsJson}</script>

<script>
(function() {
    var rawText = document.getElementById('server-payload').textContent;
    try {
        var products = JSON.parse(rawText);
        console.log("成功获取Java传递的商品列表:", products);
        // 执行业务渲染逻辑...
    } catch (e) {
        console.error("JSON 数据解析失败:", e);
    }
})();
</script>

四、方案三：如果必须直接在 JS 字符串中赋值（JavaScript 上下文转义）

在极少数遗留代码维护场景中，如果确实无法重构页面DOM结构，必须在 <script> 标签内的字符串字面量中直接注入Java变量，切忌使用 JSTL 的 c:out 或 fn:escapeXml。

在 JavaScript 上下文中，转义规则必须遵循 ECMAScript 标准规范（例如使用反斜杠转义引号、换行符以及十六进制/Unicode编码特殊符号）。应当引入成熟的安全类库，例如 OWASP Java Encoder 或 Apache Commons Text。

<%-- 引入 OWASP Java Encoder 标签库 --%>
<%@ taglib prefix="e" uri="https://www.owasp.org/index.php/OWASP_Java_Encoder_Project" %>

<script>
    // 使用专为 JavaScript 字符串环境设计的编码器
    var clientToken = "${e:forJavaScript(userToken)}";
</script>

五、三种主流方案特性与技术选型

不同方案在安全性、承载能力和开发复杂度上各有侧重。下表与图示梳理了常见方案的适用边界：

六、安全开发操作与校验清单

为了确保页面在上线后能够稳定运行并抵御各类代码注入威胁，建议开发团队在审查JSP与JS交互代码时遵循以下核对步骤：

1. 确认数据载体：基础类型变量挂载在 HTML 节点的 data-* 属性上；复杂实体集合一律使用 <script type="application/json"> 容器。
2. 检查服务端转义：JSON 序列化后必须将 < 转义为 \u003c，防止包含 </script> 导致的标签提前截断。
3. 杜绝 eval 行为：在前端解析数据时，只调用浏览器的原生 JSON.parse()，严禁使用 eval() 或 new Function()。
4. 启用安全标头：在 Web 服务器或 Filter 中配置 Content-Security-Policy（CSP），从根本上限制内联未知脚本的执行能力。