是发起请求方主动带起的一个头，是代表即便缓存过期，但是在max-stale这个时间内还可以使用过期的缓存，而不需要愿服务器请求新的内容
#### 重新验证
* must-revalidate 如果max-age设置的内容过期，必须要向服务器请求重新获取数据验证内容是否过期
* proxy-revalidate 主要用在缓存服务器，指定缓存服务器在过期后重新从原服务器获取，不能从本地获取
#### 其它
* no-store 本地和代理服务器都不可以存储这个缓存，永远都要从服务器拿body新的内容使用
* no-transform 主要用于proxy服务器，告诉代理服务器不要随意改动返回的内容
#### 缓存cache-control示例
* 先思考两个问题?
1. 在页面中引入静态资源文件，为什么静态资源文件改变后，再次发起请求还是之前的内容，没有变化呢？
2. 在使用webpack等一些打包工具时，为什么要加上一串hash码？
* cache-control.html
```html
cache-control
```
* cache-control.js
浏览器输入http://localhost:3010/ 加载cache-control.html文件，该文件会请求http://localhost:3010/script.js，在url等于```/script.js```设置cache-control的max-age进行浏览器缓存
```js
const http = require('http');
const fs = require('fs');
const port = 3010;
http.createServer((request, response) => {
console.log('request url: ', request.url);
if (request.url === '/') {
const html = fs.readFileSync('./example/cache/cache-control.html', 'utf-8');
response.writeHead(200, {
'Content-Type': 'text/html',
});
response.end(html);
} else if (request.url === '/script.js') {
response.writeHead(200, {
'Content-Type': 'text/javascript',
'Cache-Control': 'max-age=200'
});
response.end("console.log('script load')");
}
}).listen(port);
console.log('server listening on port ', port);
```
* 第一次运行
浏览器运行结果,没有什么问题，正常响应
控制台运行结果
* 修改cache-control.js返回值
```js
...
response.writeHead(200, {
'Content-Type': 'text/javascript',
'Cache-Control': 'max-age=200'
});
response.end("console.log('script load ！！！')");
...
```
* 中断上次程序，第二次运行
浏览器运营结果
第二次运行，从memory cahce读取，浏览器控制台并没有打印修改过的内容
控制台运营结果
指请求了``` / ``` 并没有请求 ``` /script.js ```
以上结果浏览器并没有返回给我们服务端修改的结果，这是为什么呢？是因为我们请求的url```/script.js```没有变，那么浏览器就不会经过服务端的验证，会直接从客户端缓存去读，就会导致一个问题，我们的js静态资源更新之后，不会立即更新到我们的客户端，这也是前端开发中常见的一个问题，我们是希望浏览器去缓存我们的静态资源文件（js、css、img等）我们也不希望服务端内容更新了之后客户端还是请求的缓存的资源， 解决办法也就是我们在做js构建流程时，把打包完成的js文件名上根据它内容hash值加上一串hash码，这样你的js文件或者css文件等内容不变，这样生成的hash码就不会变，反映到页面上就是你的url没有变，如果你的文件内容有变化那么嵌入到页面的文件url就会发生变化，这样就可以达到一个更新缓存的目的，这也是目前前端来说比较常见的一个静态资源方案。
#### 资源验证
如果使用cahce-control浏览器发起一个请求到缓存查找的一个过程流程图
##### 验证头
* Last-Modified 上次修改时间，配合If-Modified-Since或者If-Unmo dified-Since使用，对比上次修改时间以验证资源是否可用
* Etag 数据签名，配合If-Match或者If-Non-Match使用，对比资源的签名判断是否使用缓存
## cookie
通过Set-Cookie设置，下次请求会自动带上，键值对形式可以设置多个
#### cookie属性
* max-age或expires设置过期时间
* Secure只在https发送
* httpOnly无法通过document.cookie访问
#### 示例
* cookie.html
控制台打印输出cookie信息
```html
Cookie
```
* cookie.js
设置两个cookie，a=111 设置过期时间2秒钟，b=222设置httpOnly
```js
const http = require('http');
const fs = require('fs');
const port = 3010;
http.createServer((request, response) => {
console.log('request url: ', request.url);
if (request.url === '/') {
const html = fs.readFileSync('./cookie.html', 'utf-8');
response.writeHead(200, {
'Content-Type': 'text/html',
'Set-Cookie': ['a=111;max-age=2', 'b=222; httpOnly'],
});
response.end(html);
}
}).listen(port);
console.log('server listening on port ', port);
```
* 返回结果
可以看到当b=222设置了httpOnly之后，js就无法读取到该cookie值，示例中只输出了a=111
#### cookie的domain设置
> 如果想要在一个域名的二级域名中共享同一个cookie需要做domain设置
以下例子中，假设test.com是一级域名，设置一些cookie信息，同时设置domain，使得二级域名可以共享，在之后的二级域名例如 a.test.com, b.test.com访问中都可以访问到同一个cookie信息。
```js
const http = require('http');
const fs = require('fs');
const port = 3010;
http.createServer((request, response) => {
console.log('request url: ', request.url);
if (request.url === '/') {
const html = fs.readFileSync('./cookie.html', 'utf-8');
if (request.headers.host === 'test.com') {
response.writeHead(200, {
'Content-Type': 'text/html',
'Set-Cookie': ['a=111;max-age=2', 'b=222; httpOnly; domain=test.com'],
});
}
response.end(html);
}
}).listen(port);
console.log('server listening on port ', port);
```
## http长链接
> http的请求是在tcp链接之上进行发送，tcp链接分为长链接、短链接的概念，http发送请求的时候会先创建一个tcp链接，在tcp连接上把http请求的内容发送，并接收返回，这个时候一次请求就结束了，浏览器会和服务端商量，要不要把这次tcp链接给关闭到，如果不关闭，这个tcp链接就会一直开着，会有消耗，但是接下去如果还有请求，就可以直接在这个tcp链接上进行发送，那么就不需要经过三次握手这样的一个链接消耗，而如果直接关闭，那么在下次http请求的时候就需要在创建一个tcp链接，长链接是可以设置timeout的，可以设置多长时间在这个tcp链接上没有新的请求就会关闭
#### http/1.1
http/1.1的链接在tcp上去发送请求是有先后顺序的，例如你有10个请求是不可以并发的在一个tcp链接上去发送，浏览器是可以允许并发的创建一个tcp链接，chrome允许的是6个，一次性的并发，如果你有10个只能等前面6个其中一个完成，新的请求在进去。
#### http/1.1长链接示例
* connection.html
```html
Connection
```
* connection.js
```js
const http = require('http');
const fs = require('fs');
const port = 3010;
http.createServer((request, response) => {
console.log('request url: ', request.url);
const html = fs.readFileSync('./connection.html', 'utf-8');
const img = fs.readFileSync('./test_img.jpg');
if (request.url === '/') {
response.writeHead(200, {
'Content-Type': 'text/html',
});
response.end(html);
} else {
response.writeHead(200, {
'Content-Type': 'image/jpg'
});
response.end(img);
}
}).listen(port);
console.log('server listening on port ', port);
```
* 返回结果
可以看到第一次图片加载时复用了第一次localhost的tcp链接，最后两张图片一直在等待前面的tcp链接完成，有一定的响应等待
http/2
在http/2中有了一个新的概念信道复用，在TCP连接上可以并发的去发送http请求，链接一个网站只需要一个TCP链接(同域的情况下)
## 数据协商(内容协商)
在HTTP协议中，内容协商是这样一种机制，通过为同一URL指向的资源提供不同的展现形式，可以使用户代理选择与用户需求相适应的最佳匹配（例如： 文档使用的自然语言，图片的格式，或则内容编码形式）
### 内容协商的基本原则
一份特定的文件称为一项资源。当客户端获取资源的时候，会使用其对应的URL发送请求。服务器通过URL来选择它指向的资源的一种展现形式，然后将这个特定的展现形式返回给客户端。
实际上： 当一项资源被访问的时候，特定展现形式的选取是通过内容协商机制来决定的，并且客户端和服务端之间存在多种协商方式。
### 最佳展现形式
客户端设置特定的HTTP首部（又称`服务端驱动型内容协商机制`或`主动协商机制`），这是进行内容协商的标准方式。
### 服务端驱动型内容协商机制
HTTP常见请求头和响应头如下：
### Accept首部 ( 对应Response Headers中 Content-Type )
Accept首部列举了用户代理希望接收的媒体资源的MIME类型。其中不同的MIME类型之间用逗号分隔，同时每一种MIME类型会配有一个品质因数，该参数明确了不同MIME类型之间的相对优先级。
常见浏览器的Accept首部默认值：
### Accept-Encoding首部( 对应Response Headers中 Content-Encoding )
Accept-Encoding首部明确说明了可以接受的内容编码形式（所支持的压缩算法）。该首部的值是一个Q因子清单（例如： br，gzip；q=0.8）,用来提示不同编码类型值的优先级顺序。
将HTTP消息进行压缩是一种最重要的提升Web站点性能的方法，该方法会减少所要传输的数据量的大小，节省可用带宽。浏览器总是会发送该首部，服务器则应该配置为接受它，并采用一定的压缩方案。
### Accept-Language首部( 对应Response Headers中 Content-Language )
Accept-Language首部用来提示用户期望获得的自然语言的优先顺序。该首部的值是一个Q因子清单 （例如： “de, en ; q=0.7”）。用户代理的图形界面上所采用的语言通常可以用来设置为默认值，但是大多数浏览器允许设置不同优先级的语言选项。
### User-Agent首部
> 尽管使用该首部来进行内容选择是合理的，但是依赖这个首部来确定用户代理都支持哪些功能特性通常被认为是一个糟糕的做法。
User-Agent 首部而可以用来识别发送请求的浏览器。 该字符串中包含有用间隔的产品标记符及注释的清单。
产品标识符由产品名称，后面紧跟的’/’以及产品版本号后成，例如 Firefox/4.0.1
## csp
Content-Security-Policy内容安全策略，限制资源获取
[参考文档 内容安全策略 (CSP) - Web 安全 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/Security/CSP)
#### 限制方式
* default-src限制全局
* 制定资源类型
```
connect-src manifest-src img-src style-src script-src frame-src font-src media-src ...
```
#### 参考示例
> web领域非常著名的一个攻击方式xss，是通过某些方法在网站里面注入一些别人写好的脚本，窃取一些用户的信息，处于安全考虑不希望执行写在页面里面的一些脚本，可以在返回的headers里面设置Content-Security-Policy。
csp.html
```html
cache-control
```
csp.js
在head里设置Content-Security-Policy只能加载http https
```js
const http = require('http');
const fs = require('fs');
const port = 3010;
http.createServer((request, response) => {
console.log('request url: ', request.url);
if (request.url === '/') {
const html = fs.readFileSync('csp.html', 'utf-8');
response.writeHead(200, {
'Content-Type': 'text/html',
'Content-Security-Policy': 'default-src http: https',
});
response.end(html);
}
}).listen(port);
```
运行结果
#### 更多的设置方式
* 限制外链加载的javascript文件只能通过哪些域名加载
> 只能根据本域名下的js内容进行加载
```js
response.writeHead(200, {
'Content-Security-Policy': 'default-src \'self\'',
});
```
* 限制指定某个网站
```js
response.writeHead(200, {
'Content-Security-Policy': 'default-src \'self\' https://www.baidu.com/',
});
```
* 限制form表单的提交
```js
response.writeHead(200, {
'Content-Security-Policy': 'default-src \'self\'; form-action \'self\'',
});
```
* 内容安全策略如果出现我们不希望的情况，可以让它主动申请向我们服务器发送一个请求进行汇报
```js
// report-uri 跟上服务器的url地址
response.writeHead(200, {
'Content-Security-Policy': 'default-src \'self\'; report-uri /report',
});
```
* 除了在服务端通过headers指定还可以在html里面通过meta标签写
> 注意：在html标签里通过meta写report-uri是不支持的，建议还用通过headers设置
```html
```
更多内容可参考 CSP的CDN [参考文档 内容安全策略 (CSP) - Web 安全 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/Security/CSP)
## nginx服务配置
> nginx出发点就是一个http的服务，一个纯粹做http协议的服务
#### windows安装可参考以下
[nginx: download](http://nginx.org/)
#### Mac安装
* 安装
``` brew install nginx ```
* 查看版本
``` nginx -v ```
* 安装位置
``` /usr/local/etc/nginx ```
* 启动
``` sudo nginx ```
* 查看 nginx 是否启动成功
> 在浏览器中访问 http://localhost:8080，如果出现如下界面，则说明启动成功.
* 关闭nginx
``` sudo nginx -s stop ```
* 重新加载nginx
``` sudo nginx -s reload ```
#### 修改hosts文件配置本地域名
hosts位置:
* Windows C:\windows\system32\drivers\etc\hosts
* Mac /private/etc/hosts
* Ubuntu /etc/hosts
vim hosts
```sh
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 test.com
```
保存以上配置即可，127.0.0.1 test.com 在浏览中输入www.test.com域名，就可访问本地指定的网站，仅限于本地。
``` 注意 ``` Nginx中，要做好conf配置，让这些域名有所访问的对象，例如下面Nginx配置缓存处的test.com指向http://127.0.0.1:3010
查看是否配置成功 可以打开cmd ping 一下配置的余名，例如上面配置的
ping test.com
```bash
PING test.com (127.0.0.1): 56 data bytes
64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.047 ms
64 bytes from 127.0.0.1: icmp_seq=1 ttl=64 time=0.095 ms
64 bytes from 127.0.0.1: icmp_seq=2 ttl=64 time=0.084 ms
64 bytes from 127.0.0.1: icmp_seq=3 ttl=64 time=0.055 ms
```
#### nginx配置缓存
* levels 是否要创建二级文件夹
* keys_zone=my_cache:10m 代理缓存查找一个缓存之前要有个地方保存，一个url对应的缓存保存在哪个地方，这个关系是存在内存里的，这里要声明一个内存大小进行保存，my_cache是缓存的名字，在每个server里面可以去设置
修改conf配置，文件目录了 ``` /usr/local/etc/nginx/servers/ ```
vim nginx-cache.conf
```conf
proxy_cache_path /var/cache levels=1:2 keys_zone=my_cache:10m;
server {
listen 80;
server_name test.com;
location / {
proxy_cache my_cache;
proxy_pass http://127.0.0.1:3010;
proxy_set_header Host $host; # 设置浏览器请求的host
}
}
```
nginx-cache.js
* 以下s-maxage会代替max-age，只有在代理服务器（nginx代理服务器）才会生效
* 用来指定在发送一个请求时，只有在Vary指定的http的headers是相同的情况下，才会去使用缓存，例如User-Agent，IE、Firefox打开这个页面，CDN／代理服务器就会认为这是不同的页面，将会使用不同的缓存
```js
const http = require('http');
const fs = require('fs');
const port = 3010;
const wait = seconds => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, seconds);
})
}
http.createServer((request, response) => {
console.log('request url: ', request.url);
if (request.url === '/') {
const html = fs.readFileSync('nginx-cache.html', 'utf-8');
response.writeHead(200, {
'Content-Type': 'text/html',
});
response.end(html);
} else if (request.url === '/data') {
response.writeHead(200, {
'Cache-Control': 'max-age=20, s-max-age=20',
'Vary': 'Test-Cache-Val'
});
wait(3000).then(() => response.end("success!"));
}
}).listen(port);
console.log('server listening on port ', port);
```
ngxin-cache.html
```html
nginx-cache
this is nginx-cache, and data is: 请等待，数据获取中...
```
以上就是关于nginx代理服务器的实现实例，具体的Nginx代理服务器缓存还是有很多的功能，比如通过一些脚本让缓存使用内存数据库搜索性能会更高，默认nginx缓存是写在磁盘上的，读写磁盘效率是很低的，还可以通过设置cache key等。
#### nginx部署https服务
##### 生成public key和private key
/usr/local/etc/nginx/certs目录下执行以下命令
```
openssl req -x509 -newkey rsa:2048 -nodes -sha256 -keyout localhost-privkey.pem -out localhost-cert.pem
```
```bash
Generating a 2048 bit RSA private key
...............................................................................+++
..............+++
writing new private key to 'localhost-privkey.pem'
-----
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:
State or Province Name (full name) [Some-State]:
Locality Name (eg, city) []:
Organization Name (eg, company) [Internet Widgits Pty Ltd]:
Organizational Unit Name (eg, section) []:
Common Name (e.g. server FQDN or YOUR name) []:
Email Address []:
```
##### 基于上面的nginx-cache.conf文件进行修改
```conf
proxy_cache_path /var/cache levels=1:2 keys_zone=my_cache:10m;
server {
listen 443 ssl; # https默认证书
server_name test.com;
# ssl on; # 开启ssl证书
ssl_certificate_key /usr/local/etc/nginx/certs/localhost-privkey.pem;
ssl_certificate /usr/local/etc/nginx/certs/localhost-cert.pem;
location / {
proxy_cache my_cache;
proxy_pass http://127.0.0.1:3010;
proxy_set_header Host $host; # 设置浏览器请求的host
}
}
```
``` 注意: ``` [nginx: [warn] the "ssl" directive is deprecated, use the "listen ... ssl"](https://github.com/Q-Angelo/summarize/issues/3)
##### http自动跳转https
```conf
proxy_cache_path /var/cache levels=1:2 keys_zone=my_cache:10m;
server {
listen 80 default_server;
listen [::]:80 default_server; # [::] 你的ip
server_name test.com;
return 302 https://$server_name$request_uri;
}
server {
listen 443 ssl; # https默认证书
server_name test.com;
# ssl on; # 开启ssl证书
ssl_certificate_key /usr/local/etc/nginx/certs/localhost-privkey.pem;
ssl_certificate /usr/local/etc/nginx/certs/localhost-cert.pem;
location / {
proxy_cache my_cache;
proxy_pass http://127.0.0.1:3010;
proxy_set_header Host $host; # 设置浏览器请求的host
}
}
```
#### 实现http2协议
http2目前只能在https下面才可以
* 优势:
* 信道复用
* 分帧传输
* Server Push http/1.1协议里是客户端主动请求，服务才会响应，
http2.conf
```conf
server {
listen 443 ssl http2;
server_name http2.test.com;
http2_push_preload on;
ssl_certificate_key /usr/local/etc/nginx/certs/localhost-privkey.pem;
ssl_certificate /usr/local/etc/nginx/certs/localhost-cert.pem;
location / {
proxy_pass http://127.0.0.1:30100;
proxy_set_header Host $host;
}
}
```
connection.js [基于http/1.1长链接示例修改](https://github.com/Q-Angelo/http-protocol#http11%E9%95%BF%E9%93%BE%E6%8E%A5%E7%A4%BA%E4%BE%8B)
```js
const http = require('http');
const fs = require('fs');
const port = 30100;
http.createServer((request, response) => {
console.log('request url: ', request.url);
const html = fs.readFileSync('./connection.html', 'utf-8');
const img = fs.readFileSync('./test_img.jpg');
if (request.url === '/') {
response.writeHead(200, {
'Content-Type': 'text/html',
'Connection': 'close',
'Link': '; as=image; rel=preload',
});
response.end(html);
} else {
response.writeHead(200, {
'Content-Type': 'image/jpg'
});
response.end(img);
}
}).listen(port);
console.log('server listening on port ', port);
```
connection.html
```html
http2-connection
1
2
3
4
5
6
7
8
```
运行效果，基于http2协议复合浏览器同域策略都在一个TCP上复用
测试http2性能的网站 [https://http2.akamai.com/demo/http2-lab.html](https://http2.akamai.com/demo/http2-lab.html)
