浏览器工作原理与实践
李兵
前盛大创新院高级研究员
立即订阅
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?
浏览器工作原理与实践
登录|注册

32 | 同源策略:为什么XMLHttpRequest不能跨域请求资源?

李兵 2019-10-17
通过前面 6 个模块的介绍,我们已经大致知道浏览器是怎么工作的了,也了解这种工作方式对前端产生了什么样的影响。在这个过程中,我们还穿插介绍了一些浏览器安全相关的内容,不过都比较散,所以最后的 5 篇文章,我们就来系统地介绍下浏览器安全相关的内容。
浏览器安全可以分为三大块——Web 页面安全、浏览器网络安全浏览器系统安全,所以本模块我们就按照这个思路来做介绍。鉴于页面安全的重要性,我们会用三篇文章来介绍该部分的知识;网络安全和系统安全则分别用一篇来介绍。
今天我们就先来分析页面中的安全策略,不过在开始之前,我们先来做个假设,如果页面中没有安全策略的话,Web 世界会是什么样子的呢?
Web 世界会是开放的,任何资源都可以接入其中,我们的网站可以加载并执行别人网站的脚本文件、图片、音频 / 视频等资源,甚至可以下载其他站点的可执行文件。
Web 世界是开放的,这很符合 Web 理念。但如果 Web 世界是绝对自由的,那么页面行为将没有任何限制,这会造成无序或者混沌的局面,出现很多不可控的问题。
比如你打开了一个银行站点,然后又一不小心打开了一个恶意站点,如果没有安全措施,恶意站点就可以做很多事情:
修改银行站点的 DOM、CSSOM 等信息;
在银行站点内部插入 JavaScript 脚本;
劫持用户登录的用户名和密码;
读取银行站点的 Cookie、IndexDB 等数据;
甚至还可以将这些信息上传至自己的服务器,这样就可以在你不知情的情况下伪造一些转账请求等信息。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《浏览器工作原理与实践》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(10)

  • 希望老师能详细的讲解,最近几讲,感觉讲的太浅显了,都是些概念性的东西

    作者回复: 的确,篇幅有限,讲太细了广度照顾不到!

    我先还是搭建整体的体系框架,涉及到细节内容我们答疑来补!

    感觉我是在给自己挖个大坑,要补的内容感觉都能出一个小专栏了

    2019-10-17
    13
  • Angus
    看这篇幅,专栏应该会在浏览器安全中结束。从二十五讲开始就觉得越来越浅显了,前面好几篇说的后面章节再详细讲解的部分好像并没有出现。

    作者回复:
    是的,有几个原因:

    第一、每篇文章有death line的,越到后面时间越赶,所以完成每篇文章的时间就越来越紧凑了。

    第二、浏览器这块要讲的东西比较多,有架构,JavaScript,页面,网络和安全,还有一些H5的内容。
    所以当初在定目录的时候,主干36篇课程主要讲主线内容,要照顾广度,所以有些细节不能深入太多。比如提到CSP和CORS在主干课程中没办法讲的太细。

    当然,这些原因并不是不把内容讲透的借口,接下来,我把会把很多深度内容放到加餐和答疑部分:
    比如有老铁问事件循环中采用while会不会造成页面卡死的问题?这里我到时会补充介绍系统事件驱动机制,还会结合事件循环机制来介绍Performance。

    还有很多老铁问到UI线程,所以这块我还要结合浏览器进程和网络进程来补充相关知识!

    稍晚点就要着手准备加餐内容大纲了。

    2019-10-18
    12
  • 歌顿
    同源策略、CSP 和 CORS 之间的关系:

    同源策略就是说同源页面随你瞎搞,但是不同源之间想瞎搞只能通过浏览器提供的手段来搞

    比如说
    1. 读取数据和操作 DOM 要用跨文档机制
    2. 跨域请求要用 CORS 机制
    3. 引用第三方资源要用 CSP

    作者回复: 总结的很好

    2019-10-25
    3
  • Geek_259055
    想详细了解CORS,可以看阮一峰的这篇文章https://www.ruanyifeng.com/blog/2016/04/cors.html

    作者回复: 感谢提供资源

    2019-11-19
    1
  • 早起不吃虫
    老师,跨域资源共享和跨文档消息机制这一块可以详细讲一下吗

    作者回复: 讲这个我还得准备一些后端的演示代码,放到最后的答疑部分吧

    2019-10-17
    1
  • 空山鸟语
    老师总结的非常好,具体的细节我们可以自己查资料。
    但是在我们学习过程中发现,现在网上文章质量参差不齐,想找到一篇好文章很不容易。比如某金,文章多而杂,往往是看完了感觉没什么收获,也消耗了耐心和精力。
    针对这种情况,我们该怎么半呢?

    作者回复: 关于浏览器的介绍网上资料好的的确不多,写这个专栏的时候也查阅了很多网上的资料,但是总体上质量都不怎么行,而且有些作者的理解也不正确错误!

    另外网上的资料也谁零碎、不成体系的!

    如果自己去啃源码会花费很大精力!

    所以极客时间的gray找到我的时候,我觉得来做浏览器专栏很有必要,因为浏览器应用已经非常广的,而市面上体系化介绍浏览器的书籍或者文章少之又少!


    如果你想深入了解,这里我推荐去看一些官方举办会议的视频,比如油管上的blink on!另外还有源码里面的文档,不过啃着快的难度有点大!

    2019-11-19
  • wd2010
    老师,浏览器的同源策略可以再讲细点么,比如浏览器的内部处理机制是怎样的,这些感觉很需要老师帮忙解答下

    作者回复: 这块浏览器处理到是不复杂的,主要是弄清楚同源策略的具体开了哪些口子,这些口子是如何影响到前后端开发的?

    2019-10-31
  • code-artist
    同源DOM互相操作的例子中,第二个页面如何获取第一个页面的window对象opener的?也就是opener是在哪里被赋值的?
    2019-10-31
  • 隔夜果酱
    这些安全机制感觉还是太弱了,非常容易被攻破.怪不得早些年钓鱼网站横行.

    作者回复: 目前稍微好点,有了沙盒,有了HTTPS,少了插件,页面进程也做了分离,攻击站点的难度和成本都提升了不少!

    2019-10-17
  • 山里娃
    【同源策略】是Web在DOM、Web 数据和网络三个层面上提供的安全策略,保证我们在Web使用中的隐私和数据安全。但是过于严格的安全策略,损失了Web开发和使用中的灵活性,所以我们必须出让一部分安全性,以便达到安全和灵活的平衡。
    Web在出让安全性方面主要是允许嵌入第三方资源、跨域资源共享。
    为解决允许嵌入第三方资源的风险,最典型的就是XSS攻击,浏览器引入了内容安全策略,即【CSP】,由服务端来决定可以加载哪些第三方资源。
    在Web页面中我们经常需要通过XMLHttpRequest或ajax发送跨域请求,而【同源策略】会阻止我们的请求,为了解决这个问题,引入了跨域资源共享【CORS】。
    2019-10-17
收起评论
10
返回
顶部