如何禁止直接访问ExpressJS中Webpack生成的公开bundle文件？

要解决这个问题，核心思路是从服务器层面限制对/js/bundle.js的直接请求——目前你的服务器把public/js设为静态资源目录，默认允许任何HTTP请求访问其中的文件，所以才会出现访客能直接打开example.com/js/bundle.js的情况。下面是几种常见服务器的具体实现方案：

1. Nginx 配置方案 #

如果你的网站用Nginx做服务器，可以通过检查请求的Referer头，只允许来自你自身域名的请求访问该文件：

location /js/bundle.js {
    # 替换成你的实际域名，支持二级域名
    valid_referers example.com *.example.com;
    if ($invalid_referer) {
        return 403; # 返回禁止访问的状态码
    }
}

小提醒：Referer头存在被篡改的可能，这是基础防护手段，能挡住大部分普通的直接访问场景。

2. Apache 配置方案 #

对于Apache服务器，可以在项目根目录的.htaccess文件（或主配置文件）中添加重写规则：

RewriteEngine On
# 拦截非本站来源的请求
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?example.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule ^js/bundle.js$ - [F]

这条规则会给不符合条件的请求返回403 Forbidden。

3. Node.js/Express 配置方案 #

如果你的后端是Express框架，可以在静态资源中间件之前添加自定义拦截逻辑：

app.use('/js/bundle.js', (req, res, next) => {
    const referer = req.get('Referer');
    // 验证请求是否来自你的域名
    if (!referer || !referer.includes('example.com')) {
        return res.status(403).send('Forbidden');
    }
    next();
});

// 挂载静态资源中间件（放在拦截逻辑之后）
app.use(express.static('public'));

更严格的防护（可选） #

如果需要更高安全等级的限制，可以尝试：

• 给bundle文件添加动态签名：每次加载页面时生成临时签名，请求bundle时携带该签名，服务器验证通过才返回文件。
• 将bundle文件移至非公开目录，通过后端接口动态返回文件内容，同时验证请求的合法性（比如检查用户会话、专属Cookie等）。

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