【前端必备】六、网络与安全

1.当你在浏览器里输入一个网址时：

这题区分度高，知识点覆盖广，再不懂的人，也能答出几句，

  而高手可以根据自己擅长的领域自由发挥，从URL规范、HTTP协议、DNS、CDN、数据库查询、到浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等；

简述：

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. web服务器的后端应用会找到对应的请求处理，响应http请求，

e.浏览器得到收到响应报文，解析响应报文，按照资源类型做相应的处理，

f. 浏览器解析html代码，并请求html代码中的src、href、ajax指定的资源。

g. 浏览器对页面进行渲染呈现给用户

2.浏览器的同源政策

同源指协议、域名、端口相同，为了保护用户信息安全，防止恶意的网站窃取数据。

不同源的限制：

（1） COOKIE、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。（iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。）
（3） AJAX 请求不能发送。

同源政策的规避：

（1）架设服务器代理

（2）JSONP（网页通过添加一个元素，向服务器请求JSON数据，服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。只能使用get请求）

（3）webSocket通信协议，ws://和wss://。

（4）CORS跨域资源共享，CORS允许任何类型的请求。

  浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

请求时：

  Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

响应时：

  如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

**Access-Control-Allow-Origin**: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

（5）document.domain

该方式只能用于二级域名相同的情况下。

比如 a.test.com 和 b.test.com 适用于该方式。

只需要给页面添加 document.domain = 'test.com' 表示二级域名都相同就可以实现跨域。

（6）postMessage

这种方式通常用于获取嵌入页面中的第三方页面数据。

一个页面发送消息，另一个页面判断来源并接收消息。

// 发送消息端
window.parent.postMessage('message', url)
// 接收消息端
var mc = new MessageChannel()
mc.addEventListener('message', event => {
var origin = event.origin || event.originalEvent.origin
if (origin === 'url') {
console.log('验证通过')
}
})

3.HTTP状态玛

1xx：指示信息--表示请求已接收，继续处理

2xx：成功--表示请求已被成功接收、理解、接受

3xx：重定向--要完成请求必须进行更进一步的操作

4xx：客户端错误--请求有语法错误或请求无法实现

5xx：服务器端错误--服务器未能实现合法的请求

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

200 OK 正常返回信息

201 Created 请求成功并且服务器创建了新的资源

202 Accepted 服务器已接受请求，但尚未处理

301 Moved Permanently 请求的网页已永久移动到新位置。

302 Found 临时性重定向。

303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。

304 Not Modified 自从上次请求后，请求的网页未修改过。(协商缓存首次请求的资源未变的响应)

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。

401 Unauthorized 请求未授权。

403 Forbidden 禁止访问。

404 Not Found 找不到如何与 URI 相匹配的资源。

500 Internal Server Error 最常见的服务器端错误。

503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

4.请求方法

请求由三部分组成：请求行、消息报头、请求正文

□ GET     请求获取Request-URI所标识的资源

□ POST    在Request-URI所标识的资源后附加新的数据

□ HEAD    请求获取由Request-URI所标识的资源的响应消息报头

□ PUT     请求服务器存储一个资源，并用Request-URI作为其标识

□ DELETE  请求服务器删除Request-URI所标识的资源

□ TRACE   请求服务器回送收到的请求信息，主要用于测试或诊断

□ CONNECT 保留将来使用

□ OPTIONS 请求查询服务器的性能，或者查询与资源相关的选项和需求

5.get和post的区别

6.常见web攻击技术简述

（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者Javascript进行的一种攻击。

（2）SQL注入攻击

（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

措施：

• 对于XSS攻击，服务器响应时set-COOKIE设置http-only，则不能通过 JS 访问 COOKIE，减少 XSS 攻击


• 对输入进行验证，过滤掉可疑的代码


• 每个请求都带上一个由服务器生成的随机参数用于验证请求真伪，防止黑客恶意伪造