FrankKai / FrankKai.github.io

FE blog
https://frankkai.github.io/
363 stars 39 forks source link

HTTP(S小册 #79

Open FrankKai opened 6 years ago

FrankKai commented 6 years ago

HTTP(S知识点。

FrankKai commented 6 years ago

user crednetials

关键词:cookie CORS

规范定义如下:

6.2. Resource Sharing Check
The resource sharing check algorithm for a given resource is as follows:
1. If the response includes zero or more than one Access-Control-Allow-Origin header values return fail and terminate this algorithm.
2. If the Access-Control-Allow-Origin header value is the literal "*" character and the credentials flag is false return pass and terminate this algorithm.
3. If the value of Access-Control-Allow-Origin is not a case-sensitive match for the value of the Origin header as defined by its specification return fail and terminate this algorithm.
4. If the credentials flag is true and the response includes zero or more than one Access-Control-Allow-Credentials header values return fail and terminate this algorithm.
5. If the credentials flag is true and the Access-Control-Allow-Credentials header value is not a case-sensitive match for "true" return fail and terminate this algorithm.
6. Return pass.
The above algorithm also functions when the ASCII serialization of an origin is the string "null".

常用于cookie用户验证。

FrankKai commented 6 years ago

OPTIONS Method

关键词:跨域预检

curl -X OPTIONS 192.168.0.11:8080 -i

HTTP/1.1 200 OK Server: Apache-Coyote/1.1 Access-Control-Allow-Credentials: true Access-Control-Allow-Headers: Origin, X-Requested-With, Last-Modified, Content-Type, Accept Access-Control-Allow-Methods: GET, OPTIONS, POST Content-Type: text/html;charset=ISO-8859-1 Content-Length: 52 Date: Thu, 21 Jun 2018 03:56:22 GMT

- CORS预验请求
CORS预验请求
在CORS中,一个携带OPTIONS方法的preflight请求会被发送,服务器会响应给前端自己是否可以接收这些参数的请求。
Access-Control-Request-Method头通知服务器在接收到真正发送来的请求时,将作为预preflight请求的一部分,被POST请求发送过去。
Access-Control-Request-Headers头信息通知服务器,当实际请求被发送时,它将与X-POINGOTHER和Content-Type自定义报头一起被发送。
服务器会在这种情况下去决定是否接受请求。

OPTIONS /resources/post-here/ HTTP/1.1 Host: bar.other Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Connection: keep-alive Origin: http://foo.example Access-Control-Request-Method: POST Access-Control-Request-Headers: X-PINGOTHER, Content-Type


服务器请求Access-Control-Allow-Methods表明它只能使用POST,GET,以及OPTIONS方法去查询资源。这个报文头与Allow响应头类似,但是在CORS的上下文中被严格使用。

HTTP/1.1 200 OK Date: Mon, 01 Dec 2008 01:15:39 GMT Server: Apache/2.0.61 (Unix) Access-Control-Allow-Origin: http://foo.example Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: X-PINGOTHER, Content-Type Access-Control-Max-Age: 86400 Vary: Accept-Encoding, Origin Content-Encoding: gzip Content-Length: 0 Keep-Alive: timeout=2, max=100 Connection: Keep-Alive Content-Type: text/plain


实验
请求:
![image](https://user-images.githubusercontent.com/19262750/41767161-8205bc34-763b-11e8-8430-06197824a44f.png)

响应:
![image](https://user-images.githubusercontent.com/19262750/41767181-8bc20412-763b-11e8-9b1e-c6fdd253b019.png)

结果分析:
* OPTIONS方法的请求报文头中,主要携带请求方法和请求内容两个关键头信息
    * Access-Control-Request-Headers
    * Access-Control-Request-Method
* OPTIONS是对CORS请求的一次预检,也就是去查询服务器支持哪些跨域方法和跨域内容,报文头主要是服务器响应预检头信息
* 预检通过后,第二次发起GET、POST请求,才会带上真正的Accept,Content-Type,这是浏览器的响应头信息

综上所述,我们得出一个结论:

**OPTIONS请求是浏览器与服务器之间的CORS跨域预检方法。**
FrankKai commented 5 years ago

Network Status的(blocked:mixed-content)是什么意思?

image

由此引出一个知识点:Mixed content

mixed passive / display content

mixed active content

如何看到这个问题?

当有mixed content问题时,页面会显示如下warning和error。 image image image

如何解决这个问题?

HTTP content -> HTTPS content 简而言之就是前端资源获取,全部换成https协议。

FrankKai commented 4 years ago

Authorization 请求头如何理解?

HTTP basic autherization。 HTTP Authorization请求头包含了在服务器上认证用户客户端的凭证,通常服务端在响应头里返回401 Unauthorized状态和WWW-Authenticate头。

Authorization: <type> <credentials>

type常用的是"Basic",还有其他类型。与服务器有关,AWS是"AWS4-HMAC-SHA256"。 credentials:Basic类型下有2种。1.username:password2.base64编码格式的字符串

Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l
Authorization: eyJhbGciOiJIUzUxMi // 虽然是base64格式,但是是经过复杂加密算法处理的
FrankKai commented 4 years ago

Access-Control-Expose-Headers是什么?

这个响应头表示哪些response header可以在返回的response里暴露出来。 默认有:Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Prama

如果需要在response中暴露其他的头:必须在这个头里配置。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers