浏览器工作原理

最新推荐文章于 2023-10-27 10:42:39 发布

葡萄已熟透

最新推荐文章于 2023-10-27 10:42:39 发布

阅读量139

点赞数 1

分类专栏：前端面试文章标签：安全 web安全服务器

原文链接：https://blog.csdn.net/qq_45359288/article/details/125242415

版权

前端面试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.浏览器安全：

1.1 XSS攻击：

XSS指的是跨站脚本攻击，是一种代码注入攻击。攻击者在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如cookie等

XSS 的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行。

XSS 可以分为存储型、反射型和 DOM 型

防御：

（1）可以从浏览器的执行来预防，一种是使用纯前端的方式，不用服务端渲染，另一种是对插入到HTML中的代码做好转义

（2）用CSP，即建立一个白名单，告诉浏览器哪些外部资源可以加载和执行，从而防止恶意代码的注入攻击

（3）对敏感信息进行保护，比如 cookie 使用 http-only，使得脚本无法获取，也可以使用验证码

1.2 CSRF 攻击：

CSRF指的是跨站请求伪造攻击，攻击者诱导用户进入第三方网站，然后该网站向被攻击网站发送跨站请求，若用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录绕过后台的验证，冒充用户向服务器执行一些操作。

CSRF攻击的本质是利用 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充

CSRF分为GET，POST和链接类型的攻击

防御：

（1）进行同源检测，服务器根据 http 请求头中 origin 或者 referer 信息来判断请求是否为允许访问的站点，从而对请求进行过滤

（2）token验证，解决cookie单一验证的缺点

（3）对 Cookie 进行双重验证

2.浏览器同域策略/跨域：

2.1 同源策略：

同源策略是浏览器最核心、最基本的安全功能

同源策略是一种约定，同源是指 “*协议 + 端口 + 域名*” 三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略的限制：

（1）Cookie、LocalStorage、IndexedDB 等存储性内容

（2）DOM 节点

（3）当前域下 ajax 无法发送跨域请求

同源政策目的主要是为了保证用户的信息安全，只是对 js 脚本的一种限制，并不是对浏览器的限制，对于一般的 img / script 脚本请求都不会有跨域的限制

2.2 跨域：

跨域问题其实就是浏览器的同源策略造成的

为什么浏览器禁止跨域：

为了防止网站被恶意攻击（XSS、CSRF攻击），导致用户信息被泄露，所以浏览器使用了同源策略。

跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

跨域解决方案：

· JSONP跨域

· CORS跨域资源共享

· Node中间件代理

· nginx反向代理

· WebSocket

· postMessage

· location.hash + iframe

· window.name + iframe

· document.domain + iframe

CORS支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案

CORS 需要浏览器和后端同时支持，浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。只要服务器实现了 CORS，就实现了跨域

3.浏览器渲染机制：

3.1 浏览器的渲染过程：

DOM --> CSSOM --> RenderTree --> Layout --> Paint

解析HTML，生成 DOM树
解析 CSS，生成 CSS 规则树

如果遇到 script 标签，判断是否含有 defer 或者 async 属性，要不然 script 的加载和执行会造成页面渲染的阻塞

解析完成后，通过DOM 树和 CSS 规则树，构建 Rendering Tree渲染树
根据渲染树进行布局（layout 重排/回流）
***绘制：***遍历渲染树并调用 paint 方法，使用浏览器的 UI 接口对页面进行绘制，显示整个页面

3.2 浏览器渲染优化：

针对JavaScript

将 js 放在页面底部位置；尽可能用 defer 或者 async 避免阻塞的 js

加载，确保 DOM 树生成完才会去加载 JS

针对CSS

导入外部样式使用link 代替 @import

将CSS嵌套层减少到最小

针对DOM树、CSSOM树

降低 HTML 层级、标签尽量语义化等、降低选择器层级

减少回流与重绘
- 不要使用table布局
- dom元素position属性使用absolute或者fixed
- visibility:hidden替换display:none
- 操作DOM时，尽量在低层级的DOM节点进行操作
- 避免频繁操作DOM，可以创建一个文档片段

3.3 浏览器渲染过程（解析html）遇到js文件：

渲染过程中，如果遇到

3.4 阻塞渲染的情况：

（1）渲染的前提是生成渲染树，所以 HTML 和 CSS 肯定会阻塞渲染，如果想渲染的越快，应该降低一开始需要渲染的文件大小，并且扁平层级，优化选择器

（2）JavaScript的加载、解析与执行会阻塞 DOM 的构建，阻塞页面的渲染，不应该在首屏就加载 JS 文件，将script标签放在body标签底部，给script标签添加defer或者async属性

4. 浏览器缓存：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eXbZYAQ6-1668436066635)(file:///C:\Users\win10\AppData\Local\Temp\ksohtml13272\wps1.jpg)]

4.1 对浏览器的缓存机制的理解：

前端缓存主要是分为HTTP缓存和浏览器缓存。

HTTP缓存是在HTTP请求传输时用到的缓存，主要在服务器代码上设置；

浏览器缓存则主要由前端开发在前端js上进行设置。

缓存是性能优化中简单高效的一种优化方式。一个优秀的缓存策略可以提高网页加载速度、提高用户体验、减少带宽，降低网络负荷。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6svCMXOW-1668436066636)(file:///C:\Users\win10\AppData\Local\Temp\ksohtml13272\wps2.jpg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VpWuS5rO-1668436066637)(file:///C:\Users\win10\AppData\Local\Temp\ksohtml13272\wps3.jpg)]

浏览器缓存的全过程：

浏览器第一次加载资源，会从服务器下载资源文件，并缓存资源。服务器返回 200状态码，通过 response header设置 cache-control
下一次加载资源时，由于强制缓存优先级较高，先检查 cache-control 设置的 max-age有没有过期，如果没有就命中强缓存，直接从本地缓存拿资源
如果资源已过期，则表明强制缓存没有被命中，则开始协商缓存，向服务器发送请求
服务器收到请求后，判断是否最新资源，如果是最新资源，则命中协商缓存，返回 304，直接从缓存拿资源；不是最新资源，服务器返回新的资源文件和资源标识，并返回 200

4.2 强缓存和协商缓存（对比缓存）的区别：

HTTP缓存策略 分为两种：强缓存和协商缓存，根据响应的 header 内容来决定

强制缓存优先于协商缓存进行

强缓存优先级 > 协商缓存优先级

强缓存：

使用强缓存策略时，在有效时间内，不再向服务器发起请求，直接从浏览器本地缓存中获取资源
强缓存相关字段有 expires：date（过期日期）、cache-control： max-age=time（毫秒数，多久之后过期） |no-cache|no-store（Cache-Control优先级高 于Expires）【在有效时间内命中强缓存】

协商缓存：

协商缓存就是强缓存失效后，浏览器携带缓存标识 向服务器发起请求，如果资源没有发生修改，则返回304 状态，让浏览器使用本地的缓存副本。如果资源发生了修改，则返回修改后的资源
协商缓存相关字段Last-Modified（这个资源在服务器上的最后修改时间）、Etag（服务器响应请求时，返回当前资源的唯一标识 (由服务器生成)，只要资源有变化，Etag就会重新生成）（ETag优先级高 于Last-Modified）