知识总结[网络篇]

码农练习生
4,372 阅读5分钟

1. 浏览器输入地址后发生什么

  1. 解析URL
  2. DNS解析、监测缓存
  3. 客户端与服务端建立TCP连接（三次握手）
  4. 请求与传输数据
  5. 进行数据渲染
  6. 解析HTML、生成DOM树、解析CSS代码、将数据渲染到网页上

2. 轮询、长轮询、长连接、websocket区别

  • 轮询：定时向服务器发送ajax请求，无需等待响应
  • 长轮询：客户端向服务器发送请求，服务器保持连接，当有更新消息立即返回客户端，连接关闭。
  • 长连接：客户端向服务器发送请求，服务器保持连接，当有更新消息立即返回客户端，连接保持。
  • websocket：H5提供的基于TCP的双向通讯协议，服务器主动推送消息到客户端，只需一次握手连接，即可建立持久连接

3. websocket

特点：

  1. 基于TCP协议，通过HTTP进行首次握手连接，默认端口80 \ 443
  2. 可传输文本或二进制数据
  3. 没有同源限制
  4. wss（通过TLS加密）

如何升级:

 1. 客户端发起协议升级请求(http/get)
 Connection: Upgrade // 表示要升级协议
 Upgrade: websocket // 表示要升级到websocket协议
 Sec-WebSocket-Version: 13 // websocket的版本号
 Sec-WebSocket-Key: V8JrNqt+p99r+9wknOeGVw== // 匹配服务端返回的Sec-WebSocket-Accept，提供防护防止恶意连接
 
 2. 服务端响应并返回101，标识协议切换成功
 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f43a4a47e19040d3ba82e53e17edca3f~tplv-k3u1fbpfcp-zoom-1.image)

4. 三次握手、四次分手

! 需了解传输协议，数据包

  • 三次握手
    客户端      ->(建立连接)->          服务器
    客户端   <-(确认接受，建立连接)<-   服务器
    客户端      ->(确认接受)->          服务器
  • 四次分手
    客户端      ->(关闭连接)->      服务器
    客户端      <-(确认关闭)<-      服务器
    客户端      <-(关闭连接)<-      服务器
    客户端      ->(确认关闭)->      服务器

5. 请求状态码

2XX 请求成功

  • 200 请求成功
  • 204 请求成功，但未有任何资源返回
  • 206 服务器成功处理部分get请求）

3XX 重定向

  • 301 (Moved Permanently) 永久重定向

    说明请求的资源已经被移动到了由 Location 头部指定的 url 上，是固定的不会再改变。搜索引擎会根据该响应修正。

  • 302 (Found) 临时重定向

    重定向状态码表明请求的资源被暂时的移动到了由 Location 头部指定的 URL 上。浏览器会重定向到这个URL，但是搜索引擎不会对该资源的链接进行更新

  • 303 (See Other) 重定向链接指向的不是新上传的资源，而是另外一个页面
  • 304 (Not Modified) 访问缓存资源，服务器无数据返回

4XX 客户端错误

  • 401 需要验证
  • 403 不允许访问
  • 404 未在服务器上找到任何资源

5XX 服务器错误

6. 安全问题

XSS（跨站脚本攻击）是在网页中注入非法的js脚本，获取cookie达到控制浏览器的目的

  • DOM xss : 使用DOM可以允许程序和脚本动态的访问和更新文档的内容、结构和样式
  • 反射性 xss：发出请求时，XSS代码出现在URL中，最后输入提交到服务器，服务器解析后在响应内容中出现这段XSS代码，最后浏览器解析执行。
  • 存储型 xss：当攻击者提交一段XSS代码后，被服务器端接收并存储，当所有浏览者访问某个页面时都会被XSS，其中最典型的例子就是留言板。

危害：

  • 利用虚拟输入表单获取用户信息
  • 获取cookie，可代替用户进行危险操作

防范方法：

  • httpOnly: 在 cookie 中设置 HttpOnly 属性，使js脚本无法读取到 cookie 信息
  • 前后端校验输入表单格式，过滤不合理字符

CSRF 跨站点请求伪造，冒充用户发起请求，完成一些违背用户意愿的事情（如修改用户信息等）

危害：

  • 利用已认证过的用户对商品信息、个人信息进行违法操作等

防范方法：

  • 验证码： 强制用户与应用进行交互
  • 减少get请求
  • token验证CSRF防御机制是公认最合适的方案

token使用原理

  • 后端随机生成一个token，并将此token携带在cookie中，然后将此token传递给前端页面
  • 前端获取此token后，每次请求都携带token
  • 后端验证token是否一致，若一致则请求合法

7. ajax请求过程

  1. 创建XMLHttpRequest对象，
  2. 创建http请求，并指明请求的url，方式和参数
  3. 设置http请求状态变化的函数
  4. 发送http请求
  5. 通过回调获取返回的数据
  6. 渲染

8. 跨域的方式

同源策略： 具有相同的协议（http/https）、域名、端口即为同源，不存在跨域，反之亦然

  • 跨域资源共享(CORS)

    需后端设置

  • 服务器转发代理

    请求同源地址的代理接口，服务器访问跨域接口并返回数据

  • jsonp

    利用script标签不受同源策略限制的特征，在src内写入请求地址，末尾回调处理数据

    <script type="text/javascript" src="http://localhost/Service.ashx?callback=jsonpCallback" />

    手动实现

    function jsonp(url,callback) {
	// 定义回调函数
    window[callback] = function(){//...todo}
    // 生成script标签
    let script = document.createElement('script')
    // 设置src地址
    script.src = url + '?fn=' + callback
    // 添加到document中
    document.appendChild(script)
}

9. cookie、sessionStorage、localStorage

cookie

  • 存储大小最大为4k
  • 总是携带于http请求中
  • 需设置max-age,超过时间则被销毁

sessionStorage

  • 存储大小最大为5M
  • 存储于本地中
  • 当前会话有效，页面或浏览器关闭则销毁
  • 从A跳转到B，B可与A共享sessionStorage；若单独打开B，则获取为null

localStorage

  • 存储大小最大为5M
  • 存储于本地中
  • 若未设置过期时间，则永久保存
  • 页面之间共享

若浏览器开启了隐私模式，则以上存储方式都会失效

avatar
文章
阅读
粉丝