前端网络和安全相关总结

2023年6月21日发(作者：)

前端⽹络和安全相关总结本⽂旨在总结⼀下前端相关的⽹络和安全相关的⼀些知识点，每个点都相对简陋，只⽤来了解个⼤概。⼀、浏览器页⾯渲染的流程1）解析⽂档构建DOM树HTML/XHTML/SVG：解析这三种⽂件后，会⽣成DOM树（DOM Tree）CSS：解析样式表，⽣成CSS规则树（CSS Rule Tree）JavaScript：解析脚本，通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，与⽤户进⾏交互。2）构建渲染树解析⽂档完成后，浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上，并根据DOM Tree 和 CSS Rule Tree构造 RenderingTree（渲染树）3）布局与绘制渲染树解析position, overflow, z-index等等属性，计算每⼀个渲染树节点的位置和⼤⼩，此过程被称为reflow。最后调⽤操作系统的Native GUIAPI完成绘制（repain）解析html⽂档，遇到HTML标签时，构建DOM树。在构建DOM的过程中，如果遇到外联的样式声明或脚本声明，则暂停⽂档解析，创建新的⽹络连接，开始下载样式⽂件和脚本⽂件。样式⽂件下载完成后，构建CSS Rule DOM，脚本⽂件下载完成后，解释并⽴即执⾏。构建DOM的同时，结合CSS规则树完成页⾯渲染。如果DOM树先于CSS规则树构建完成，则在CSS规则树构建完成后，页⾯会发⽣⼀次重绘，将新构建的CSS规则应⽤于渲染树。脚本⽂件对⽂档解析的影响在这个过程中，脚本⽂件的下载和执⾏是与⽂档解析同步进⾏的，脚本⽂件的下载和执⾏都会阻塞⽂档的解析，如果控制得不好，在⽤户体验上就会造成⼀定程度的影响。⼆、css会阻塞页⾯渲染吗？会的话该怎么解决呢？1).css加载不会阻塞DOM树的解析2).css加载会阻塞DOM树的渲染3).css加载会阻塞后⾯js语句的执⾏根据上⼀点浏览器渲染流程，可以知道，当css树还没构建完成时，页⾯是不会渲染到浏览器界⾯的，这也是为什么当css下载过慢时，会出现⽩屏的现象。因此，为了避免让⽤户看到长时间的⽩屏时间，我们应该尽可能的提⾼css加载速度1)使⽤CDN(因为CDN会根据你的⽹络状况，替你挑选最近的⼀个具有缓存内容的节点为你提供资源，因此可以减少加载时间)2)对css进⾏压缩(可以⽤很多打包⼯具，⽐如webpack,gulp等，也可以通过开启gzip压缩)3)合理的使⽤缓存(设置cache-control,expires,以及E-tag都是不错的，不过要注意⼀个问题，就是⽂件更新后，你要避免缓存⽽带来的影响。其中⼀个解决防范是在⽂件名字后⾯加⼀个版本号)4)减少http请求数，将多个css⽂件合并，或者是⼲脆直接写成内联样式(内联样式的⼀个缺点就是不能缓存)5)利⽤媒体类型和查询来解除对渲染的阻塞。三、浏览器缓存机制缓存位置分为：Service Worker；Memory Cache；Disk Cache；Push Cache（推送缓存）是HTTP/2中的内容，当前⾯三种缓存都没有命中时，它才会被使⽤Service Worker 是运⾏在浏览器背后的独⽴线程，⼀般可以⽤来实现缓存功能。使⽤ Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使⽤ HTTPS 协议来保障安全。Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们⾃由控制缓存哪些⽂件、如何匹配缓存、如何读取缓存，并且缓存是持续性的缓存策略分两种：强缓存、协商缓存。强缓存不会向服务器发送请求，直接从缓存中读取资源，如果命中并有效就使⽤缓存，否则就发请求，强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control；协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识（Etag,If-Modified-Since等）决定是否使⽤缓存的过程。如果未变会返回304告知浏览器直接使⽤缓存资源，否则返回最新资源。缓存⽅法即其对⽐：1）响应头Last-Modified和请求头加If-Modified-Since弊端：如果本地打开缓存⽂件，即使没有对⽂件进⾏修改，但还是会造成 Last-Modified 被修改，服务端不能命中缓存导致发送相同的资源。因为 Last-Modified 只能以秒计时，如果在不可感知的时间内修改完成⽂件，那么服务端会认为资源还是命中了，不会返回正确的资源。2）ETag和If-None-Match两种⽅法对⽐：Last-Modified的时间单位是秒，如果某个⽂件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度；如果是负载均衡的服务器，各个服务器⽣成的Last-Modified也有可能不⼀致。第⼆在性能上，Etag要逊于Last-Modified，毕竟Last-Modified只需要记录时间，⽽Etag需要服务器通过算法来计算出⼀个hash值。第三在优先级上，服务器校验优先考虑Etag

关于缓存推荐四、常见http状态码2xx表⽰成功的请求200表⽰OK，正常返回信息204 成功处理，没有内容。206 范围请求响应3xx表⽰重定向301表⽰永久重定向，请求的⽹页已经永久移动到新位置302表⽰临时重定向304表⽰⾃从上⼀次请求以来，页⾯的内容没有改变过4xx表⽰客户端错误400请求报⽂存在语法错误401表⽰认证失败（发送的请求需要通过HTTP认证）403表⽰没有权限，服务器拒绝访问404表⽰请求的资源不存在，⼀般是路径写错了405表⽰请求⽅法不允许，⼀般是请求⽅法⽤错了5xx表⽰服务器错误500表⽰服务器执⾏请求时发⽣错误503表⽰服务器暂时⽆法处理请求（超负载或正在停机维护）五、浏览器地址栏键⼊URL后会发⽣什么1）查找 disk cache 中是否有匹配，如有直接显⽰缓存内容2）DNS域名解析3）三次握⼿,建⽴连接，发送请求4）服务器收到请求，处理请求，返回响应5）4次挥⼿，断开TCP连接6）浏览器根据返回数据进⾏页⾯渲染六、TCP连接、断开为什么三次握⼿和4次挥⼿三次握⼿：⽬的：为了准确⽆误地将数据送达⽬标处，TCP协议采⽤了三次握⼿策略。发送端⾸先发送⼀个带SYN标志的数据包给对⽅。接收端收到后，回传⼀个带SYN/ACK标志的数据包以⽰传达确认信息。最后，发送端再回传⼀个带ACK标志的数据包，代表握⼿结束，建⽴连接。四次挥⼿：为了持久连接，其特点是只要任意⼀端没有明确提出断开连接，则保持TCP连接状态；其好处是在于减少了TCP连接的重复建⽴和断开所造成的额外开销，减轻了服务器端的负载。另外，减少开销的时间，使HTTP请求和响应能更早结束，从⽽提⾼web页⾯的显⽰速度。服务器端发送⼀个带FIN标记的数据包给客户端；客服端分两次发送带ACK、FIN标志数据包给服务端；服务端发送带ACK标志的数据包给客户端并断开连接

七、http协议不安全的原因，https是如何解决的http不⾜之处：1）通信使⽤明⽂，不加密，内容可能被窃听。2）不验证通信⽅的⾝份，因此可能会遭遇伪装。3）⽆法证明报⽂的完整性，所以有可能已遭篡改。https:1)⽤SSL（安全套接层）对通信线路进⾏加密2）SSL有⼀种称为证书的⼿段，⽤于确定通信双⽅。通过使⽤证书，以证明通信⽅就是意料中的服务器，客户端持有证书即可完成个⼈⾝份的确认。3）通过校验数字签名，将⼀段⽂本先⽤Hash函数⽣成消息摘要，然后⽤发送者的私钥加密⽣成数字签名，与原⽂⽂⼀起传送给接收者。接收者通过校验数字签名来确定完成性。https的缺点：1）https与http相⽐通信速度会更慢，SSL必须进⾏加密处理，服务器和客户端在加密解密的过程中会消耗更多的硬件资源导致处理速度变慢。2）https通信，证书是必不可少的，⽽证书是需要花钱的。前端中⽐较常见的攻击⼿段：1）XSS攻击xss：全称跨站脚本攻击（Cross-Site Scripting），简单的说就是攻击者通过在⽬标⽹站上注⼊恶意脚本并运⾏，获取⽤户的敏感信息如Cookie、SessionID 等，影响⽹站与⽤户数据安全。原因：当攻击者通过某种⽅式向浏览器页⾯注⼊了恶意代码，并且浏览器执⾏了这些代码。解决措施：渲染页⾯前都要先做 HTML 过滤，然后再渲染，对输⼊数据中的html标签< >进⾏转义 < > httpOnly2）CSRF 攻击CSRF 攻击全称跨站请求伪造（Cross-site Request Forgery），简单的说就是攻击者盗⽤了你的⾝份，以你的名义发送恶意请求。CSRF的另⼀个特征是，攻击者⽆法直接窃取到⽤户的信息（Cookie，Header，⽹站内容等），仅仅是冒⽤Cookie中的信息。策略：CSRF⾃动防御策略：同源检测（Origin 和 Referer 验证）。CSRF主动防御措施：Token验证 或者 双重Cookie验证 以及配合Samesite Cookie。保证页⾯的幂等性，后端接⼝不要在GET页⾯中做⽤户操作。推荐《图解HTTP》这本书，通过阅读它，对以上知识点你会有更全⾯的了解。

2023年6月21日发(作者：)

前端⽹络和安全相关总结本⽂旨在总结⼀下前端相关的⽹络和安全相关的⼀些知识点，每个点都相对简陋，只⽤来了解个⼤概。⼀、浏览器页⾯渲染的流程1）解析⽂档构建DOM树HTML/XHTML/SVG：解析这三种⽂件后，会⽣成DOM树（DOM Tree）CSS：解析样式表，⽣成CSS规则树（CSS Rule Tree）JavaScript：解析脚本，通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，与⽤户进⾏交互。2）构建渲染树解析⽂档完成后，浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上，并根据DOM Tree 和 CSS Rule Tree构造 RenderingTree（渲染树）3）布局与绘制渲染树解析position, overflow, z-index等等属性，计算每⼀个渲染树节点的位置和⼤⼩，此过程被称为reflow。最后调⽤操作系统的Native GUIAPI完成绘制（repain）解析html⽂档，遇到HTML标签时，构建DOM树。在构建DOM的过程中，如果遇到外联的样式声明或脚本声明，则暂停⽂档解析，创建新的⽹络连接，开始下载样式⽂件和脚本⽂件。样式⽂件下载完成后，构建CSS Rule DOM，脚本⽂件下载完成后，解释并⽴即执⾏。构建DOM的同时，结合CSS规则树完成页⾯渲染。如果DOM树先于CSS规则树构建完成，则在CSS规则树构建完成后，页⾯会发⽣⼀次重绘，将新构建的CSS规则应⽤于渲染树。脚本⽂件对⽂档解析的影响在这个过程中，脚本⽂件的下载和执⾏是与⽂档解析同步进⾏的，脚本⽂件的下载和执⾏都会阻塞⽂档的解析，如果控制得不好，在⽤户体验上就会造成⼀定程度的影响。⼆、css会阻塞页⾯渲染吗？会的话该怎么解决呢？1).css加载不会阻塞DOM树的解析2).css加载会阻塞DOM树的渲染3).css加载会阻塞后⾯js语句的执⾏根据上⼀点浏览器渲染流程，可以知道，当css树还没构建完成时，页⾯是不会渲染到浏览器界⾯的，这也是为什么当css下载过慢时，会出现⽩屏的现象。因此，为了避免让⽤户看到长时间的⽩屏时间，我们应该尽可能的提⾼css加载速度1)使⽤CDN(因为CDN会根据你的⽹络状况，替你挑选最近的⼀个具有缓存内容的节点为你提供资源，因此可以减少加载时间)2)对css进⾏压缩(可以⽤很多打包⼯具，⽐如webpack,gulp等，也可以通过开启gzip压缩)3)合理的使⽤缓存(设置cache-control,expires,以及E-tag都是不错的，不过要注意⼀个问题，就是⽂件更新后，你要避免缓存⽽带来的影响。其中⼀个解决防范是在⽂件名字后⾯加⼀个版本号)4)减少http请求数，将多个css⽂件合并，或者是⼲脆直接写成内联样式(内联样式的⼀个缺点就是不能缓存)5)利⽤媒体类型和查询来解除对渲染的阻塞。三、浏览器缓存机制缓存位置分为：Service Worker；Memory Cache；Disk Cache；Push Cache（推送缓存）是HTTP/2中的内容，当前⾯三种缓存都没有命中时，它才会被使⽤Service Worker 是运⾏在浏览器背后的独⽴线程，⼀般可以⽤来实现缓存功能。使⽤ Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使⽤ HTTPS 协议来保障安全。Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们⾃由控制缓存哪些⽂件、如何匹配缓存、如何读取缓存，并且缓存是持续性的缓存策略分两种：强缓存、协商缓存。强缓存不会向服务器发送请求，直接从缓存中读取资源，如果命中并有效就使⽤缓存，否则就发请求，强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control；协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识（Etag,If-Modified-Since等）决定是否使⽤缓存的过程。如果未变会返回304告知浏览器直接使⽤缓存资源，否则返回最新资源。缓存⽅法即其对⽐：1）响应头Last-Modified和请求头加If-Modified-Since弊端：如果本地打开缓存⽂件，即使没有对⽂件进⾏修改，但还是会造成 Last-Modified 被修改，服务端不能命中缓存导致发送相同的资源。因为 Last-Modified 只能以秒计时，如果在不可感知的时间内修改完成⽂件，那么服务端会认为资源还是命中了，不会返回正确的资源。2）ETag和If-None-Match两种⽅法对⽐：Last-Modified的时间单位是秒，如果某个⽂件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度；如果是负载均衡的服务器，各个服务器⽣成的Last-Modified也有可能不⼀致。第⼆在性能上，Etag要逊于Last-Modified，毕竟Last-Modified只需要记录时间，⽽Etag需要服务器通过算法来计算出⼀个hash值。第三在优先级上，服务器校验优先考虑Etag

关于缓存推荐四、常见http状态码2xx表⽰成功的请求200表⽰OK，正常返回信息204 成功处理，没有内容。206 范围请求响应3xx表⽰重定向301表⽰永久重定向，请求的⽹页已经永久移动到新位置302表⽰临时重定向304表⽰⾃从上⼀次请求以来，页⾯的内容没有改变过4xx表⽰客户端错误400请求报⽂存在语法错误401表⽰认证失败（发送的请求需要通过HTTP认证）403表⽰没有权限，服务器拒绝访问404表⽰请求的资源不存在，⼀般是路径写错了405表⽰请求⽅法不允许，⼀般是请求⽅法⽤错了5xx表⽰服务器错误500表⽰服务器执⾏请求时发⽣错误503表⽰服务器暂时⽆法处理请求（超负载或正在停机维护）五、浏览器地址栏键⼊URL后会发⽣什么1）查找 disk cache 中是否有匹配，如有直接显⽰缓存内容2）DNS域名解析3）三次握⼿,建⽴连接，发送请求4）服务器收到请求，处理请求，返回响应5）4次挥⼿，断开TCP连接6）浏览器根据返回数据进⾏页⾯渲染六、TCP连接、断开为什么三次握⼿和4次挥⼿三次握⼿：⽬的：为了准确⽆误地将数据送达⽬标处，TCP协议采⽤了三次握⼿策略。发送端⾸先发送⼀个带SYN标志的数据包给对⽅。接收端收到后，回传⼀个带SYN/ACK标志的数据包以⽰传达确认信息。最后，发送端再回传⼀个带ACK标志的数据包，代表握⼿结束，建⽴连接。四次挥⼿：为了持久连接，其特点是只要任意⼀端没有明确提出断开连接，则保持TCP连接状态；其好处是在于减少了TCP连接的重复建⽴和断开所造成的额外开销，减轻了服务器端的负载。另外，减少开销的时间，使HTTP请求和响应能更早结束，从⽽提⾼web页⾯的显⽰速度。服务器端发送⼀个带FIN标记的数据包给客户端；客服端分两次发送带ACK、FIN标志数据包给服务端；服务端发送带ACK标志的数据包给客户端并断开连接

七、http协议不安全的原因，https是如何解决的http不⾜之处：1）通信使⽤明⽂，不加密，内容可能被窃听。2）不验证通信⽅的⾝份，因此可能会遭遇伪装。3）⽆法证明报⽂的完整性，所以有可能已遭篡改。https:1)⽤SSL（安全套接层）对通信线路进⾏加密2）SSL有⼀种称为证书的⼿段，⽤于确定通信双⽅。通过使⽤证书，以证明通信⽅就是意料中的服务器，客户端持有证书即可完成个⼈⾝份的确认。3）通过校验数字签名，将⼀段⽂本先⽤Hash函数⽣成消息摘要，然后⽤发送者的私钥加密⽣成数字签名，与原⽂⽂⼀起传送给接收者。接收者通过校验数字签名来确定完成性。https的缺点：1）https与http相⽐通信速度会更慢，SSL必须进⾏加密处理，服务器和客户端在加密解密的过程中会消耗更多的硬件资源导致处理速度变慢。2）https通信，证书是必不可少的，⽽证书是需要花钱的。前端中⽐较常见的攻击⼿段：1）XSS攻击xss：全称跨站脚本攻击（Cross-Site Scripting），简单的说就是攻击者通过在⽬标⽹站上注⼊恶意脚本并运⾏，获取⽤户的敏感信息如Cookie、SessionID 等，影响⽹站与⽤户数据安全。原因：当攻击者通过某种⽅式向浏览器页⾯注⼊了恶意代码，并且浏览器执⾏了这些代码。解决措施：渲染页⾯前都要先做 HTML 过滤，然后再渲染，对输⼊数据中的html标签< >进⾏转义 < > httpOnly2）CSRF 攻击CSRF 攻击全称跨站请求伪造（Cross-site Request Forgery），简单的说就是攻击者盗⽤了你的⾝份，以你的名义发送恶意请求。CSRF的另⼀个特征是，攻击者⽆法直接窃取到⽤户的信息（Cookie，Header，⽹站内容等），仅仅是冒⽤Cookie中的信息。策略：CSRF⾃动防御策略：同源检测（Origin 和 Referer 验证）。CSRF主动防御措施：Token验证 或者 双重Cookie验证 以及配合Samesite Cookie。保证页⾯的幂等性，后端接⼝不要在GET页⾯中做⽤户操作。推荐《图解HTTP》这本书，通过阅读它，对以上知识点你会有更全⾯的了解。