如何通过.htaccess禁止直接访问JS/CSS文件但允许HTML调用

你的问题出在原规则仅允许本地IP访问，而浏览器从HTML页面加载资源时，请求是客户端发起的，并非服务器本地IP，所以被规则拦截了。正确的做法是通过检查请求的Referer来源来区分直接访问和页面引用的请求。

替换后的.htaccess规则 #

将原规则替换为以下内容（根据你的实际域名修改）：

RewriteEngine On
# 禁止直接访问JS、CSS文件，仅允许本站页面引用
RewriteCond %{REQUEST_FILENAME} \.(js|css)$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?yourdomain\.com/ [NC]
RewriteRule ^ - [F,L]

规则说明 #

• RewriteEngine On：开启Apache的URL重写引擎
• 第一个RewriteCond：匹配所有后缀为.js或.css的请求（[NC]表示不区分大小写）
• 第二个RewriteCond：判断请求的Referer（来源页面）不是你的网站域名（将yourdomain.com替换为实际域名，(www\.)?兼容带www和不带www的情况）
• RewriteRule ^ - [F,L]：当以上两个条件都满足时，返回403 Forbidden（F标记）并停止后续规则（L标记）

本地开发环境适配 #

如果是在本地localhost开发，将规则修改为：

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} \.(js|css)$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://localhost(:\d+)?/ [NC]
RewriteRule ^ - [F,L]

其中(:\d+)?兼容带端口号的本地服务（比如localhost:8080）

注意事项 #

• 确保你的Apache服务器已启用mod_rewrite模块（大多数主机默认开启，若未开启需在httpd.conf中启用LoadModule rewrite_module modules/mod_rewrite.so）
• 少数浏览器或代理可能会屏蔽Referer，这种极端情况会导致资源无法加载，但正常访问场景下不会出现问题

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