getComputedStyle

Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。

1
2

let style = window.getComputedStyle(element, [pseudoElt]);
// let afterStyle = window.getComputedStyle(h3, '::after');

• pseudoElt 可选，指定一个要匹配的伪元素的字符串。

@supports是CSS3新引入的规则之一，主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式。

1、基本使用

1
2
3
4
5

@supports (display: grid) {
    .container {
        color: red;
    }
}

类似@media媒体查询，当浏览器支持display:grid这个CSS属性时才应用其中的样式。

一、BASIC认证概述

HTTP协议定义了基本认证过程，允许HTTP服务器对WEB浏览器进行用户身份证的方法。

1. 当一个客户端向HTTP服务器进行数据请求时，如果客户端未被认证，则HTTP服务器将通过基本认证过程对客户端的用户名及密码进行验证，以决定用户是否合法。
2. 客户端在接收到HTTP服务器的身份认证要求后，会提示用户输入用户名及密码，然后将用户名及密码以BASE64加密，加密后的密文将附加于请求信息中， 如当用户名为anjuta，密码为：123456时，客户端将用户名和密码用“：”合并，并将合并后的字符串用BASE64加密为密文，并于每次请求数据 时，将密文附加于请求头（Request Header）中。
3. HTTP服务器在每次收到请求包后，根据协议取得客户端附加的用户信息（BASE64加密的用户名和密码），解开请求包，对用户名及密码进行验证，如果用 户名及密码正确，则根据客户端请求，返回客户端所需要的数据;否则，返回错误代码或重新要求客户端提供用户名及密码。

一、版本号

版本号的格式：主版本号(major).次版本号(minor).补丁版本号(patch)

• 主版本号： 新的架构调整，不兼容老版本
• 次版本号： 新增功能，兼容老版本
• 补丁版本号： 修复bug，兼容老版本

一、TCP报文格式

TCP报文格式图：

上图中有几个字段需要重点介绍下：

1. 序号：Seq序号，占32位，用来标识从TCP源端向目的端发送的字节流，发起方发送数据时对此进行标记。
2. 确认序号：Ack序号，占32位，只有ACK标志位为1时，确认序号字段才有效，Ack=Seq+1。
3. 标志位：共6个，即URG、ACK、PSH、RST、SYN、FIN等，具体含义如下：
   • URG：紧急指针（urgent pointer）有效。
   • ACK：确认序号有效。
   • PSH：接收方应该尽快将这个报文交给应用层。
   • RST：重置连接。
   • SYN：发起一个新连接。
   • FIN：释放一个连接。

注：

• 不要将确认序号Ack与标志位中的ACK搞混了。
• 确认方Ack=发起方Req+1，两端配对。

一、过渡函数

• ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
• ease-in 规定以慢速开始的过渡效果
• ease-out 规定以慢速结束的过渡效果
• ease-in-out 规定以慢速开始和结束的过渡效果

1、application/x-www-form-urlencoded

浏览器的原生<form> 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。 对应postman中的x-www-form-urlencoded。

1
2
3
4

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

1
2
3

decodeURI('title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3')
// "title=test&sub[]=1&sub[]=2&sub[]=3"
// sub：[1,2,3]

注：提交的数据按照 key1=val1&key2=val2 的方式进行编码，key和val都进行了URL转码

一、CSRF攻击原理

从上图可以看出，要完成一次CSRF攻击，受害者必须依次完成两个步骤：

　　1.登录受信任网站A，并在本地生成Cookie

　　2.在不登出A的情况下，访问危险网站B

注：

• 如果不满足以上两个条件中的一个，就不会受到CSRF的攻击
• 网站B向网站A发送请求时，如果网站A在打开状态下，那么该请求会携带网站A页面下的cookie（待验证）
• CSRF攻击是以突破同源策略限制为前提的

一、Cookie

1、Secure 和HttpOnly 标记

• Secure ：标记为 Secure 的Cookie，只应通过被HTTPS协议加密过的请求发送给服务端

• HttpOnly ：标记为 HttpOnly 的Cookie，JavaScript 无法访问带有 HttpOnly 标记的Cookie，它们只应该发送给服务端，避免跨域脚本 XSS

2、SameSite Cookies

SameSite Cookie允许服务器要求某个cookie在跨站请求时不会被发送，从而可以阻止跨站请求伪造攻击CSRF。但目前SameSite Cookie还处于实验阶段，并不是所有浏览器都支持。

一、安装gulp和插件

1、安装gulp

1
2

npm install gulp -g
npm install gulp --save-dev