2024前端面试高频题（三）浏览器计网篇

浏览器

浏览器资源解析渲染

解析渲染流程

• 浏览器开始解析 HTML，构造DOM树。当解析器遇到非阻塞资源（图片等）会请求资源并继续解析；遇到CSS也会继续解析；遇到script标签（特别是没有async和defer属性的）会阻塞渲染停止HTML解析。

• 处理CSS并构建CSSOM树，同时解析编译JavaScript文件。

• 将CSSOM和DOM合成一个渲染树，渲染步骤包括样式、布局、绘制，在某些情况下还包括合成。

CSS会阻塞浏览器渲染，会阻塞后续JS执行；JS会阻塞浏览器解析；IMG不会阻塞。

问题一：CSS放在头部的原因？Script放在尾部的原因？

1. 放在尾部，html解析不受影响，浏览器会在样式加载解析完后，重新计算样式绘制，造成回流重绘、页面闪动等现象。

2. 浏览器遇到script会立即下载执行，会阻塞html解析。如果js脚本加载时间太长，会造成页面长时间未响应。

问题二：DOM和CSSOM构建顺序关系

构建DOM树和CSSOM树是并行的；所以CSS加载不会阻塞DOM解析，但渲染树需要同时依赖两者，所以会阻塞DOM渲染。

浏览器安全

XSS

跨站脚本攻击。指攻击者在返回的HTML中嵌入javascript脚本，从而拿到用户信息并进行操作。分三种类型：

存储型

将脚本存储到服务器数据库，然后在客户端执行脚本达到攻击效果。常见于：评论区提交一段脚本代码，如果前后端没有做好转义，存储到数据库后，在客户端渲染时直接执行。

反射型

恶意脚本作为请求URL参数，浏览器解析后执行。与存储型不同，服务器不会存储这些恶意脚本。

文档型

与反射型相同，恶意脚本被作为请求URL的参数。区别在于JS取出URL中的恶意代码执行。

防范措施

1. 转义和过滤：对引号、尖括号、斜杠进行转义；过滤则把script标签过滤掉

2. 利用HttpOnly：cookie设置HttpOnly，禁止js脚本访问cookie。

3. CSP：浏览器内容安全策略，只允许加载指定域脚本及样式。

CSRF

跨站请求伪造，即黑客诱导用户跳转恶意网站，利用用户登陆态发起恶意请求。原理是http请求会携带cookie。

防范措施

1. SameSite Cookie：该属性表示cookie不会随着跨域请求发送，减少CSRF攻击；

2. Origin和Referer：验证Referer是否从第三方网站发出，组织第三方网站请求，但可以通过ajax自定义请求头方式伪造。

3. CSRF Token： 客户端向服务器请求token，然后在所有请求中带上。

SQL注入

把SQL命令插入web表单、页面请求的查询字符串中提交到服务器，达到欺骗服务器执行恶意SQL命令到效果。

防范措施

1. 对用户输入进行校验，通过正则表达式，或限制长度、对单 # 以及双 - 进行转换

2. 不要使用动态拼装SQL，使用参数化SQL或进行直接使用存储过程进行数据查询存取。

3. 不要使用管理员权限进行数据库链接。

4. 不要把机密信息明文存放，加密货hash掉密码和敏感信息。

点击劫持

一种视觉欺骗的攻击手段，将需要攻击的网站通过iframe嵌套在自己网页中，并将iframe设置透明，在页面中透出一个按钮诱导点击。

防范措施

使用 X-FRAME-OPTIONS，是一个HTTP响应投，防止iframe嵌套的点击挟持攻击。有三个值可选：

• DENY，表示页面不允许通过 iframe 的方式展示

• SAMEORIGIN，表示页面可以在相同域名下通过 iframe 的方式展示

• ALLOW-FROM，表示页面可以在指定来源的 iframe 中展示

分析CSRF和XSS区别

两者的原理区别：CSRF 是利用 网站A 本身的漏洞，去请求 网站A 的 api。而 XSS 是向网站A 注入 JS代码，然后执行 JS 里的代码，篡改网站A的内容。

CSRF仅仅是