Appearance
Web
同源策略
用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互,能帮助阻隔恶意文档,减少可能被攻击的媒介。同源判定的三个要素:协议、域名、端口
web安全
XSS:跨站脚本攻击,原理是恶意攻击者往Web页面里插入恶意可执行网页脚本代码,当用户浏览该页面时,嵌入其中的脚本代码会被执行,从而可以达到盗取用户信息或其他侵犯用户安全隐私的目的,主要有2种:非持久型(反射型)、持久性(存储型)非持久型(反射型):只是简单地把用户输入的数据反射给浏览器,恶意攻击者往往需要引诱用户进行一次点击才能成功
持久型(存储型):会把用户输入的数据"存储"在服务器端
XSS的防御:HttpOnly、输入检查、输出检查CSRF:跨站点请求伪造,是一种挟持用户在当前已登录的web应用程序上执行恶意的操作的攻击方法,简单的说,是攻击者通过一些技术手段欺骗用户的浏览器去访问一个曾经认证过的网站并执行一些操作CSRF的防御:验证码、检查HTTP头部的Referer字段、添加校验tokenXSS利用的是用户对指定网站的信任,CSRF利用的是网站对用户网页浏览器的信任
跨域手段
JSONP(兼容性好,只支持GET请求)CORS:跨域资源共享HTML5的
postMessage
CORS、预检和options请求
CORS:跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。背后的思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败
整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者而言,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨域,就会自动添加一些附加的头信息,有时还会多出一次附加的请求(取决于是否为简单请求),但用户不会有感觉
实现CORS通信的关键是服务器,只要服务器实现了CORS接口,就可以跨域通信
当发起跨域请求时,浏览器发现当前为非简单请求时,就会发起OPTIONS请求。OPTIONS请求即预检请求,可用于检测服务器允许的HTTP方法,若服务器接受该跨域请求,浏览器才继续发起正式请求
GET和POST的区别
GET用于获取信息,是无副作用的,是幂等的,且可缓存
POST用户修改服务器上的数据,有副作用,非幂等,不可缓存
GET和POST都是HTTP协议中定义的请求方法
GET通过url/cookie传参,而POST通过request body传参,是因为HTTP协议用法的规定
GET提交数据有长度限制,而POST的数据可以非常大,是由于浏览器或服务器对url的限制
POST比GET安全,从传输角度上讲,其实都是不安全的,因为HTTP是明文传输的,只要在网络节点上捉包,就能完整的获取数据报文,要想安全传输,就只有加密,也就是HTTPS (GET发送一个TCP数据包,POST发送两个TCP数据包,未做测试)
HTTP1.0、HTTP1.1、HTTP2.0的特性和区别
1.0
无状态:服务器不跟踪不记录请求过的状态
无连接:浏览器每次请求都需要建立
TCP连接
缺点:无法复用连接、队头阻塞
1.1(针对1.0做的改进)
长连接:新增
connection字段,可设置keep-alive值保持连接不断开管道化:可以不等第一个请求响应继续发送后面的请求,但响应的顺序还是按照请求的顺序返回
缓存处理:新增字段
cache-control断点传输:上传/下载资源时,如果资源过大,将其分割为多个部分,当网络故障时,可以从已经上传/下载好的地方继续请求,不必从头开始,提高效率
2.0
二进制分帧:将所有传输的信息分割为更小的消息和帧,并对它们采用二进制格式的编码
多路复用:代替了原来的序列和阻塞机制,所有的请求都是通过一个
TCP连接完成的。同域名下所有通信都在单个连接上完成,同个域名只需占用一个TCP连接,使用一个连接并行发送多个请求和响应头部压缩
服务器推送*
HTTP报文包括
状态行、请求头/响应头、消息主体
从url输入到页面展示到底发生了什么?
DNS解析:将域名解析为
ip地址TCP连接:
TCP三次握手发送
HTTP请求服务器处理请求并返回响应
浏览器渲染页面
断开连接:
TCP四次挥手
浏览器的渲染进程
浏览器的渲染进程是多线程的,主要线程有,其中GUI渲染线程和JS引擎线程是互斥的,即不能同时执行,执行其中一个时,另一个会被挂起
GUI渲染线程:负责渲染页面,解析HTML、CSS,构建DOM树和RenderObject树,页面的回流和重绘JS引擎线程事件触发线程
定时触发器线程
异步
HTTP请求线程
浏览器渲染过程(重绘和回流)
解析
HTML,构建DOM树,同时浏览器负责下载csscss下载完成后,解析css形成树形数据结构,再结合DOM树生成渲染(Render)树回流(
Layout):根据渲染树进行回流,得到节点的几何信息(位置、大小)重绘(
Painting):根据渲染树及回流得到的几何信息,得到节点的绝对像素将像素发送给
GPU,展示在页面上