如何在Express的res.render传递变量至<script>中且不暴露数据至页面源码？

你担心的这个安全问题完全合理——直接把完整的loggedInUser对象序列化到页面源码里，会把tokens这类敏感数据暴露给所有能查看页面源码的用户，确实存在不小的风险。这里有几个更安全的替代方案：

1. 最小化传递的数据：只给前端需要的字段 #

不要把整个用户对象丢给模板，而是只提取前端业务逻辑真正需要的属性，过滤掉敏感或不必要的字段（比如tokens、_id这类）。

后端修改示例： #

router.route("/build")
 .get([isLoggedIn, finishedRegistration], function(req, res){
  // 只保留前端需要的非敏感字段
  const safeUserInfo = {
    username: req.loggedInUser.username,
    email: req.loggedInUser.email // 如果前端不需要可以直接去掉
  };
  res.render("build", {safeUserInfo: safeUserInfo});
 })

前端修改示例： #

<script>
 var user = <%- JSON.stringify(safeUserInfo) %>
 // 这里只会拿到你允许的字段，敏感数据不会出现在源码里
</script>

2. 通过异步API接口获取数据 #

让前端页面加载完成后，通过AJAX或Fetch调用后端的专属API接口来获取用户数据，这个接口需要做登录验证，确保只有当前登录用户能拿到自己的数据。这种方式下，数据不会出现在页面初始源码中。

后端新增API路由： #

router.route("/api/user/safe-profile")
 .get([isLoggedIn], function(req, res){
  // 返回经过过滤的安全用户数据
  res.json({
    username: req.loggedInUser.username,
    // 其他前端需要的非敏感字段
  });
 })

前端异步获取示例： #

<script>
 async function fetchUserInfo() {
  try {
    const response = await fetch("/api/user/safe-profile");
    if (!response.ok) throw new Error("Failed to fetch user data");
    const user = await response.json();
    // 在这里使用user数据
    console.log("User info:", user);
  } catch (err) {
    console.error("Error loading user data:", err);
  }
 }

 // 页面加载完成后调用
 window.addEventListener("load", fetchUserInfo);
</script>

3. 用HttpOnly Cookie存储敏感信息 #

如果你的tokens是用于后续请求的认证凭证，绝对不要把它传到前端JS里。可以把这类敏感数据存在HttpOnly Cookie中——这种Cookie无法被前端JS读取，但浏览器会自动在每次请求后端时带上它，后端可以通过req.cookies获取并验证。

后端设置HttpOnly Cookie示例： #

router.route("/build")
 .get([isLoggedIn, finishedRegistration], function(req, res){
  // 设置HttpOnly Cookie，前端JS无法访问
  res.cookie(
    "authToken", 
    req.loggedInUser.tokens, 
    { 
      httpOnly: true, 
      secure: process.env.NODE_ENV === "production", // 生产环境用HTTPS
      sameSite: "strict" // 防止CSRF攻击
    }
  );
  // 只传递非敏感数据到模板
  res.render("build", {
    username: req.loggedInUser.username
  });
 })

后续后端接口可以通过req.cookies.authToken获取凭证进行验证，完全不需要前端JS接触到敏感的token数据。

内容的提问来源于stack exchange，提问作者S. Gardner