专栏首页T客来了Nginx专题-静态资源

Nginx专题-静态资源

章节目录

  • 静态资源分类
  • CDN场景
  • nginx作为静态资资源web服务_配置语法
  • 浏览器缓存
  • 服务器端设置浏览器缓存过期实践
  • 跨站访问

静态资源分类

静态资源:非服务器动态运行生成的文件

类型

种类

浏览器端渲染

html、js、css

图片

jpeg、gif、png

视频

flv、mpeg

文件

txt、excel

CDN场景

如上图所示,用户请求通过DNS解析技术,将用户请求定位到分发层 代理服务器nginx上。

nginx作为静态资资源web服务_配置语法

配置语法-tcp_nopush

要求实时性不高的场景下使用,不着急返回给客户端
语法:tcp_nopush on | off;
默认配置:tcp_nopush  off;
可配置模块:http、server、location
nopush:整体处理,资源准备好之后一起发送给用户

作用:在sendfile开启状态下,提高网络包的传输效率

配置语法-tcp_nodelay

要求实时性比较高的场景下使用
语法:tcp_nodelay on | off;
默认配置:tcp_nodelay  on;
可配置模块:http、server、location

作用:keepalive连接下,提高网络包的传输实时性

配置语法-压缩

解压(浏览器端)---------------->压缩(nginx静态资源服务端)
语法: gzip_comp_level level;
默认配置:gzip_comp_level 1;
可配置模块:http、server、location

压缩模块扩展
http_gzip_static_module-支持预读gzip功能

作用:较少网络资源的消耗,提高静态资源快速响应的能力,提高服务端的处理效率

浏览器缓存

http协议定义的缓存机制

如:Expires;cache-control等

校验过期机制

校验是否过期

Expires-1.0、Cache-Control(max-age)-1.1版本

协议中Etag头信息校验

Etag

Last-Modified头信息校验

Last-Modified

详细解释:

1.cache-control-(本地缓存是否失效验证阶段):
客户端缓存的文件先会检查原先请求头中的cache-control是否已经超过可缓存 期限,超过则过期
2.Last-Modified 1s精度
跟了时间,客户端请求过程中请求头中携带Last-Modified 如果跟服务器端文件的last-Modified相同则返回304,如果不相同则服务端重新返回给客户端。
3.Etag 是对服务器文件的一段编码,服务器文件变化后Etag会发生变化,
如果客户端传递过来的Etag与服务器端不一致,则响应最新的文件并在响应之
前进行缓存协商,返回对应的缓存控制信息给浏览器。

浏览器缓存原理示意图

服务器端设置浏览器缓存过期实践

Response添加Cache-Control、Expries头

语法:expries time;
默认:expries off;//默认是关闭的
可配置项:http、server、location、if in location

配置实践

1. touch /etc/nginx/conf.d/static_server.conf
2. vi  /etc/nginx/conf.d/static_server.conf
3. 配置如下:
server {
   listen 80;
   server_name eshop-cache03;

   location ~ .*\.(html|htm)$ {
     expires 24h;//添加时间
     root /opt/app/code;
   }
}

浏览器强制设置请求头Cache-Control 保证随时跟服务器交互

跨站访问

什么是跨站访问

即浏览器访问统一个页面www.a.com,利用ajax请求www.b.com

为什么浏览器禁止跨域访问不安全,容易出现csrf攻击! 如下图所示:

跨站访问详解

举例说明:
假如一家银行用以执行转账操作的URL地址如下: [http://www.examplebank.com/withdraw?account=AccoutName&amount=1000&for=PayeeName](http://www.examplebank.com/withdraw?account=AccoutName&amount=1000&for=PayeeName)

那么,一个恶意攻击者可以在另一个网站上放置如下代码: <img src="[http://www.examplebank.com/withdraw?account=Alice&amount=1000&for=Badman](http://www.examplebank.com/withdraw?account=Alice&amount=1000&for=Badman)">

如果有账户名为Alice的用户访问了恶意站点,而她之前刚访问过银行不久,登录信息尚未过期,那么她就会损失1000资金。

这种恶意的网址可以有很多种形式,藏身于网页中的许多地方。此外,攻击者也不需要控制放置恶意网址的网站。例如他可以将这种地址藏在论坛,博客等任何[用户生成内容](https://zh.wikipedia.org/wiki/%E7%94%A8%E6%88%B7%E7%94%9F%E6%88%90%E5%86%85%E5%AE%B9 "用户生成内容")的网站中。这意味着**如果服务器端没有合适的防御措施的话,用户即使访问熟悉的可信网站也有受攻击的危险**。

透过例子能够看出,攻击者并不能通过CSRF攻击来直接获取用户的账户控制权,也不能直接窃取用户的任何信息。他们能做到的,是**欺骗用户浏览器,让其以用户的名义执行操作**。

nginx设置允许跨站访问假如我们使用nginx做了动静分离,动态数据都需要通过ajax请求数据接口来获取,那么浏览器默认的同源策略会组织我们去成功请求数据接口。比如我们网站A网页域名前缀是www.abc.com、数据接口网站前缀是 api.abc.com .那么这个就属于跨站访问了。如何通过nginx服务器设置,使得api.abc.com 允许跨站访问呢?

配置如下:
语法:add_header name value [always];
默认:---
可配置上下文:http、server、location

浏览器端是否允许跨站访问是需要验证response 中的Access-Control-Allow-Origin跨站访问实战

配置如下:
server {
   listen 80;
   server_name  api.abc.com;
   location ~ .*\.(html|htm)$ {
       add_header Access-Control-Allow-Origin http://www.abc.com;
       add_header Access-Control-Allow-Methods GET,POST,DELET,PUT,OPTIONS;
      root /opt/app/code;
   }
}

浏览器判断服务器返回头中返回的Access-Control-Allow-Origin 字段是否包含www.abc.com ,如若包含,正确返回相关响应数据。

本文分享自微信公众号 - T客来了(ltdo11),作者:ltdo111

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 008.Nginx静态资源

    Nginx作为静态资源Web服务器部署配置, 传输非常高效, 常常用于静态资源处理,请求以及动静分离。通常非服务器动态运行生成的文件属于静态资源。

    木二
  • 搭建nginx静态资源站

    上面的配置文件中 root和alias 指令配置完之后实现的效果是一样的,其实用的区别在于:

    码缘
  • 06 . Nginx静态资源缓存

    常见_youmen
  • Nginx 搭建静态资源服务

      首先将静态的 web 上传到服务器之后,在 /nginx/conf 目录中修改 nginx.conf 文件,参考如下,修改完毕后进入 /nginx/sbin...

    Demo_Null
  • nginx配置静态资源gzip压缩

    用户1437675
  • 静态资源配置(静态资源被拦截)

    请注意,本文编写于 331 天前,最后修改于 142 天前,其中某些信息可能已经过时。

    乐心湖
  • 静态资源配置的问题

    spring boot 的项目是将静态资源打包到.jar 的文件包中, 项目中有碰到需要使用外部静态资源的情况,使用外部资源的一直老出问题,查了google 后...

    潇洒
  • SpringBoot【静态资源】

      SpringBoot中的静态资源的存放路径和我们前面的web项目还是有些区别的,本文我们来介绍下SpringBoot中的静态资源。   springboo...

    用户4919348
  • 【NGINX入门】2.Nginx搭建静态资源web服务器

    本文讲解Nginx安装后,nginx搭建静态资源web服务器需要的配置内容包括location,gzip,带宽限速等配置。

    辉哥
  • 使用 Nginx 搭建静态资源 web 服务器

    在搭建网站的时候,往往会加载很多的图片,如果都从 Tomcat 服务器来获取静态资源,这样会增加服务器的负载,使得服务器运行 速度非常慢,这时可以使用 Ngin...

    武培轩
  • NFS服务挂掉导致的Nginx异常

    事故现象: 下午14.52分,企业微信出现如下所示zabbix报错,显示ERP访问失败

    说实话有点小帅
  • Nginx动态修改响应内容,避免静态资源404

    nginx中经常会因为业务需求,需要通过location配置不同的子目录,访问不同的后端,如下

    李俊鹏
  • Spring Boot2.0 静态资源被拦截问题

    在Spring Boot2.0+的版本中,只要用户自定义了拦截器,则静态资源会被拦截。但是在spring1.0+的版本中,是不会拦截静态资源的。

    yunlgonn
  • SpringMVC访问静态资源

    http://www.cnblogs.com/yank/p/4477204.html

    bear_fish
  • Vite2 静态资源处理

    例如,在开发阶段,imgUrl将是/img.png,而在生产版本中,它将变成/assets/img.2d8efhg.png。

    公众号---人生代码
  • Vue引入静态资源

    1、在js被导入或者在vue的template以及css中通过相对路径引入的,这样会被webpack处理

    苦咖啡
  • SpringMVC-处理静态资源

    若将DispatcherServlet 请求映射配置为/,则SpringMVC 将捕获WEB容器的所有请求,包括静态资源的请求,SpringMVC会将他们当成一...

    桑鱼
  • Flask配置静态资源

    1. 简介 flask可对实例、配置模板文件路径、静态文路径进行配置 Flask(import_name, static_url_path=None, st...

    菲宇
  • CDN静态资源加速

    静态资源访问的关键点是就近访问。可以考虑在业务服务器的上层加一层特殊缓存,即CDN。

    WindCoder

扫码关注云+社区

领取腾讯云代金券