Express框架中如何禁止用户直接访问/style路由获取样式文件？

核心逻辑 #

通过校验HTTP请求的Referer请求头识别访问来源：

• 样式文件被你的站点页面正常引入时，请求的Referer值会是你的站点域名
• 用户直接在地址栏输入路由访问时，Referer为空或不属于你的站点域名，此时直接返回禁止访问错误即可

代码实现 #

替换你原有的/style路由代码即可：

app.get("/style", (req, res) => {
  // 替换为你自己的站点实际域名，有多个允许域名可改成数组遍历判断
  const allowedSite = "https://your-website-domain.com";
  const requestReferer = req.get("Referer");

  if (requestReferer && requestReferer.startsWith(allowedSite)) {
    res.sendFile(__dirname + "/assets/style.css");
  } else {
    // 返回403禁止访问状态码
    res.sendStatus(403);
  }
})

注意事项 #

• 注意HTTP标准中该请求头的拼写为Referer，不要误写为Referrer，否则会读取不到请求头值
• 该方案可以拦截普通用户的直接访问，Referer头存在被伪造的可能，如果需要更高的安全等级，可以配合接口签名、动态生成临时CSS路由等方案实现更严格的防护

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