浏览器工作原理与实践
李兵
前盛大创新院高级研究员
立即订阅
6167 人已学习
课程目录
已完结 42 讲
0/4登录后,你可以任选4讲全文学习。
开篇词 (1讲)
开篇词 | 参透了浏览器的工作原理,你就能解决80%的前端难题
免费
宏观视角下的浏览器 (6讲)
01 | Chrome架构:仅仅打开了1个页面,为什么有4个进程?
02 | TCP协议:如何保证页面文件能被完整送达浏览器?
03 | HTTP请求流程:为什么很多站点第二次打开速度会很快?
04 | 导航流程:从输入URL到页面展示,这中间发生了什么?
05 | 渲染流程(上):HTML、CSS和JavaScript,是如何变成页面的?
06 | 渲染流程(下):HTML、CSS和JavaScript,是如何变成页面的?
浏览器中的JavaScript执行机制 (5讲)
07 | 变量提升:JavaScript代码是按顺序执行的吗?
08 | 调用栈:为什么JavaScript代码会出现栈溢出?
09 | 块级作用域:var缺陷以及为什么要引入let和const?
10 | 作用域链和闭包 :代码中出现相同的变量,JavaScript引擎是如何选择的?
11 | this:从JavaScript执行上下文的视角讲清楚this
V8工作原理 (3讲)
12 | 栈空间和堆空间:数据是如何存储的?
13 | 垃圾回收:垃圾数据是如何自动回收的?
14 | 编译器和解释器:V8是如何执行一段JavaScript代码的?
浏览器中的页面循环系统 (6讲)
15 | 消息队列和事件循环:页面是怎么“活”起来的?
16 | WebAPI:setTimeout是如何实现的?
17 | WebAPI:XMLHttpRequest是怎么实现的?
18 | 宏任务和微任务:不是所有任务都是一个待遇
19 | Promise:使用Promise,告别回调函数
20 | async/await:使用同步的方式去写异步代码
浏览器中的页面 (8讲)
21 | Chrome开发者工具:利用网络面板做性能分析
22 | DOM树:JavaScript是如何影响DOM树构建的?
23 | 渲染流水线:CSS如何影响首次加载时的白屏时间?
24 | 分层和合成机制:为什么CSS动画比JavaScript高效?
25 | 页面性能:如何系统地优化页面?
26 | 虚拟DOM:虚拟DOM和实际的DOM有何不同?
27 | 渐进式网页应用(PWA):它究竟解决了Web应用的哪些问题?
28 | WebComponent:像搭积木一样构建Web应用
浏览器中的网络 (3讲)
29 | HTTP/1:HTTP性能优化
30|HTTP/2:如何提升网络速度?
31|HTTP/3:甩掉TCP、TLS 的包袱,构建高效网络
浏览器安全 (5讲)
32 | 同源策略:为什么XMLHttpRequest不能跨域请求资源?
33 | 跨站脚本攻击(XSS):为什么Cookie中有HttpOnly属性?
34 | CSRF攻击:陌生链接不要随便点
35 | 安全沙箱:页面和系统之间的隔离墙
36 | HTTPS:让数据传输更安全
结束语 (1讲)
结束语 | 大道至简
课外加餐 (4讲)
加餐一|浏览上下文组:如何计算Chrome中渲染进程的个数?
加餐二|任务调度:有了setTimeOut,为什么还要使用rAF?
加餐三|加载阶段性能:使用Audits来优化Web性能
加餐四|页面性能工具:如何使用Performance?
浏览器工作原理与实践
登录|注册

35 | 安全沙箱:页面和系统之间的隔离墙

李兵 2019-10-24
前面三篇文章我们主要围绕同源策略介绍了 Web 页面安全的相关内容,那今天我们把视野向外延伸,来聊聊页面安全和操作系统安全之间的关系。
《01 | Chrome 架构:仅仅打开了 1 个页面,为什么有 4 个进程?》那篇文章中,我们分析了浏览器架构的发展史,在最开始的阶段,浏览器是单进程的,这意味着渲染过程、JavaScript 执行过程、网络加载过程、UI 绘制过程和页面显示过程等都是在同一个进程中执行的,这种结构虽然简单,但是也带来了很多问题。
从稳定性视角来看,单进程架构的浏览器是不稳定的,因为只要浏览器进程中的任意一个功能出现异常都有可能影响到整个浏览器,如页面卡死、浏览器崩溃等。不过浏览器的稳定性并不是本文讨论的重点,我们今天主要聊的是浏览器架构是如何影响到操作系统安全的
浏览器本身的漏洞是单进程浏览器的一个主要问题,如果浏览器被曝出存在漏洞,那么在这些漏洞没有被及时修复的情况下,黑客就有可能通过恶意的页面向浏览器中注入恶意程序,其中最常见的攻击方式是利用缓冲区溢出,不过需要注意这种类型的攻击和 XSS 注入的脚本是不一样的
XSS 攻击只是将恶意的 JavaScript 脚本注入到页面中,虽然能窃取一些 Cookie 相关的数据,但是 XSS 无法对操作系统进行攻击。
而通过浏览器漏洞进行的攻击是可以入侵到浏览器进程内部的,可以读取和修改浏览器进程内部的任意内容,还可以穿透浏览器,在用户的操作系统上悄悄地安装恶意软件、监听用户键盘输入信息以及读取用户硬盘上的文件内容。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《浏览器工作原理与实践》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(18)

  • 一步
    安全沙箱是不能防止 XSS 或者 CSRF 一类的攻击,
    安全沙箱的目的是隔离渲染进程和操作系统,让渲染进行没有访问操作系统的权利
    XSS 或者 CSRF 主要是利用网络资源获取用户的信息,这和操作系统没有关系的

    作者回复: 没问题

    2019-10-24
    7
  • Peter Cheng
    每周都跟着老师一起学习,终于坚持到最后了。千里之行始于足下,课程结束后,我们再向老师提问?

    作者回复: 日拱一卒 不期速成 我随时奉陪

    2019-10-24
    5
  • 刹那
    老师我有个疑问,既然渲染进程运行在沙箱中,涉及到系统操作的都通过ipc向浏览器进程发送操作请求,那么,这个阶段会不会也存在安全漏洞?就是说,渲染进程有没有可能发送一个能攻破浏览器进程的消息,之后可以通过控制浏览器进程入侵操作系统?

    作者回复: 如果ipc有漏洞也是可能的,不过要通过IPC发起攻击、那难度就太大了,因为IPC的消息要合规,不合规的消息也会被过滤掉的。

    2019-10-26
    2
  • 李懂
    老师多给自己留点坑,多讲讲,还想再学学!
    希望能讲讲,全局上下文不是只存在一个么,为啥在执行时js,每次都先创建全局上下文,进栈,是不是哪里理解的有问题?

    作者回复: 坑不少了。 我想想怎么填

    2019-10-24
    1
  • mfist
    不能攻击,xss csrf 是攻击的网页服务器的漏洞。跟浏览器本身没有关系。不过应该能使攻击者绕过前端的编码检验之类,如果后端没有对应的安全检验就惨了。

    作者回复: 没问题

    2019-10-24
    1
  • 空山鸟语
    老师讲的全是干货,目前正在反复听呢!
    表示还没听够

    作者回复: 感谢肯定,课程内容的确是非常精心规划的

    2019-10-24
    1
  • 方渐鸿
    老师,网络访问这一节有点疑问,【浏览器内核在网络请求之前会检查跨域请求】这一操作;但是根据正常的浏览器行为,跨域请求往往是得到响应之后被丢弃了。那么提前检测是否跨域这一操作是有什么特殊意义吗?
    2019-11-25
  • yaochangli
    能否给我们演示一个具体攻击的例子,比如利用旧的firefox。
    2019-10-31
  • 李小白
    老师,我想请问一下,你说渲染进程内部是无法直接操作窗口句柄的,这也是为了限制渲染进程监控到用户的输入事件,这种情况我也可以通过JS来获取监控到用户的输入事件啊,通过渲染进程,渲染进程是可以通过IPC从浏览器内核监控到用户输入事件的啊,和我们正常用js就是可以获取用户的输入事件一样。希望老师帮忙解答一下

    作者回复: 通过IPC传给渲染进程的是浏览器默许的,这个没有问题。

    安全沙箱主要保护的是恶意程序通过网络攻破渲染进程,然后在渲染进程内,获取系统窗口的内容,比如qq登陆窗口这种。

    2019-10-31
  • code-artist
    很难想象具体是怎样的,听完后印象不是很深刻。
    2019-10-28
  • man
    很精彩呀,像看了一部好莱坞大片的感觉。。。
    2019-10-26
    1
  • 余文郁
    这是最后一篇文章了吗

    作者回复: 还有一篇https

    2019-10-25
  • Snow同學
    请问老师,这个问题我问了好几遍了,希望得到老师的回复,
    在开发时
    1.空页面加载一个URL,如何知道页面已经显示在了屏幕上(从用户真实的视觉上看到页面),在代码层面可以通过检测什么状态知道嘛?
    2.在页面已经显示到屏幕后完成,通过点击一个按钮,执行向document添加一些元素(可以是div,div里也可以有更多其他标签和内容),如何知道这些元素什么时候真正显示在屏幕上(从用户真实的视觉上看到页面),在代码层面可以通过检测什么状态知道嘛?
    是不是无法通过代码检测呀?

    作者回复:
    不好意思,久等了。

    你可以关注下 PerformancePaintTiming,不过这个功能个大浏览器还在开发中,Chrome也可以使用,但是不保证准确度。

    另外要使用该接口,还需要了解几个概念如First paint、First contentful paint。

    这是MDN上的一段代码,你可以测试下:
    function showPaintTimings() {
      if (window.performance) {
        let performance = window.performance;
        let performanceEntries = performance.getEntriesByType('paint');
        performanceEntries.forEach( (performanceEntry, i, entries) => {
          console.log("The time to " + performanceEntry.name + " was " + performanceEntry.startTime + " milliseconds.");
        });
      } else {
        console.log('Performance timing isn\'t supported.');
      }
    }

    给你两个参考地址

    MDN:
    https://developer.mozilla.org/zh-CN/docs/Web/API/PerformancePaintTiming

    W3C:
    https://www.w3.org/TR/paint-timing/

    2019-10-25
  • 许童童
    真的是快啊,一转眼,专栏就快要结束了,希望加餐能再多来几篇文章。意犹未尽

    作者回复: 还有一篇正文就结束了,感谢一路陪伴。

    另外加餐内容我在整理中。

    2019-10-24
  • 这就完了吗?意犹未尽,每一讲都讲的挺好。每个2,4,6早上到公司都会第一时间check有没有更新,期待后面的问答加餐环节,哈哈

    作者回复: 感谢

    2019-10-24
  • 罗乾林
    不能,XSS/CSRF主要利用浏览器开的口子窃取站点信息,如Cookies等信息。安全沙箱是防止恶意代码利用浏览器程序漏洞,窃取修改操作系统信息

    作者回复: 没问题

    2019-10-24
  • 滇西之王
    不能防止,xss攻击和cspf不是针对操作系统的攻击,xss攻击就是执行javascript脚步,他的攻击是在渲染进程内,cspf是发送请求获取用户敏感信息,利用到网络进程

    作者回复: 没问题

    2019-10-24
  • 亲爱的偏执狂
    好快啊,感觉没多久就剩最后一讲就结束了。

    作者回复: 我可不觉得快,都是一天当两天使哈

    2019-10-24
收起评论
18
返回
顶部