AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Nginx作为静态资源web服务 - 控制浏览器缓存、防盗链

2022-06-08 318
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： . 浏览器缓存简介浏览器缓存遵循HTTP协议定义的缓存机制（如：Expires;Cache-control等）。当浏览器无缓存时，请求响应流程


一、控制浏览器缓存


1. 浏览器缓存简介

浏览器缓存遵循HTTP协议定义的缓存机制（如：Expires;Cache-control等）。


当浏览器无缓存时，请求响应流程

image.png


当浏览器有缓存时，请求响应流程

image.png


浏览器缓存校验过期机制

校验是否过期 Cache-Control(max-age)、Expires
协议中Etag头信息校验 Etag
Last-Modified头信息校验 Last-Modified


浏览器请求流程

image.png


2. Nginx控制浏览器缓存配置

Nginx通过添加Cache-Control(max-age)、Expires头信息的方式控制浏览器缓存。

ngx_http_headers_module


语法

Syntax:    expires [modified] time;
        expires epoch | max | off;
Default:    expires off;
Context:    http, server, location, if in location
本配置项可以控制HTTP响应中的“Expires”和“Cache-Control”头信息，（起到控制页面缓存的作用）。

“Expires”头信息中的过期时间为当前系统时间与您设定的 time 值时间的和。如果指定了 modified 参数，则过期时间为文件的最后修改时间与您设定的 time 值时间的和。

“Cache-Control”头信息的内容取决于指定 time 的符号。可以在time值中使用正数或负数。

当 time 为负数，“Cache-Control: no-cache”;

当 time 为正数或0，“Cache-Control: max-age=time”，单位是秒。

epoch 参数用于指定“Expires”的值为 1 January, 1970, 00:00:01 GMT。

max 参数用于指定“Expires”的值为 “Thu, 31 Dec 2037 23:55:55 GMT”，“Cache-Control” 的值为10 年。

off 参数令对“Expires” 和 “Cache-Control”响应头信息的添加或修改失效。


3. 应用实例


1. vim /etc/nginx/conf.d/static.conf

server

{
    location ~ .*\.(txt|xml)$ {
        # 设置过期时间为1天
        expires 1d;
        root /vagrant/doc;
    }
}

2. nginx -s reload 重新载入nginx配置文件


3. 创建 /vagrant/doc/hello.txt 文件


4. 通过curl访问 192.168.33.88/hello.txt，查看http响应头信息

[root/etc/nginx]# curl -I 192.168.33.88/hello.txt
HTTP/1.1 200 OK
Server: nginx/1.14.0
Date: Tue, 17 Jul 2018 07:12:11 GMT
Content-Type: text/plain
Content-Length: 12
Last-Modified: Tue, 17 Jul 2018 07:07:22 GMT
Connection: keep-alive
ETag: "5b4d95aa-c"
Expires: Wed, 18 Jul 2018 07:12:11 GMT
Cache-Control: max-age=86400
Accept-Ranges: bytes

重点查看 Expires 和 Cache-Control两个字段，可见，hello.txt 的缓存时间为1天。


二、防盗链


1. 基于http_refer防盗链配置模块


ngx_http_referer_module

语法

Syntax:    valid_referers none | blocked | server_names | string ...;

Default:    —

Context:    server, location


none：请求头中没有 Referer 字段 blocked：请求头中虽然存在“Referer”字段，但是它的值已经被防火墙或代理服务器删除；这些值是不以“ http://”或“ https://”开头的字符串; server_names：“Referer”请求头字段包含该服务器名称任意字符串：定义一个服务器名称和一个可选的URI前缀。服务器名开始或结尾可以有 “*” 。检查时，“Referer”字段中的服务器端口会被忽略。正则表达式：字符串必须以 ~ 开头，值得注意的是，正则表达式匹配的是在“ http://”或“ https://”之后的内容。

示例

valid_referers none blocked server_names *.example.com example.* www.example.org/galleries/ ~\.google\.;


2. 应用实例

1. vim conf.d/static.conf

server

{
    location ~ .*\.(txt|xml)$ {
        # 配置防盗链规则
        valid_referers none blocked 192.168.1.110 *.example.com example.* ~\.google\.;
# 如果不符合防盗链规则，则返回403
        if ($invalid_referer) {
            return 403;
        }
        root /vagrant/doc;
    }
}

2. nginx -s reload 重新载入nginx配置文件

3. 创建 /vagrant/doc/hello.txt 文件

  • vim /vagrant/a/a.txt
Hello world!

4. 使用 curl进行访问测试

  • 不带referer，可以正常访问
[root~]# curl -I http://127.0.0.1/hello.txt
HTTP/1.1 200 OK
Server: nginx/1.14.0
Date: Fri, 03 Aug 2018 01:34:12 GMT
Content-Type: text/plain
Content-Length: 12
Last-Modified: Tue, 17 Jul 2018 07:07:22 GMT
Connection: keep-alive
ETag: "5b4d95aa-c"
Accept-Ranges: bytes
[root~]# curl -e "http://www.baidu.com" -I http://127.0.0.1/hello.txt
HTTP/1.1 403 Forbidden
Server: nginx/1.14.0
Date: Fri, 03 Aug 2018 01:34:34 GMT
Content-Type: text/html
Content-Length: 169
Connection: keep-alive
[root~]# curl -e "http://192.168.1.110" -I http://127.0.0.1/hello.txt
HTTP/1.1 200 OK
Server: nginx/1.14.0
Date: Thu, 02 Aug 2018 11:31:51 GMT
Content-Type: text/plain
Content-Length: 12
Last-Modified: Tue, 17 Jul 2018 07:07:22 GMT
Connection: keep-alive
ETag: "5b4d95aa-c"
Accept-Ranges: bytes
  • referer以 example.开头或 .example.com 结尾，可以正常访问
[root~]# curl -e "http://www.example.com" -I http://127.0.0.1/hello.txt
HTTP/1.1 200 OK
Server: nginx/1.14.0
Date: Thu, 02 Aug 2018 11:33:47 GMT
Content-Type: text/plain
Content-Length: 12
Last-Modified: Tue, 17 Jul 2018 07:07:22 GMT
Connection: keep-alive
ETag: "5b4d95aa-c"
Accept-Ranges: bytes
[root~]# curl -e "http://example.baidu.com" -I http://127.0.0.1/hello.txt
HTTP/1.1 200 OK
Server: nginx/1.14.0
Date: Thu, 02 Aug 2018 11:33:53 GMT
Content-Type: text/plain
Content-Length: 12
Last-Modified: Tue, 17 Jul 2018 07:07:22 GMT
Connection: keep-alive
ETag: "5b4d95aa-c"
Accept-Ranges: bytes
[root~]# curl -e "http://192.168.1.110" -I http://127.0.0.1/hello.txt
HTTP/1.1 200 OK
Server: nginx/1.14.0
Date: Thu, 02 Aug 2018 11:31:51 GMT
Content-Type: text/plain
Content-Length: 12
Last-Modified: Tue, 17 Jul 2018 07:07:22 GMT
Connection: keep-alive
ETag: "5b4d95aa-c"
Accept-Ranges: bytes
[root~]# curl -e "http://google.com" -I http://127.0.0.1/hello.txt
HTTP/1.1 403 Forbidden
Server: nginx/1.14.0
Date: Thu, 02 Aug 2018 11:37:43 GMT
Content-Type: text/html
Content-Length: 169
Connection: keep-alive
[root~]# curl -e "http://www.google.com" -I http://127.0.0.1/hello.txt
HTTP/1.1 200 OK
Server: nginx/1.14.0
Date: Thu, 02 Aug 2018 11:37:50 GMT
Content-Type: text/plain
Content-Length: 12
Last-Modified: Tue, 17 Jul 2018 07:07:22 GMT
Connection: keep-alive
ETag: "5b4d95aa-c"
Accept-Ranges: bytes
文章标签：
开发工具
应用服务中间件
网络安全
nginx
缓存
关键词：
web服务
静态资源浏览器
Nginx Web
Nginx缓存
服务浏览器
1928256538856304
目录
相关文章
技术Look
|
2月前
|
开发框架 监控 安全
Windows Defender 导致 Web IIS 服务异常停止排查
某日凌晨IIS服务异常停止，经查为Windows Defender安全补丁KB2267602触发引擎更新，导致系统资源波动，进而引发应用池回收。确认非人为操作，系统无重启。通过分析日志与监控，定位原因为Defender更新后扫描加重负载。解决方案：将IIS及.NET相关路径添加至Defender排除列表，避免业务影响。
技术Look
416 116
程序员爱钓鱼
|
6月前
|
开发框架 安全 前端开发
Go Web开发框架实践：模板渲染与静态资源服务
Gin 是一个功能强大的 Go Web 框架，不仅适用于构建 API 服务，还支持 HTML 模板渲染和静态资源托管。它可以帮助开发者快速搭建中小型网站，并提供灵活的模板语法、自定义函数、静态文件映射等功能，同时兼容 Go 的 html/template 引擎，具备高效且安全的页面渲染能力。
程序员爱钓鱼
153 5
程序员爱钓鱼
|
6月前
|
开发框架 JSON 中间件
Go语言Web开发框架实践：使用 Gin 快速构建 Web 服务
Gin 是一个高效、轻量级的 Go 语言 Web 框架，支持中间件机制，非常适合开发 RESTful API。本文从安装到进阶技巧全面解析 Gin 的使用：快速入门示例（Hello Gin）、定义 RESTful 用户服务（增删改查接口实现），以及推荐实践如参数校验、中间件和路由分组等。通过对比标准库 `net/http`，Gin 提供更简洁灵活的开发体验。此外，还推荐了 GORM、Viper、Zap 等配合使用的工具库，助力高效开发。
程序员爱钓鱼
973 2
蓝易云
|
7月前
|
存储 应用服务中间件 nginx
在使用Nginx之后，如何在web应用中获取用户IP以及相关原理
但总的来说，通过理解网络通信的基础知识，了解http协议以及nginx的工作方式，我们已经能在大多数情况下准确地获取用户的真实IP地址了，在调试问题或者记录日志时会起到很大的帮助。
蓝易云
377 37
蓝易云
|
8月前
|
中间件 Go
Golang | Gin：net/http与Gin启动web服务的简单比较
总的来说，`net/http`和 `Gin`都是优秀的库，它们各有优缺点。你应该根据你的需求和经验来选择最适合你的工具。希望这个比较可以帮助你做出决策。
蓝易云
387 35
奔跑的数据
|
10月前
|
数据采集 Web App开发 API
FastAPI与Selenium：打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
本文介绍了如何使用FastAPI和Selenium搭建RESTful接口，访问免版权图片网站Pixabay并采集图片及其描述信息。通过配置代理IP、User-Agent和Cookie，提高爬虫的稳定性和防封禁能力。环境依赖包括FastAPI、Uvicorn和Selenium等库。代码示例展示了完整的实现过程，涵盖代理设置、浏览器模拟及数据提取，并提供了详细的中文注释。适用于需要高效、稳定的Web数据抓取服务的开发者。
奔跑的数据
617 15
FastAPI与Selenium：打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
Paraverse平行云
|
11月前
|
Web App开发 编解码 vr&ar
使用Web浏览器访问UE应用的最佳实践
在3D/XR应用开发中，尤其是基于UE（虚幻引擎）开发的高精度场景，传统终端因硬件局限难以流畅运行高帧率、复杂效果的三维应用。实时云渲染技术，将渲染任务转移至云端服务器，降低终端硬件要求，确保用户获得流畅体验。具备弹性扩展、优化传输协议、跨平台支持和安全性等优势，适用于多种终端和场景，特别集成像素流送技术，帮助UE开发者实现低代码上云操作，简化部署流程，保留UE引擎的强大开发能力，确保画面精美且终端轻量化。
Paraverse平行云
494 17
使用Web浏览器访问UE应用的最佳实践
卓伊凡
|
10月前
|
网络协议 Java Shell
java spring 项目若依框架启动失败，启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
java spring 项目若依框架启动失败，启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
卓伊凡
692 7
修己xj
|
人工智能 前端开发 计算机视觉
Inpaint-Web：纯浏览器端实现的开源图像处理工具
在刷短视频时，常看到情侣在景区拍照被路人“抢镜”，男朋友用手机将路人“P”掉，既贴心又有趣。最近我发现了一个纯前端实现的开源项目——inpaint-web，可在浏览器端删除照片中的部分内容，非常酷。该项目基于 WebGPU 和 WASM 技术，支持图像修复与放大，已在 GitHub 上获得 5.1k Star。项目地址：[GitHub](https://github.com/lxfater/inpaint-web)。
修己xj
769 3
Inpaint-Web：纯浏览器端实现的开源图像处理工具
jsjsjjs
|
存储 缓存 前端开发
Web端IM聊天消息该不该用浏览器本地存储？一文即懂！
鉴于目前浏览器技术的进步（主要是HTML5的普及），在Web网页端IM聊天应用的技术选型阶段，很多开发者都会纠结到底该不该像原生移动端IM那样将聊天记录缓存在浏览器的本地，还是像传统Web端即时通讯那样继续存储在服务端？本文将为你简洁明了地讲清楚浏览器本地存储技术（Web Storage），然后你就知道到底该怎么选择了。
jsjsjjs
349 1

热门文章

最新文章

  • 1
    Windows Defender 导致 Web IIS 服务异常停止排查
  • 2
    百宝箱开放平台 ✖️ Web SDK
  • 3
    Burp Suite Professional 2025.10 for Windows x64 - 领先的 Web 渗透测试软件
  • 4
    vLLM 性能优化实战：批处理、量化与缓存配置方案
  • 5
    PHP 程序员如何为 AI 浏览器（如 ChatGPT Atlas）优化网站
  • 6
    Supervisor 、Supervisord-Monitor 的web统一管理安装、配置、使用
  • 7
    通过Web安全工具Burp suite找出网站中的XSS漏洞实战(二)
  • 8
    从零打造一个Web地图引擎
  • 9
    VS 远程调试 Azure Web App
  • 10
    基于纯Java代码的Spring容器和Web容器零配置的思考和实现（2） - 静态资源、视图和消息器
  • 1
    技术指南：如何把docsify项目部署到基于CentOS系统的Nginx中。
    337
  • 2
    Nginx配置与命令
    801
  • 3
    将下载的Nginx证书转换为Tomcat证书格式
    349
  • 4
    构建包含 nginx_upstream_check_module 的轻量级 Nginx 1.21.5 Docker 镜像
    632
  • 5
    Centos 8.0中Nginx配置文件和https正书添加配置
    767
  • 6
    在使用Nginx之后，如何在web应用中获取用户IP以及相关原理
    377
  • 7
    在 Ubuntu 上安装 Nginx
    836
  • 8
    LVS-DR模式、keepalived、Nginx与Tomcat合作，打造动静分离，高效负载均衡与高可用性
    308
  • 9
    Tomcat与Nginx的负载均衡与动静分离技巧
    222
  • 10
    Tomcat的负载均衡和动静分离（与nginx联动）
    242

    • 相关课程

    更多
  • Python Web开发基础
  • Java Web开发系列课程 - Spring框架入门
  • 企业Web常用架构LAMP-LNMP实战
  • 高校精品课-西安交通大学-Web 编程技术
  • Java Web项目实战 - 图书商城
  • Java面试疑难点解析 - Java Web开发

    • 相关电子书

    更多
  • Web应用系统性能优化
  • 高性能Web架构之缓存体系
  • PWA:移动Web的现在与未来
    • 下一篇
    安全设备篇——WAF