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

简介: . 浏览器缓存简介浏览器缓存遵循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

重点查看 ExpiresCache-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
相关文章
|
11天前
|
数据采集 Web App开发 API
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
本文介绍了如何使用FastAPI和Selenium搭建RESTful接口,访问免版权图片网站Pixabay并采集图片及其描述信息。通过配置代理IP、User-Agent和Cookie,提高爬虫的稳定性和防封禁能力。环境依赖包括FastAPI、Uvicorn和Selenium等库。代码示例展示了完整的实现过程,涵盖代理设置、浏览器模拟及数据提取,并提供了详细的中文注释。适用于需要高效、稳定的Web数据抓取服务的开发者。
52 15
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
|
6天前
|
网络协议 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-优雅草卓伊凡解决方案
29 7
|
1月前
|
Web App开发 编解码 vr&ar
使用Web浏览器访问UE应用的最佳实践
在3D/XR应用开发中,尤其是基于UE(虚幻引擎)开发的高精度场景,传统终端因硬件局限难以流畅运行高帧率、复杂效果的三维应用。实时云渲染技术,将渲染任务转移至云端服务器,降低终端硬件要求,确保用户获得流畅体验。具备弹性扩展、优化传输协议、跨平台支持和安全性等优势,适用于多种终端和场景,特别集成像素流送技术,帮助UE开发者实现低代码上云操作,简化部署流程,保留UE引擎的强大开发能力,确保画面精美且终端轻量化。
使用Web浏览器访问UE应用的最佳实践
|
4月前
|
XML JSON 安全
Web服务是通过标准化的通信协议和数据格式
【10月更文挑战第18天】Web服务是通过标准化的通信协议和数据格式
209 69
|
3月前
|
人工智能 前端开发 计算机视觉
Inpaint-Web:纯浏览器端实现的开源图像处理工具
在刷短视频时,常看到情侣在景区拍照被路人“抢镜”,男朋友用手机将路人“P”掉,既贴心又有趣。最近我发现了一个纯前端实现的开源项目——inpaint-web,可在浏览器端删除照片中的部分内容,非常酷。该项目基于 WebGPU 和 WASM 技术,支持图像修复与放大,已在 GitHub 上获得 5.1k Star。项目地址:[GitHub](https://github.com/lxfater/inpaint-web)。
98 3
 Inpaint-Web:纯浏览器端实现的开源图像处理工具
|
3月前
|
存储 缓存 前端开发
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
鉴于目前浏览器技术的进步(主要是HTML5的普及),在Web网页端IM聊天应用的技术选型阶段,很多开发者都会纠结到底该不该像原生移动端IM那样将聊天记录缓存在浏览器的本地,还是像传统Web端即时通讯那样继续存储在服务端?本文将为你简洁明了地讲清楚浏览器本地存储技术(Web Storage),然后你就知道到底该怎么选择了。
56 1
|
3月前
|
负载均衡 前端开发 JavaScript
Nginx 代理多服务
以上是 Nginx 代理多服务的几种常见方式,在实际应用中,可以根据具体的业务需求和系统架构选择合适的代理方式,并结合其他 Nginx 的功能和配置来优化和完善系统的性能和功能。
|
3月前
|
Go UED
Go Web服务中如何优雅平滑重启?
在生产环境中,服务升级时如何确保不中断当前请求并应用新代码是一个挑战。本文介绍了如何使用 Go 语言的 `endless` 包实现服务的优雅重启,确保在不停止服务的情况下完成无缝升级。通过示例代码和测试步骤,详细展示了 `endless` 包的工作原理和实际应用。
78 3
|
3月前
|
JSON Go UED
Go Web服务中如何优雅关机?
在构建 Web 服务时,优雅关机是一个关键的技术点,它确保服务关闭时所有正在处理的请求都能顺利完成。本文通过一个简单的 Go 语言示例,展示了如何使用 Gin 框架实现优雅关机。通过捕获系统信号和使用 `http.Server` 的 `Shutdown` 方法,我们可以在服务关闭前等待所有请求处理完毕,从而提升用户体验,避免数据丢失或不一致。
47 1
|
3月前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。