如何阻止公众访问Apache上Angular13根目录JS/CSS且网站正常运行？

你的问题出在之前的规则完全禁止了所有对JS/CSS文件的请求，包括网站自身页面加载这些资源的请求，自然导致网站无法运行。要实现需求，需要区分「用户直接在地址栏输入URL访问」和「网站页面正常加载资源」这两种场景。

方法一：利用Apache mod_rewrite检查请求来源（推荐） #

通过检查请求的Referer头，只允许来自你自己网站的请求访问JS/CSS文件，拒绝外部直接访问。

步骤： #

1. 确保Apache启用了mod_rewrite模块：

   sudo dnf install mod_rewrite
   sudo systemctl restart httpd
   

   （如果已经启用，可跳过此步骤）

2. 在你的Apache虚拟主机配置文件（或网站根目录的.htaccess文件）中添加以下规则：

   RewriteEngine On
   
   # 替换成你的实际域名，支持http/https
   RewriteCond %{HTTP_REFERER} !^https?://your-domain.com/ [NC]
   # 允许无Referer的特殊场景（可选，无需可删除此行）
   RewriteCond %{HTTP_REFERER} !^$
   # 拒绝直接访问根目录下的JS和CSS文件
   RewriteRule ^(.*\.js|.*\.css)$ - [F,L]
   

   • [F]：返回403 Forbidden状态码
   • [L]：停止处理后续规则
   • [NC]：忽略大小写匹配

方法二：调整Angular打包结构，隔离静态资源 #

如果不想依赖Referer头，可以修改Angular的打包配置，把静态资源放到独立子目录，再限制该目录的直接访问。

步骤： #

1. 修改Angular项目的angular.json配置，将静态资源输出到子目录（比如/static）：

   "build": {
     "options": {
       "outputPath": "dist/your-project",
       "assets": ["src/favicon.ico", "src/assets"],
       "styles": ["src/styles.css"]
     },
     "configurations": {
       "production": {
         "outputHashing": "all",
         "assets": [
           {
             "glob": "**/*",
             "input": "src/assets",
             "output": "/static/assets/"
           }
         ],
         "styles": ["src/styles.css"]
       }
     }
   }
   

2. 重新打包生产环境项目：

   ng build --prod
   

3. 在Apache配置中添加规则，限制/static目录的直接访问：

   <Directory "/var/www/html/static">
       # 禁止目录浏览
       Options -Indexes
       # 仅允许本站请求访问该目录资源
       RewriteEngine On
       RewriteCond %{HTTP_REFERER} !^https?://your-domain.com/ [NC]
       RewriteCond %{HTTP_REFERER} !^$
       RewriteRule ^(.*)$ - [F,L]
   </Directory>
   

注意事项 #

• Referer头存在被伪造的可能，这种方法仅能阻止普通用户的直接访问，无法应对针对性的恶意请求。
• 如果使用.htaccess，需确保Apache配置中设置了AllowOverride All以允许该文件生效。
• 修改Apache配置后，记得重启服务：sudo systemctl restart httpd

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