Apache如何禁止直接访问指定文件且不影响Angular站点正常加载

问题原因 #

你当前配置的问题是规则直接拦截了所有指向configuration.json的HTTP请求，而Angular前端代码运行在用户浏览器中，其发起的配置文件请求和用户直接在地址栏输入URL发起的请求，从服务器视角看本质都是客户端HTTP请求，所以会被无差别拦截。

修正方案 #

我们可以根据两个文件的使用特性分别处理：

• package.json是项目开发阶段的依赖配置文件，线上前端运行完全不需要请求该文件，可直接全局拦截，无任何副作用
• configuration.json是前端运行必须加载的资源，无法完全禁止HTTP访问，但可以通过校验请求的Referer头，拦截普通用户直接在地址栏输入URL的访问场景：前端代码发起请求时Referer会携带你的站点域名，直接访问时Referer为空或不匹配站点域名

修改后的.htaccess配置 #

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /myapp/
    # 修正原配置中符号和参数之间缺失空格的问题
    RewriteRule ^index.html$ - [L]
    RewriteRule ^refresh.html$ - [L]

    # 全局禁止访问package.json
    RewriteRule (^|/)package.json(/|$) - [F,L]

    # 仅允许站点内请求访问configuration.json，拦截直接访问
    # 请将规则中的「你的域名.com」替换为实际的站点域名
    RewriteCond %{HTTP_REFERER} !^https?://(www\.)?你的域名\.com/myapp/ [NC]
    RewriteRule (^|/)configuration.json(/|$) - [F,L]

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . index.html [L]
</IfModule>

额外安全建议 #

Referer头存在被篡改的可能，如果你的configuration.json中存储了高度敏感的内容，建议调整架构：

• 将配置内容改为后端接口动态返回
• 接口增加用户登录态校验，仅允许已授权的请求获取配置内容

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