常见浏览器相关面试题

62 阅读8分钟

1 浏览器事件机制

事件冒泡和事件捕获:

事件冒泡是里层子节点点击之后,一层一层传递给祖先节点、直至到达document节点,是由内而外、由下至上的传递过程。 事件捕获相反,是从上到下,从祖先节点到具体子节点的传递过程。

事件流机制:

DOM2 Events规范规定事件流分为3个阶段: 事件捕获、到达目标 和 事件冒泡。事件捕获最先发生,为提前拦截事件提供了可能。然后,实际的目标元素接收到事件。最后一个阶段是冒泡,最迟要在这个阶段响应事件。

监听方式:

btn.onClick = ()=>{}, 多次调用,后面的方法覆盖前面的方法,通过btn.onclick=null删除绑定事件 btn.addEventListener ('click', fn1, capture), 多次调用,绑定多个事件,第三个参数表示是否在捕获阶段处理事件,默认为否,也就是默认绑定在冒泡阶段。通过removeEventListener删除绑定事件

2 浏览器js的回收机制

参考:juejin.cn/post/727414…

代码执行完成后,变量不再被使用,这些变量如果没有被及时回收,易造成内存占用过满,无法为新的变量分配内存,从而发生内存泄漏。

回收机制需要解决的点:

  • (1)回收不再使用的变量
  • (2)引用环的变量如何判断是否是不再使用的变量
  • (3)如何将碎片化内存转化成大块的内存,供分配大变量

2.1 常见的回收机制

如JVM、PHP引擎等内存回收会用到以下的一些回收机制

  • (1)引用计数器:当该对象被其他对象使用一次,计数器加1,反之不被引用时,计数器减1,当计数器为0,表示不被使用,该变量可以被回收。

    优点:计算简单、效率高

    缺点:存在引用环的时候,无法判断变量是否可以被回收

  • (2)标记-清除算法:分为标记阶段和清除阶段,标记阶段从根节点出发,根据引用关系链,在链上面的变量被认为是在使用的,不再链上面的变量被认为可以回收。清除阶段将不再引用链上面的变量清除

    优点:计算简单、效率高; 可以解决找到不被使用的引用闭环,并被回收

    缺点:

    • 垃圾回收过程中的停顿:标记-清除算法会暂停程序的执行,进行垃圾回收操作。当堆中对象较多时,可能会导致明显的停顿,影响用户体验。

    • 内存碎片化:标记-清除算法会在回收过程中产生大量的不连续的、碎片化的内存空间。这可能导致后续的内存分配难以找到足够大的连续内存块,从而使得内存的利用率降低。

  • (3)标记-整理:可以看作是标记-清除的增强版本,他在标记阶段的操作和标记清除一致,但是清除阶段之前会先执行整理,移动对象位置,对内存空间进行压缩,目的是为将碎片化内存合并成更大的内存

    优点:解决了上述内存碎片化的问题

    缺点:垃圾回收过程中的停顿问题依旧存在

2.2 V8引擎的回收机制——老生代-新生代回收机制(了解即可)

V8是开源的js执行引擎,主要用于浏览器和node.js。由google团队开发,被用于google chrome浏览器,V8采用即时编译技术,负责将js代码转化成机器码,供计算机直接执行,提升js执行速度

具体介绍,参考文章整理:V8垃圾回收机制

3. 浏览器安全

3.1 安全沙箱

浏览器最不安全的地方就是“渲染进程”,也就是我们打开的tab页面的管理进程。安全沙箱就是为每个渲染进程提供独立的工作空间,不让他的风险转移到其他进程中。这样其中一个tab崩溃,其他tab还能照常工作。

● 浏览器内核负责文件读写,并且将读出的数据(如HTML、CSS等静态资源)通过IPC通道发送给安全沙箱

● 安全沙箱并不具备直接存取存储空间的权限,一切需要通过浏览器内核在中间进行转存和转取

● 用户操作事件及数据,也由浏览器内核转交给安全沙箱

3.2 常见攻击

3.2.1 跨站脚本攻击(Cross-Site-Script,XSS)

XSS 攻击是指攻击者在客户端网站上注入恶意脚本(一般包括 JavaScript,有时也会包含 HTML 和 Flash)对网页进行篡改,从而在用户浏览网页时,对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。

3.2.2 跨站脚本包含(Cross-Site-Script-Inclusion,XSSI)

攻击者通过使用script标签(所有带src或href属性的标签以及部分其他标签可以跨域)跨域获取特定文件,可以窃取符合JavaScript格式的文件中的敏感信息、或者基于这些信息进行篡改。

也就是说这种攻击利用的是本身JS语法漏洞、编码漏洞。

举个例子:如果某个静态js文件中可以查到加解密的具体实现,则相当于明文传输了用户私密信息。

3.2.3 跨站请求伪造(Cross-site-Request-Forgery,CSRF)

攻击者诱导受害者进入第三方网站,在第三方网站中,向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证,绕过后台的用户验证,达到冒充用户对被攻击的网站执行某些目的。

3.2.4 SQL 注入攻击

SQL注入 是程序员最经常遇到的,所谓 SQL注入,就是通过把 SQL 命令伪装成正常的请求参数,传递到服务端,欺骗服务器最终执行恶意的 SQL命令,达到入侵的目的。攻击者常常利用 SQL 注入的漏洞,来查询非授权的关键信息,修改数据库服务器的数据,改变表结构、数据、甚至删表,危害极大!

3.2.5 文件上传漏洞

很多网站都有上传的功能,上传的资源往往是保存在远端服务器上。文件上传攻击指的就是攻击者利用一些站点没有对文件类型做很好的校验,上传了可执行的文件或脚本,并且通过脚本对服务器进行一定的权限操作,或是通过诱导外部用户访问该脚本文件,达到攻击的目的。

防护措施:对上传文件的类型进行白名单校验

3.2.6  DDOS攻击(分布式拒绝服务攻击)

 DDos攻击 又称为 分布式拒绝服务攻击 (Distributed Denial of Service),是目前最为强大,最难以防御的攻击方式之一。

 DDoS 攻击指的便是攻击者借助公共网络,将数量庞大的计算机设备联合起来作为攻击平台,对一个或多个目标发动攻击,从而达到瘫痪目标主机的目的。通常在攻击开始之前,攻击者会提前控制大量的用户计算机,这类计算机称之为肉鸡,并通过指令使大量的的肉鸡在同一时刻对某个主机进行访问,从而达到瘫痪目标主机的目的。---PS.电影中经常看到这种牛逼的攻击。

3.3 安全策略

3.3.1 同源策略(Same-origin-Policy,SOP)

同源就是来源一致, 来源:由应用协议、域名、端口号三个要素决定

● 同源策略保证只有同源的应用才能访问一个应用内的信息,也就保护应用不被恶意(如XSS、 CSFR攻击)脚本袭击或窃取信息。

● 在这个策略下,web浏览器允许第一个页面的脚本访问第二个页面里的数据,但是也只有在两个页面有相同的源时。这个策略可以阻止一个页面上的恶意脚本通过页面的DOM对象获得访问另一个页面上敏感信息的权限。(因此iframe中跨源通信会报跨域问题)

同源策略的限制:

● DOM 访问限制:限制了网页脚本(如 JavaScript)访问其他源的 DOM。

● 网络通信限制:阻断了通过XMLHttpRequest、FETCH去请求跨源接口。

● 数据层面限制:cookie、localstorage、indexDB等不能获取异源数据

3.3.2 跨源资源策略(Cross-Origin Resource Policy,CORP)

跨源资源策略允许网站和应用程序选择加入以保护免受来自其他来源的某些请求(例如使用<script>和<img>等元素发出的请求)的攻击,以减轻推测性的侧通道攻击(如Spectre)以及跨站点脚本包含攻击。

3.3.3 CORB(跨域读取阻塞)

CORB 是一种安全机制,用于防止跨域请求恶意访问跨域响应的数据。渲染进程会在 CORB 机制的约束下,选择性地将合法格式资源送入渲染进程供页面使用,阻断不合法格式数据。

跨源资源策略(Cross-Origin Resource Policy,CORP)

3.3.4 内容安全策略(Content-Security Policy,CSP)

限制可加载资源的格式、添加可加载文件白名单、HTTPS

内容安全策略(Content Security Policy ,CSP)

3.4 跨域问题解决方案

3.4.1 CORS(跨域资源共享)

3.4.2 JSONP

3.4.3 postMessage(进程间通信)

3.4.4 websocket协议

3.4.5 代理服务器(正向代理、反向代理)