Skip to content

Web

同源策略

用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互,能帮助阻隔恶意文档,减少可能被攻击的媒介。同源判定的三个要素:协议、域名、端口

web安全

  • XSS:跨站脚本攻击,原理是恶意攻击者往Web页面里插入恶意可执行网页脚本代码,当用户浏览该页面时,嵌入其中的脚本代码会被执行,从而可以达到盗取用户信息或其他侵犯用户安全隐私的目的,主要有2种:非持久型(反射型)、持久性(存储型)

    • 非持久型(反射型):只是简单地把用户输入的数据反射给浏览器,恶意攻击者往往需要引诱用户进行一次点击才能成功

    • 持久型(存储型):会把用户输入的数据"存储"在服务器端

  • XSS的防御:HttpOnly、输入检查、输出检查

  • CSRF:跨站点请求伪造,是一种挟持用户在当前已登录的web应用程序上执行恶意的操作的攻击方法,简单的说,是攻击者通过一些技术手段欺骗用户的浏览器去访问一个曾经认证过的网站并执行一些操作 CSRF的防御:验证码、检查HTTP头部的Referer字段、添加校验token

  • XSS利用的是用户对指定网站的信任,CSRF利用的是网站对用户网页浏览器的信任

跨域手段

  • JSONP(兼容性好,只支持GET请求)

  • CORS:跨域资源共享

  • HTML5的postMessage

CORS、预检和options请求

CORS:跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。背后的思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败

整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者而言,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨域,就会自动添加一些附加的头信息,有时还会多出一次附加的请求(取决于是否为简单请求),但用户不会有感觉

实现CORS通信的关键是服务器,只要服务器实现了CORS接口,就可以跨域通信

当发起跨域请求时,浏览器发现当前为非简单请求时,就会发起OPTIONS请求。OPTIONS请求即预检请求,可用于检测服务器允许的HTTP方法,若服务器接受该跨域请求,浏览器才继续发起正式请求

GETPOST的区别

GET用于获取信息,是无副作用的,是幂等的,且可缓存

POST用户修改服务器上的数据,有副作用,非幂等,不可缓存

GETPOST都是HTTP协议中定义的请求方法

GET通过url/cookie传参,而POST通过request body传参,是因为HTTP协议用法的规定

GET提交数据有长度限制,而POST的数据可以非常大,是由于浏览器或服务器对url的限制

POSTGET安全,从传输角度上讲,其实都是不安全的,因为HTTP是明文传输的,只要在网络节点上捉包,就能完整的获取数据报文,要想安全传输,就只有加密,也就是HTTPSGET发送一个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树,同时浏览器负责下载css

  • css下载完成后,解析css形成树形数据结构,再结合DOM树生成渲染(Render)树

  • 回流(Layout):根据渲染树进行回流,得到节点的几何信息(位置、大小)

  • 重绘(Painting):根据渲染树及回流得到的几何信息,得到节点的绝对像素

  • 将像素发送给GPU,展示在页面上

回流一定会触发重绘,但重绘不一定会回流