最新发布《数智时代的AI人才粮仓模型解读白皮书(2024版)》,立即领取! 了解详情
写点什么

浏览器是怎样工作的?

  • 2019-11-18
  • 本文字数:3998 字

    阅读完需:约 13 分钟

浏览器是怎样工作的?

Web 应用程序安全简介

让我们开始 Web 应用程序安全性的系列文章,其中解释了浏览器的工作方式以及它们是如何做到的。由于您的大多数客户都将通过浏览器与您的 Web 应用程序进行交互,因此了解浏览器怎样工作是很重要的基础。


浏览器是渲染引擎,它的工作是下载网页并以可视化方式呈现。


尽管这很简单,但我这里再次强调一下步骤。


  • 用户在浏览器地址栏中输入一个地址。

  • 浏览器通过该 URL 下载“文档”并进行呈现。



您可能已经习惯了使用最流行的浏览器之一,例如 Chrome、Firefox、Edge 或 Safari,但这并不意味着没有其他浏览器。


例如,lynx 是一种轻量级的基于文本的浏览器,可以从命令行运行。 当用户输入网址(URL),浏览器将获取文档并进行呈现。唯一的区别是,lynx 不使用视觉渲染引擎,而是使用基于文本的界面,这使得类似 Google 的网站看起来像这样 :



我们大致了解浏览器的功能,下一步我们逐步分析各个执行步骤。

浏览器做什么?

长话短说,浏览器的工作主要包括:


  • DNS 解析

  • HTTP 协议交互

  • 渲染

  • 重复上面步骤

DNS 解析

此过程可确保当用户输入 URL,浏览器就会知道它必须连接到哪个服务器。浏览器访问 DNS 服务器,以将google.com转换为216.58.207.110(浏览器可以连接到的 IP 地址)。

HTTP 交换协议

一旦浏览器确定了哪个服务器将满足我们的请求,它将与之启动 TCP 连接并开始 HTTP 交互。这不过是浏览器与服务器进行通信以及服务器进行交互的一种方式。


HTTP 只是最流行的网络通信协议名称,浏览器在与服务器通信时大多通过 HTTP 进行通信。 HTTP 涉及客户端(我们的浏览器)发送请求,而服务器则通过响应进行回复。


例如,浏览器成功连接到google.com的服务器后,它将发送如下请求:


GET / HTTP/1.1Host: google.comAccept: */*
复制代码


让我们逐行细分请求:


  • GET / HTTP/1.1:在第一行中,浏览器要求服务器在/位置检索文档,并补充说,其余请求将遵循 HTTP / 1.1 协议(也可以使用1.02

  • Host: google.com:这是 HTTP / 1.1 中唯一必需的 HTTP 标头。 由于服务器可能服务于多个域(google.comgoogle.co.uk等),因此此处的客户端提到请求是针对该特定主机

  • Accept: */*:浏览器告诉服务器它将接受的响应格式。 服务器可能具有 JSON、XML 或 HTML 格式的资源,它可以选择其希望的格式.


当客户端的浏览器完成请求后,轮到服务器进行回复。 响应如下所示:


HTTP/1.1 200 OKCache-Control: private, max-age=0Content-Type: text/html; charset=ISO-8859-1Server: gwsX-XSS-Protection: 1; mode=blockX-Frame-Options: SAMEORIGINSet-Cookie: NID=1234; expires=Fri, 18-Jan-2019 18:25:04 GMT; path=/; domain=.google.com; HttpOnly
复制代码


<!doctype html><html">......</html>
复制代码


服务器让我们知道请求已成功(200 OK),并在响应中添加了一些标头,例如,它公布了处理我们请求的服务器(服务器:gws),该响应的X-XSS-Protection策略是什么等等。


现在,您无需了解响应中的每一行细节, 您需要了解的是客户端和服务器正在通过 HTTP 协议进行信息交换即可。

渲染

最后是渲染过程。 如果仅向用户显示的是有趣字符列表,浏览器的效果如何?


<!doctype html><html">......</html>
复制代码


在响应的正文中,服务器根据Content-Type标头包含响应的表现形式。 在我们的例子中,内容类型设置为text / html,因此我们期望响应中有 HTML 标记——这正是我们在正文中找到的内容。


这是浏览器真正“闪耀”的地方。 它解析 HTML,加载标记中包含的其他资源(例如,可能有 JavaScript 文件或 CSS 文档要提取),并尽快将其呈现给用户。


再一次,最终结果是用户可以看到的可视化页面。



由于本系列文章的重点是安全性,因此我将提醒一下我们刚刚学到的内容:攻击者可以轻松地摆脱 HTTP 协议交互和呈现部分中的漏洞。漏洞和恶意用户也潜伏在其他地方,但是在这些级别上更好的安全性方法已经可以使您在改善安全性方面取得长足的进步。

浏览器厂家

最受欢迎​​的浏览器有如下厂家:


  • Chrome by Google

  • Firefox by Mozilla

  • Safari by Apple

  • Edge by Microsoft


除了互相竞争以提高其市场占有率外,各个厂家还相互合作以提高 Web 标准,这是浏览器的一种“最低要求”,非常关键。


W3C是标准制定的主体,但浏览器厂家开发自己的功能并最终使其成为 Web 标准并不少见,安全性也不例外。


例如,Chrome 51 引入了SameSite cookies,该功能使 Web 应用程序可以摆脱一种称为 CSRF 特定类型的漏洞(稍后详细介绍)。其他厂家认为这是个好主意,因此也效仿,这让 SameSite 成为一个 Web 标准:到目前为止,Safari 是唯一不支持SameSite cookie的主流浏览器。



这告诉我们两件事:


  • Safari 对用户的安全性似乎不太关心(开个玩笑:Safari 12 中将提供 SameSite cookies)

  • 在一个浏览器上修补漏洞并不意味着您所有的用户都是安全的


第二点真的很重要。在开发网络应用程序时,我们不仅需要确保它们在各种浏览器中的外观相同,而且还需要确保我们的用户在各种平台上都受到相同的安全保护。


您的网络安全策略应根据浏览器厂家允许我们执行的操作而有所不同。如今,大多数浏览器都支持相同的功能集,并且很少偏离其通用路线图,但是仍然出现上述情况,因此在定义安全策略时需要考虑这一点。


就我们而言,如果我们决定仅通过 SameSite Cookies 来缓解 CSRF 攻击,那么我们应该意识到,我们使 Safari 用户面临风险。我们的用户也应该知道这一点。


最后,您应该记住,可以决定是否支持浏览器版本:支持每种浏览器版本都不切实际(考虑支持 Internet Explorer 6 是开发者噩梦)。不过,确保支持主要浏览器的最后几个版本通常是一个不错的决定。不过,如果您不打算在特定平台上提供保护,通常建议让您的用户知道。


专家提示:您永远不应鼓励您的用户使用过时的浏览器版本。 即使您已采取所有必要的预防措施,其他 Web 开发人员也可能没有采取措施。 提示用户使用主要浏览器的最新版本。

供应商还是标准错误?

普通用户通过第三方客户端(浏览器)访问我们的应用程序这一事实为实现清晰、安全的浏览体验增加了另一种间接访问级别:浏览器本身可能存在安全漏洞。


供应商通常会向可以在浏览器上发现漏洞的安全研究人员提供奖励(即漏洞赏金)。


例如,Chrome 奖金计划使安全工程师可以与 Chrome 安全团队联系,以报告他们发现的漏洞。如果确认这些漏洞,则会发布补丁,通常会向公众发布安全建议通知,研究人员将从项目中获得(通常是财务上的)奖励。


像 Google 这样的公司在他们的 Bug Bounty(漏洞赏金)计划中投入大量资金,因为它允许他们发现应用程序问题时,通过保证财务利益来吸引研究人员。


在 Bug 赏金计划中,双方方都是“赢家”:供应商设法提高其软件的安全性,研究人员因此而获得报酬。我们稍后将讨论这些程序,因为我认为 Bug Bounty(漏洞赏金)计划在安全领域应有的一席之地。


杰克·阿奇博尔德(Jake Archibald)是 Google 的开发人员拥护者,他最近发现了一个影响多个浏览器的漏洞。 他在一篇有趣的博客文章中记录了他的努力,与其他供应商的接触方式以及他们的反应,我建议您阅读。

开发人员专用的浏览器

到现在为止,我们应该已经理解了一个非常简单但相当重要的概念:浏览器只是为普通互联网上网构建的 HTTP 客户端。


它们绝对比平台上的裸 HTTP 客户端(例如 NodeJS 的require('http'))更强大,但是到最后,它们“只是”简单 HTTP 客户端的自然演变。


作为开发人员,我们选择的 HTTP 客户端可能是 Daniel Stenberg 的cURL,Daniel Stenberg 是 Web 开发人员每天使用的最受欢迎的软件程序之一。 它允许我们通过从命令行发送 HTTP 请求来即时进行 HTTP 交换:


$ curl -I localhost:8080
复制代码


HTTP/1.1 200 OKserver: ecstatic-2.2.1Content-Type: text/htmletag: "23724049-4096-"2018-07-20T11:20:35.526Z""last-modified: Fri, 20 Jul 2018 11:20:35 GMTcache-control: max-age=3600Date: Fri, 20 Jul 2018 11:21:02 GMTConnection: keep-alive
复制代码


在上面的示例中,我们在localhost:8080 /处请求了文档,并且本地服务器已成功回复。


与其将响应的主体转储到命令行,我们在这里使用了 -I 标志,该标志告诉 cURL 我们仅对响应标头感兴趣。 向前迈出一步,我们可以指示 cURL 转储更多信息,包括它执行的实际请求,以便我们可以更好地了解整个 HTTP 交互。 我们需要使用的选项是-v(详细):


$ curl -I -v localhost:8080* Rebuilt URL to: localhost:8080/*   Trying 127.0.0.1...* Connected to localhost (127.0.0.1) port 8080 (#0)> HEAD / HTTP/1.1> Host: localhost:8080> User-Agent: curl/7.47.0> Accept: */*>< HTTP/1.1 200 OKHTTP/1.1 200 OK< server: ecstatic-2.2.1server: ecstatic-2.2.1< Content-Type: text/htmlContent-Type: text/html< etag: "23724049-4096-"2018-07-20T11:20:35.526Z""etag: "23724049-4096-"2018-07-20T11:20:35.526Z""< last-modified: Fri, 20 Jul 2018 11:20:35 GMTlast-modified: Fri, 20 Jul 2018 11:20:35 GMT< cache-control: max-age=3600cache-control: max-age=3600< Date: Fri, 20 Jul 2018 11:25:55 GMTDate: Fri, 20 Jul 2018 11:25:55 GMT< Connection: keep-aliveConnection: keep-alive
复制代码


<* Connection #0 to host localhost left intact
复制代码


主流浏览器的 DevTools 可以提供几乎相同的信息。


如我们所见,浏览器仅是精心设计的 HTTP 客户端。当然,它们添加了大量功能(例如安全凭据管理、书签、历史记录等),但事实是它们作为对用户体验友好的 HTTP 客户端而诞生的。


这很重要,因为在大多数情况下,您不需要浏览器即可测试 Web 应用程序的安全性,因为您只需下载最新的浏览器版本即可。


我想指出的最后一件事是,任何东西都可以是浏览器。如果您有一个通过 HTTP 协议使用 API​​的移动应用程序,那么该应用程序就是您的浏览器-它恰好是您自己构建的高度定制化的应用程序,仅能理解特定类型的 HTTP 响应(通过您自己的 API) 。


英文原文:


How Browsers Work


2019-11-18 11:152973

评论 3 条评论

发布
用户头像
"Daniel Stenberg 是 Web 开发人员每天使用的最受欢迎的软件程序之一。"
这个地方笔误了?
2019-11-18 15:34
回复
Daniel Stenberg Curl, 是这个的意思。
2019-11-22 15:38
回复
用户头像
有点水
2019-11-18 13:54
回复
没有更多了
发现更多内容

游戏夜读 | 什么是黑色一分钟?

game1night

SpringBatch系列入门之Tasklet

稻草鸟人

spring SpringBatch 批处理

万恶的NPE如何避免,几种你必须知道的方案!!!

不才陈某

后端

收藏!如何有效实施devops?

禅道项目管理

DevOps 运维 持续集成 开发 自动化测试

原创 | 使用JUnit、AssertJ和Mockito编写单元测试和实践TDD (十五)编写测试-断言\假设\使测试失效

编程道与术

Java 编程 TDD 单元测试 JUnit

奈学大数据开发工程师分享787个技术,快来收割

奈学教育

大数据

【译】业务转型是什么?

涛哥 数字产品和业务架构

业务中台 数字化转型

Vim使用总结

JDoe

vim

『PyTorch』使用指定GPU的方法

kraken0

人工智能 学习 图像识别

面试题:教你如何吃透RocketMQ

奈学教育

架构 RocketMQ 架构设计

霸榜18年,作者连续20年获得微软MVP,这本SQL书凭什么成为畅销经典

图灵社区

数据库 SQL语法 sql查询

安全做到首位 统信UOS后激勃发

统小信uos

网络安全 操作系统

深入理解JVM内存管理 - 方法区

SkyeDance

深入理解JVM 方法区 老年代

运维日志里隐藏的安全危机,你知道怎么挖吗?听听专家怎么说

secisland

态势感知 关联分析 SOC

原创 | 使用JUnit、AssertJ和Mockito编写单元测试和实践TDD (十四)编写测试-显示名

编程道与术

Java 编程 TDD 单元测试 JUnit

Hive底层执行引擎的深度剖析(免费)

奈学教育

大数据 hive

Docker 搭建 Postgres + pgAdmin 环境

姜雨生

Docker DevOps postgres

美国黑客曝出政府惊天内幕,看区块链如何解决!

CECBC

CECBC 区块链技术 民生 不可篡改 信息公开

CEO或业务负责人应该具备的数据分析能力

花生

工具 数据 CEO

Java是不是慢半拍?

X.F

Java 架构 编程语言

CI/CD - Python Django 项目在 Jenkins 上的实践

meta-algorithmX

Python django TDD CI/CD

GcExcel:比 Apache POI 速度更快、性能更高

葡萄城技术团队

Apache POI GCExcel

ARTS-week one

Jokky💫

ARTS 打卡计划

撸一串趣图,给晚上加班打个鸡血

码农神说

程序员 加班 段子

手机是21世纪最成功的毒品

Neco.W

学习 提升效率 工作

我们是活着,而不是活过

小天同学

个人感想 生活,随想 随笔杂谈 日常思考

产品周刊 | 第 17 期(20200531)

八味阁

产品 设计 产品经理 产品设计 产品推荐

学习没进步?也许反馈有问题

KAMI

学习 认知提升

Vue生成AST算法的解析

djknight

Java Vue AST

redis持久化RDB与AOF

wjchenge

redis

深入理解ContextClassLoader

SkyeDance

深入理解JVM ContextClassLoader

浏览器是怎样工作的?_安全_NeoTan_InfoQ精选文章