Nginx 通过 valid_referers 限制 referer 并配合 if 判断 $invalid_referer 实现前端资源防盗链，需按后缀或目录匹配 JS/CSS/图片/字体等静态资源，排除 HTML，白名单包含 none、blocked、server_names 及可信域名，返回 403 或重定向至占位图，并测试验证。
在 Nginx 中防止前端资源（如 JS、CSS、图片、字体等）被其他网站盗用，核心是通过 valid_referers 指令限制请求来源，再配合 if 和 return 或 rewrite 实现拦截或重定向。
明确要保护的资源类型
前端静态资源通常放在固定路径下（如 /static/、/assets/、/js/、/img/），建议按目录或后缀统一控制：
- 匹配常见前端资源后缀：
.js、.css、.png、.jpg、.gif、.woff2、.svg等 - 避免误伤：不要对 HTML 文件做 referer 限制（否则影响 SEO 和直接访问）
- 注意：字体文件（
.woff、.ttf）常被跨站引用，需单独纳入保护范围
配置 valid_referers 白名单
在 server 或 location 块中定义合法来源，支持域名、通配符和正则：
valid_referers none blocked server_names *.example.com example.com;-
none：允许无 Referer 的请求（如直接输入 URL、HTTPS 页面跳转到 HTTP 资源时可能丢失） -
blocked：允许 Referer 被防火墙或隐私插件屏蔽后的请求（Referer 存在但被标记为无效） -
server_names：匹配当前 server_name 配置的域名 - 显式写入可信域名，如
myapp.com、www.myapp.com，支持*.myapp.com
拦截非法请求并返回合适响应
结合 $invalid_referer 变量做判断，推荐两种常用方式：
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
立即学习“前端免费学习笔记（深入）”；
- 返回 403 禁止访问：
if ($invalid_referer) { return 403; } - 返回透明占位图（更友好）：
if ($invalid_referer) { rewrite ^/.*\.(png|jpg|gif)$ /img/forbidden.png last; }（需确保该图片本身不被防盗链） - 注意：
if在 location 中使用是安全的，但避免在 server 级别大量使用；不建议用rewrite ... break替代return，易引发循环
排除特殊情况，避免误拦截
真实环境中需绕过一些合理但无 Referer 或 Referer 异常的请求：
- 本地开发调试（
localhost、127.0.0.1）可加进白名单：valid_referers ... localhost 127.0.0.1; - 微信、QQ 内置浏览器常清 Referer，若业务依赖这些渠道，可放宽策略或结合 User-Agent 临时放行（不推荐长期依赖 UA）
- CDN 回源请求可能带 CDN 域名作为 Referer，需把 CDN 域名加入白名单
- API 接口或 HTML 页面本身不应加 referer 限制，只作用于静态资源 location
不复杂但容易忽略：配置完务必用 curl 测试，例如 curl -H "Referer: https://evil.com" https://yoursite.com/js/app.js，确认返回 403 或预期响应。
