请求&网络相关

GET 和 POST 区别

GET 和 POST 到底有什么区别？

听说『99% 的人都理解错了 HTTP 中 GET 与 POST 的区别』？？

GET 和 POST 本质上就是 TCP 链接并无差别，但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

1. 安全
2. 长度
3. 后退刷新
4. 数据位置
5. 请求个数
6. Get获取数据，Post提交数据

OPTIONS 请求

1. OPTIONS可以检测服务器所支持的请求方法；

2. CORS（跨域资源共享）中发起预检请求，可以检测实际请求是否可以被服务器所接受；

跨域

同源策略

同源策略限制：同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。 跨域：当一个请求url的 协议、域名、端口 三者之间任意一个与当前页面url不同即为跨域。

解决方案

1. jsonp
2. document.domain + iframe
3. location.hash + iframe
4. window.name + iframe
5. postMessage
6. CORS 跨域资源共享
7. nginx代理
8. nodejs中间件代理
9. WebSocket协议
10. vue框架里设置proxy代理等

JSONP

jsonp 能达到跨域效果，是利用 script 标签自身的跨域能力；

jsonp 是一种非正式传输协议，该协议的一个要点就是允许用户传递一个 callback 或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个 callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了；

jsonp 只能使用 GET 方式发起跨域请求；

jsonp 的优势在于支持老式浏览器，以及可以向不支持 CORS 的网站请求数据；

jsonp 跨域请求需要服务端配合，设置 callback，才能完成跨域请求。

CORS

CORS 是一个 W3C 标准，全称是"跨域资源共享";

CORS 允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制;

CORS 需要浏览器和服务器（Access-Control-Allow-Origin: *）同时支持;

CORS 支持所有类型的 HTTP 请求。

CSRF

CSRF 是什么？

面试官：什么是CSRF？

定义

CSRF（Cross-site request forgery，跨站请求伪造）：冒充受信任用户，向服务器发送非预期请求的攻击方式。

防御方案

1. 客户端对于数据库的修改请求，全部使用POST提交，禁止使用GET请求；
2. 服务端一般的做法是在表单里面添加一段隐藏的唯一的 token(请求令牌)；
3. Referer Check防盗链，检测请求是否来自合法的源；
4. 验证码；

XSS

【前端黑客】XSS入门

【前端安全】JavaScript防XSS攻击

定义

XSS（跨站脚本攻击）：恶意攻击者往 Web 页面里插入恶意 Script 代码，当用户浏览该页之时，嵌入 Web 里面的 Script 代码会被执行，从而达到恶意攻击用户的目的。

分类

• DOM型（无服务器参与）

  • 输入 XSS 代码内容(URL) -> 浏览器DOM解析-> 触发 XSS 攻击

• 反射型

  • 输入 XSS 代码内容(URL) -> 服务器解析返回 -> 浏览器解释执行 -> 触发 XSS 攻击

• 存储型

  • 提交 XSS 代码内容(表单、评论) -> 存储至服务器 -> 用户请求数据 -> 服务器返回数据 -> 浏览器解释执行 -> 触发 XSS 攻击

防御方案

1. 编码：转义用户的输入； 将 & 转为 &amp 将 < 转为 &lt 将 > 转为 &gt 将 " 转为 &quot
2. 校验，对输入及请求进行过滤检查，如过滤特殊字符，设置输入域匹配规则等；
3. 避免内联事件，如 onclick、onload 等；
4. 避免拼接 HTML；

浏览器缓存

简述浏览器端的九大缓存

简述浏览器缓存是如何控制的

九大缓存

• http 缓存

  • 基于HTTP协议的浏览器文件级缓存机制，减少重复请求；
  • expires、etag、last-modified；

• flash 缓存

  • 基于flash有读写浏览器端本地目录的功能，通过js调用flash去读写特定的磁盘目录，达到本地数据缓存的目的；
  • 基本不用

• Local Storage

  • 键值对存储；
  • 大小限制由不同浏览器决定；
  • 需要手动删除

• Session Storage

  • 键值对存储；
  • 大小限制由不同浏览器决定；
  • 关闭则全部删除

• Cookies

  • 键、值、域、过期时间、大小等组成；
  • 最大长度和域名个数由不同浏览器决定；
  • 网站为辨别用户身份、保存用户认证信息、进行session跟踪而储存在本地的数据(加密)，一般通过请求头一起发送到服务端；

• IndexedDB

  • 在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API；
  • 分别为同步和异步访问提供了单独的 API；

• Web SQL

  • 数据库形式存储，支持sql语句查询；
  • 创建 openDatabase()、查询 transaction()、执行 executeSql()；

• Application Cache

  • 将大部分图片资源、js、css等静态资源放在manifest文件配置中，当页面打开时通过manifest来读取本地文件或请求服务器文件；
  • 缺点：至少访问在线页面一次；
  • 优点：离线缓存、速度快、服务器负载少；

• Cache Storage

  • 保存每个serverWorker申明的cache对象；
  • 五个核心方法：open()、match()、has()、delete()、keys()；

HTTP缓存机制

• 无缓存
• 缓存 + 无更新
• 缓存 + Expires 更新机制
• 缓存 + Cache-Control 更新机制
• 缓存 + Cache-Control + ETag 更新机制（服务器再验证）

前后端鉴权

前后端分离 token 和 cookie 对比

关于前后端鉴权的几种方式

前后端鉴权问答

cookie

• 用户登录成功后，服务端存session，客户端存cookie=sessionID；
• 用户再次请求，携带cookie至服务端进行验证；
• cookie是有状态的、存在跨域问题、CSRF安全问题；

token

• 用户进行操作都带上token；
• token只需存在客户端，服务端进行解析；
• 存在形式多样，header/requestbody/url 都可以；
• token是无状态的、支持跨域、可避免 CSRF 跨站伪造攻击