HTTP

应用层：为应用软件提供服务，构建与TCP协议之上，屏蔽网络传输相关细节

传输层：向用户提供端到端的服务，向高层屏蔽了下层数据通信的细节

网络层：为数据在结点之间传输创建逻辑链路

数据链路层：在通信的实体之间建立数据逻辑链路

物理层：定义物理设备如何传输数据

http：三次握手

1.客户端向服务端发送创建连接的请求，里面带有标志位，SYN=1（第一个标志位）,Seq=X(数字)

2.服务端接受到客户端请求，开启tcp socket 端口，返回 SYN = 1, ACK = X+1 Seq的数字加1，Seq = Y (服务端的Seq)

3.客户端已被允许创建TCP连接，向服务端发送ACK=Y+1 ,Seq = Z

URI:统一资源标志符

用来唯一标识互联网上的信息资源

URL:统一资源定位符

URN:永久统一资源定位符

简易web服务器实现

1 const http = require('http')
2 
3 http.createServer(function(req,res){
4     console.log('req',req.url)
5 
6     res.end('123')
7 }).listen(8888)

localhost:8888 123

跨域解决

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var xhr = new XMLHttpRequest()
    xhr.open('GET','http://127.0.0.1:8887/')
    xhr.send()

</script>
</html>

server.js

 1 const http = require('http')
 2 const fs = require('fs')
 3 
 4 http.createServer(function(req,res){
 5     console.log('req',req.url)
 6 
 7     const html = fs.readFileSync('index.html','utf-8')
 8     res.writeHead(200,{
 9         'Content-Type':'text/html'
10     })
11     
12     res.end(html)
13 }).listen(8888)

server2.js

const http = require('http')

http.createServer(function(req,res){
    console.log('req',req.url)

    res.writeHead(200,{
        'Access-Control-Allow-Origin':'*'
    }) //请求和发送正常进行，被浏览器忽略掉了


    res.end('123')
}).listen(8887)

CORS限制

允许方法 GET HEAD POST

允许Content-Type

　　text/plain

　　multipart/form-data

　　application/x-www-form-urlencoded

请求头限制

　　'Access-Control-Allow-Header'：' '

XMLHttpRequestUpload对象均没有注册任何事件监听器

请求中没有使用ReadableStream对象

Cache-Control

可缓存性

public

private

no-cache

到期

max-age=<seconds>

s-maxage=<seconds>

max-stale=<seconds>

重新验证

must-revalidate

proxy-revalidate

通过Set-Cookie设置

下次请求会自动带上

键值对，可以设置多个

max-age和expires设置过期时间

Secure只在https的时候发送

HttpOnly无法通过document,cookie访问

test.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     
11 </body>
12 <script>
13     console.log(document.cookie)
14 </script>
15 </html>

server.js

 1 const http = require('http')
 2 const fs = require('fs')
 3 
 4 http.createServer(function(req,res){
 5     console.log('req',req.url)
 6 
 7     if(req.url === '/'){
 8         const html = fs.readFileSync('test.html','utf-8')
 9         res.writeHead(200,{
10             'Content-Type':'text/html',
11             'Set-Cookie':'123'
12         })
13         
14         res.end(html)
15     }
16 
17 
18 
19 }).listen(8888)

Http长连接

数据传输完成了保持TCP连接不断开（不发RST包、不四次握手），等待在同域名下继续用这个通道传输数据

test.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <img src="/test.jpg" alt=""></img>
11     <img src="/test.jpg" alt=""></img>
12     <img src="/test.jpg" alt=""></img>
13     <img src="/test.jpg" alt=""></img>
14 </body>
15 <script>
16 </script>
17 </html>

server.js

const http = require('http')
const fs = require('fs')

http.createServer(function(req,res){
    console.log('req', req.url)

    const html = fs.readFileSync('test.html','utf-8')
    const img = fs.readFileSync('test.jpg')

    if(req.url === '/'){
        res.writeHead(200,{
            'Content-Type':'text/html'
        })
        
        res.end(html)
    }else{
        res.writeHead(200,{
            'Content-Type':'image/jpg'
        })
        res.end(img)
    }

}).listen(8888)

数据协商

分类

请求，返回

Accept:

　　Accept-Encoding

　　Accept-Language

　　User-Agent

Content-Type

　　Content-Encoding

　　Content-Language

redirect

 1 const http = require('http')
 2 const fs = require('fs')
 3 
 4 http.createServer(function(req,res){
 5     console.log('req',req.url)
 6 
 7     if(req.url === '/'){
 8     
 9         res.writeHead(302,{
10             'Location':'/new'
11         })
12         
13         res.end('')
14     }
15 
16     if(req.url === '/new'){
17         res.writeHead(200,{
18             'Content-Type':'<div>this is content</div>'
19         })
20         
21         res.end('<div>content</div>')
22     }
23 
24 }).listen(8888)

Content-Security-Policy

CSP 内容安全策略

作用：限制资源获取

报告资源获取越权

限制方式：

default-src 限制全局

制定资源类型

test.html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div> This is content </div>
 9         <script>
10             console.log('inline js')
11         </script>
12     </body>
13 </html>

server.js

const http = require('http')
const fs = require('fs')

http.createServer(function(req,res){
    console.log('req',req.url)

    if(req.url === '/'){
        const html = fs.readFileSync('test.html','utf-8')
        res.writeHead(200,{
            'Content-Type':'text/html',
            'Content-Security-Policy':'default-src http: https:'
        })
        
        res.end(html)
    }



}).listen(8888)

Refused to execute inline script because it violates the following Content Security Policy

代理缓存

通过重用已获取的资源，可大幅提高web站点和应用的性能。由于web缓存减少了延迟和网络流量，因此缩短了展示一个资源所需的时间。通过使用HTTP缓存机制

test.html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div> This is content:<span id="data"></span> </div>
 9         <script>
10             fetch('/data').then(function(res){
11                 return res.text()
12             }).then(function(text){
13                 document.getElementById('data').innerText = text
14             })
15         </script>
16     </body>
17 </html>

server.js

 1 const http = require('http')
 2 const fs = require('fs')
 3 
 4 const wait = (seconds) =>{   //2s后
 5     return new Promise((resolve,reject) =>{
 6         setTimeout(() =>{
 7             resolve()
 8         },seconds*1000)
 9     })
10 }
11 
12 http.createServer(function(req,res){
13     console.log('req',req.url)
14 
15     if(req.url === '/'){
16         const html = fs.readFileSync('test.html','utf-8')
17         res.writeHead(200,{
18             'Content-Type':'text/html',
19         })
20         
21         res.end(html)
22     }
23     
24     if(req.url === '/data'){
25         res.writeHead(200,{
26         'Cache-Control':'max-age=20'
27         })
28         wait(2).then(()=>res.end('success'))
29     
30     }
31  
32 
33 
34 }).listen(8888)

Https

公钥

私钥

Http2

信道复用

分帧传输

Server Push

完

posted @ 2019-07-31 11:32 曲阳阳阅读(269) 评论(0) 编辑收藏举报

刷新页面返回顶部

曲阳阳

HTTP

公告