Nginx 防盗链中保护前端资源怎么写-Nginx-PHP中文网

Nginx 通过 valid_referers 限制 referer 并配合 if 判断 $invalid_referer 实现前端资源防盗链，需按后缀或目录匹配 JS/CSS/图片/字体等静态资源，排除 HTML，白名单包含 none、blocked、server_names 及可信域名，返回 403 或重定向至占位图，并测试验证。

nginx 防盗链中保护前端资源怎么写

在 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 变量做判断，推荐两种常用方式：

精英前端设计-专业版

企业级前端设计系统，支持多页面应用、React/Vue组件、品牌一致性与高级动效编排。

下载

返回 403 禁止访问：if ($invalid_referer) { return 403; }
返回透明占位图（更友好）：if ($invalid_referer) { rewrite ^/.*\.(png|jpg|gif)$ /img/forbidden.png last; }（需确保该图片本身不被防盗链）
注意：if 在 location 中使用是安全的，但避免在 server 级别大量使用；不建议用 rewrite ... break 替代 return，易引发循环