前端面试题-网络部分-http和其他协议之间的区别-ajax请求的步骤-XSS,CSRF-http的加密过程- 浏览器缓存

http和其他协议之间的区别

我们常见的协议有 http协议，https协议，tcp协议，websocket协议

http和tcp之间的区别

主要体现在性质，连接状态和功能上。
首先，HTTP是一个简单的请求-响应协议，通常运行在TCP纸上。它指定了客户端肯呢个发送给服务器什么样的信息以及得到什么样的响应。而TCP则是一种面向连接的，可靠的，基于字节流的传输层通信协议。
其次,http是无状态的短连接，每次氢气结束后都会断开连接。而TCP是有状态的长连接，可以在不同计算机之间建立可靠的通信服务。
此外，当应用层向TCP层发送用于网间传输，用8位字节表示的数据流时，TCP会将数据流分割成适当长度的报文，并确保数据地可靠传输。
http是基于TCP的，客户端往服务端发送一个http请求时第一步就是要建立与服务端的Tcp连接，也就是先三次握手。从http1.1开始支持持久连接，也就是一次TCP连接可以发送多次的HTTP请求。

http和websocket协议有什么区别

HTTP是短连接，Socket（基于TCP协议的）是长连接。尽管HTTP1.1开始是支持持久连接，但仍无法保证始终连接。而Socket连接一旦建立TCP三次握手，除非一方主动断开，否则连接状态一直保持。
HTTP连接服务端无法主动发送信息，Socket连接双份请求的发送先后限制。这点比较重要，因为它将决定二者分别适用在什么场景之下。HTTP采用请求-响应机制，在客户端还没发送消息给服务端前，服务端无法推送消息给客户端。必须满足客户端发送消息在前，服务端回复消息在后。socket连接双方类似p2p的关系，一方随时可以向另一方喊话。
用http的情况：双方不需要时刻保持连接在线，比如客户端资源的获取，文件上传等。
用socket的情况：打部分即使通讯应用。

以下代码用node.js搭建简单的websocket服务
服务端：

var ws=require("nodejs-websocket")

const PORT=5001
let myotherdata={
    id:1,
    name:'hhh',
    test:'我是哈哈'
}
var serve=ws.createServer((conn)=>{
    console.log('连接成功')
    conn.send('恭喜你 你已经成功和我建立连接了')
    mywebsocket(conn)
    conn.on("error",()=>{
        console.log('error')
    })
    conn.on('close',()=>{
        console.log('连接关闭')
    })
    conn.on('text',(data)=>{
        console.log('收到了来自客户端的数据',data)
        conn.send(`我是服务端给你说的东西啦,${data},${myotherdata.name}`)
    })
})
var mywebsocket=function (e){
    let i=1;
    setInterval(()=>{
        e.send(`是服务端第${i}次给你发送消息`)
        i++
    },6000)

}

serve.listen(PORT,()=>{
    console.log('服务器启动成功，监听了端口'+PORT)
})

客户端：

     let mysocket
        mysocket = new WebSocket("ws://127.0.0.1:5001");
        mysocket.addEventListener("open", () => {
            console.log('连接成功')
        })
        mysocket.addEventListener('message', (e) => {
            console.log(e.data)
        })

Ajax请求的步骤

AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种网页开发技术。AJAX使用JavaScript、XMLHttpRequest对象以及一些其他相关技术，使得网页能够在不需要重新加载整个页面的情况下，与服务器进行通信并更新部分网页内容。这使得网页可以更加动态和响应式，提高用户体验。
AJAX基于web标准（standards-based presentation）XHTML+CSS的表示，使用DOM（Document Object Model）进行动态显示及交互，使用XML和XSLT进行数据交换及相关操作，使用XMLHttpRequest进行异步数据查询、检索，以及使用JavaScript将所有的东西绑定在一起。
值得注意的是，AJAX并不是一种单一的技术，而是多种技术的有机组合。这些技术协同工作，使得网页能够更快速、更有效地响应用户的交互行为。
Ajax请求的步骤
1.首先创建一个XMLHttpRequest异步对象
2.然后设置请求方式和请求地址
3.用send发送请求
4.监听状态变化
代码如下：

// 创建XMLHttpRequest对象  
var xhr = new XMLHttpRequest();  
  
// 打开一个请求到指定的URL，使用GET方法，并设置是否异步处理请求  
xhr.open("GET", "API地址", true);  
  
// 注册一个事件处理程序来处理服务器响应  
xhr.onreadystatechange = function() {  
  if (xhr.readyState === 4 && xhr.status === 200) {  
    // 服务器响应状态码为200，表示请求成功  
    // 使用responseText属性获取服务器响应的文本内容  
    var response = xhr.responseText;  
    // 在这里处理服务器响应数据  
    console.log(response);  
  } else if (xhr.readyState === 4) {  
    // 请求完成，但服务器响应状态码不是200  
    // 在这里处理请求失败的情况  
    console.error("请求失败");  
  }  
};  
  
// 发送请求到服务器  
xhr.send();

什么是XSS，CSRF攻击

CSRF(跨站请求伪造）是一种挟持用户当前以及登录的web应用程序上执行非本意操作的攻击方法。
XSS(跨站脚本)，指的是通过利用网页开发时留下的漏洞，注入恶意指令代码到网页，使用户加载并执行攻击者恶意的网页程序。常见的列如在评论区植入JS代码，用户进入评论网页代码被执行，造成页面被植入广告，账户信息被窃取等。
如何防御CSRF攻击
1.验证token：浏览器请求服务器时，服务器随机返回一个token，每个请求都需要带上token和cookie才会被认为是合法的请求
2.验证referer：通过验证请求头的referer来躺着来源站点，但是请求头很容易伪造。
3.设置SameSite：设置cookie的SameSite，可以让cookie不随跨域请求发出，但浏览器兼容不一。
如何防御XSS攻击
1.输入检查：对输入内容中改的一些特殊标签进行转义或者过滤
2.设置HttpOnly：设置此属性可以防止js获取cookie
3.开启CSP:开启白名单，可组织白名单意外的资源运行和加载

https加密的过程

1.客户端向服务器发送“client hello”消息，同时包含TLS版本、可用加密算法和压缩算法。
2.服务器向客户端返回“server hello”消息，其中包含服务器选择的TLS版本、加密算法和压缩算法，以及服务器公钥。
3.客户端验证CA是否可信，并验证服务器证书是否过期，域名是否匹配等。验证通过后，客户端生成一串随机数，并使用服务器公钥进行加密。
4.服务器用自己的私钥解密得到随机数，并使用该随机数生成对称密钥。
5.服务器使用对称密钥加密数据发送给客户端。
6.客户端使用相同的对称密钥解密数据。

浏览器缓存

浏览器缓存分为强制缓存和协商缓存
强制缓存：文件直接从本地缓存中获取，不需要发送请求

上图为初次请求 浏览器请求服务器 服务器返回资源 给浏览器浏览器本地存储就有了一份资源（cache-control ）

从上图中可以看到，此时浏览器已经接收到 cache-control 的值，那么这个时候浏览器再次发送请求
时，它会先检查它的 cache-control 是否过期，如果没有过期则直接从本地缓存中拉取资源，返回到
客户端，而无需再经过服务。

协商缓存: 也叫做对比缓存
是一种服务端的缓存策略，即通过服务端来判断某件事情是不是可以被缓存。
服务端判断客户端的资源，是否和服务端资源一样，如果一致返回304，反之返回200和最新的资源