feat(appendix): 添加多个交互式演示组件，完善 AI/Infra 等章节内容
- 新增 Vibe Coding 全栈相关演示组件 (DeveloperSkillShift, FrontendTriad, BackendCore 等) - 新增 RAG 相关组件 (RAGPipeline, ChunkingStrategy, Retrieval 等) - 新增 Embedding & Vector 相关组件 (EmbeddingConcept, VectorSimilarity 等) - 新增 AI Native App 设计组件 (AINativeArch, PromptDesign 等) - 新增 Infrastructure as Code 组件 (IaCConcept, TerraformWorkflow 等) - 新增 DNS & HTTPS 演示组件 (DnsResolution, HttpsHandshake 等) - 新增 Model Finetuning 组件 (FinetuningPipeline 等) - 更新多个章节的 markdown 内容，集成交互式演示
This commit is contained in:
sanbuphy
@@ -1,3 +1,173 @@
|
||||
# 域名、DNS 与 HTTPS
|
||||
|
||||
> 待实现
|
||||
::: tip 前言
|
||||
**当你在浏览器输入 `www.google.com` 并按下回车，背后发生了什么？** 这个看似简单的动作，背后涉及域名解析、DNS 查询、TLS 加密握手等一系列精密的协作过程。理解这些机制，是每个开发者的必修课——它直接关系到你的网站能不能被访问、数据会不会被窃取。
|
||||
:::
|
||||
|
||||
**这篇文章会带你学什么？**
|
||||
|
||||
学完这章后，你将获得：
|
||||
|
||||
- **DNS 原理**：理解域名如何被翻译成 IP 地址的完整过程
|
||||
- **记录类型**：掌握 A、CNAME、MX 等常见 DNS 记录的用途
|
||||
- **HTTPS 机制**：理解 TLS 握手如何建立安全连接
|
||||
- **证书体系**：了解数字证书的信任链和验证机制
|
||||
- **安全意识**：明白为什么 HTTPS 是现代 Web 的底线要求
|
||||
|
||||
| 章节 | 内容 | 核心概念 |
|
||||
|-----|------|---------|
|
||||
| **第 1 章** | DNS 解析 | 递归查询、迭代查询 |
|
||||
| **第 2 章** | DNS 记录 | A、CNAME、MX、TXT |
|
||||
| **第 3 章** | HTTPS 与 TLS | 握手过程、加密通信 |
|
||||
| **第 4 章** | 证书信任链 | CA、根证书、中间证书 |
|
||||
| **第 5 章** | HTTP vs HTTPS | 明文 vs 加密、安全对比 |
|
||||
|
||||
---
|
||||
|
||||
## 0. 全景图：从域名到安全连接
|
||||
|
||||
互联网的通信基于 IP 地址（如 142.250.80.46），但人类记不住这些数字。于是我们发明了**域名系统（DNS）**——互联网的"电话簿"，把人类可读的域名翻译成机器可读的 IP 地址。
|
||||
|
||||
但光能找到服务器还不够。如果通信内容是明文传输的，任何中间人都能窃听、篡改你的数据。**HTTPS** 就是解决这个问题的——它在 HTTP 之上加了一层 TLS 加密，确保数据在传输过程中的机密性和完整性。
|
||||
|
||||
::: tip 一次完整的网页访问
|
||||
1. **域名解析**：浏览器问 DNS "www.google.com 的 IP 是多少？"，DNS 回答 "142.250.80.46"
|
||||
2. **TCP 连接**：浏览器与服务器建立 TCP 三次握手
|
||||
3. **TLS 握手**：双方协商加密算法、验证证书、交换密钥
|
||||
4. **加密通信**：所有 HTTP 数据通过加密通道传输
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 1. DNS 解析：互联网的"电话簿"
|
||||
|
||||
DNS（Domain Name System）的工作原理就像查电话簿：你知道对方的名字（域名），需要查到对方的电话号码（IP 地址）。但互联网的"电话簿"不是一本，而是一个分层的分布式系统。
|
||||
|
||||
<DnsResolutionDemo />
|
||||
|
||||
::: tip DNS 解析的四个步骤
|
||||
1. **浏览器缓存**：先查本地缓存，如果之前访问过这个域名，直接用缓存的 IP
|
||||
2. **递归解析器**：缓存没命中，请求发给 ISP 的递归解析器（如 8.8.8.8）
|
||||
3. **逐级查询**：递归解析器依次询问根域名服务器 → 顶级域服务器（.com）→ 权威域名服务器（google.com）
|
||||
4. **返回结果**：权威服务器返回最终 IP，递归解析器缓存结果并返回给浏览器
|
||||
:::
|
||||
|
||||
| 层级 | 服务器 | 职责 | 数量 |
|
||||
|------|-------|------|------|
|
||||
| 根域 | Root Server | 知道所有顶级域的地址 | 全球 13 组 |
|
||||
| 顶级域 | TLD Server | 管理 .com、.cn、.org 等 | 每个后缀一组 |
|
||||
| 权威域 | Authoritative | 存储具体域名的 DNS 记录 | 每个域名至少 2 个 |
|
||||
| 递归解析器 | Resolver | 代替用户完成整个查询过程 | ISP 或公共 DNS |
|
||||
|
||||
---
|
||||
|
||||
## 2. DNS 记录类型：域名背后的"配置表"
|
||||
|
||||
DNS 不只是把域名翻译成 IP。通过不同类型的 DNS 记录，你可以控制邮件投递、域名跳转、服务发现等多种行为。理解这些记录类型，是配置域名和排查网络问题的基础。
|
||||
|
||||
<DnsRecordTypeDemo />
|
||||
|
||||
| 记录类型 | 用途 | 示例 |
|
||||
|---------|------|------|
|
||||
| A | 域名 → IPv4 地址 | `example.com → 93.184.216.34` |
|
||||
| AAAA | 域名 → IPv6 地址 | `example.com → 2606:2800:220:1:...` |
|
||||
| CNAME | 域名 → 另一个域名（别名） | `www.example.com → example.com` |
|
||||
| MX | 指定邮件服务器 | `example.com → mail.example.com` |
|
||||
| TXT | 存储文本信息 | SPF 验证、域名所有权验证 |
|
||||
| NS | 指定权威域名服务器 | `example.com → ns1.example.com` |
|
||||
|
||||
::: tip 实际场景中的 DNS 配置
|
||||
- **部署网站**：添加 A 记录指向服务器 IP，或 CNAME 指向 CDN 域名
|
||||
- **配置邮箱**：添加 MX 记录指向邮件服务器，TXT 记录配置 SPF/DKIM 防垃圾邮件
|
||||
- **验证域名所有权**：云服务商要求你添加特定 TXT 记录来证明你拥有这个域名
|
||||
- **负载均衡**：同一域名配置多条 A 记录，DNS 轮询分发流量
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 3. HTTPS 与 TLS：给数据穿上"防弹衣"
|
||||
|
||||
HTTP 协议的数据是明文传输的——就像寄明信片，邮递员（中间人）可以随意阅读内容。HTTPS 在 HTTP 之上加了一层 TLS（Transport Layer Security）加密，相当于把明信片装进了密封信封。
|
||||
|
||||
TLS 握手是建立安全连接的关键步骤，它在正式传输数据之前，完成身份验证和密钥协商。
|
||||
|
||||
<HttpsHandshakeDemo />
|
||||
|
||||
::: tip TLS 1.3 握手的核心步骤
|
||||
1. **Client Hello**：客户端发送支持的加密算法列表和一个随机数
|
||||
2. **Server Hello**：服务器选择加密算法，返回数字证书和随机数
|
||||
3. **证书验证**：客户端验证服务器证书是否可信（检查 CA 签名、有效期、域名匹配）
|
||||
4. **密钥交换**：双方通过 ECDHE 算法协商出一个共享密钥（不在网络上传输密钥本身）
|
||||
5. **加密通信**：后续所有数据使用协商好的对称密钥加密传输
|
||||
:::
|
||||
|
||||
| 特性 | TLS 1.2 | TLS 1.3 |
|
||||
|------|---------|---------|
|
||||
| 握手往返次数 | 2-RTT | 1-RTT（首次）/ 0-RTT（恢复） |
|
||||
| 密钥交换 | RSA 或 ECDHE | 仅 ECDHE（前向安全） |
|
||||
| 加密算法 | 支持较多旧算法 | 仅保留安全算法 |
|
||||
| 性能 | 较慢 | 更快 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 证书信任链：凭什么相信这个网站？
|
||||
|
||||
TLS 握手中最关键的一步是"证书验证"。浏览器怎么判断一个网站的证书是真的，而不是攻击者伪造的？答案是**证书信任链**——一个层层背书的信任体系。
|
||||
|
||||
<CertificateChainDemo />
|
||||
|
||||
::: tip 证书信任链的三层结构
|
||||
1. **根证书（Root CA）**：由受信任的证书颁发机构签发，预装在操作系统和浏览器中。这是信任的"锚点"。
|
||||
2. **中间证书（Intermediate CA）**：由根 CA 签发，用于签发终端证书。根 CA 不直接签发网站证书，是为了安全隔离。
|
||||
3. **终端证书（Leaf Certificate）**：你的网站实际使用的证书，由中间 CA 签发，包含域名、公钥、有效期等信息。
|
||||
:::
|
||||
|
||||
| 证书类型 | 验证级别 | 颁发速度 | 适用场景 |
|
||||
|---------|---------|---------|---------|
|
||||
| DV（域名验证） | 仅验证域名所有权 | 分钟级 | 个人网站、博客 |
|
||||
| OV（组织验证） | 验证组织身份 | 数天 | 企业官网 |
|
||||
| EV（扩展验证） | 严格验证组织 | 数周 | 银行、金融机构 |
|
||||
| 通配符证书 | 覆盖所有子域名 | 视类型而定 | 多子域名场景 |
|
||||
|
||||
---
|
||||
|
||||
## 5. HTTP vs HTTPS：为什么加密是底线？
|
||||
|
||||
2024 年，全球超过 95% 的网页流量已经通过 HTTPS 传输。Chrome 浏览器会对 HTTP 网站标记"不安全"警告，搜索引擎也会降低 HTTP 网站的排名。HTTPS 不再是"可选项"，而是现代 Web 的底线要求。
|
||||
|
||||
<DnsHttpsComparisonDemo />
|
||||
|
||||
| 维度 | HTTP | HTTPS |
|
||||
|------|------|-------|
|
||||
| 数据传输 | 明文，可被窃听 | 加密，无法被窃听 |
|
||||
| 身份验证 | 无，无法确认服务器身份 | 有，通过证书验证服务器 |
|
||||
| 数据完整性 | 无保护，可被篡改 | 有保护，篡改会被检测 |
|
||||
| 端口 | 80 | 443 |
|
||||
| SEO 影响 | 搜索排名降低 | 搜索排名加分 |
|
||||
| 浏览器表现 | 显示"不安全"警告 | 显示锁图标 |
|
||||
|
||||
::: tip 免费获取 HTTPS 证书
|
||||
**Let's Encrypt** 是一个免费、自动化的证书颁发机构，让任何网站都能零成本启用 HTTPS。配合 Certbot 工具，可以一键申请和自动续期证书。大多数云平台和 CDN 服务商也提供免费的 SSL 证书。
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 总结
|
||||
|
||||
域名、DNS 和 HTTPS 是互联网基础设施的三大支柱。DNS 让我们用人类可读的名字访问网站，HTTPS 确保通信过程安全可信。
|
||||
|
||||
回顾本章的关键要点：
|
||||
|
||||
1. **DNS 是分层系统**：根域 → 顶级域 → 权威域，逐级查询，缓存加速
|
||||
2. **记录类型各有用途**：A 记录指向 IP，CNAME 做别名，MX 管邮件，TXT 做验证
|
||||
3. **TLS 握手建立信任**：证书验证 + 密钥协商，TLS 1.3 只需 1-RTT
|
||||
4. **证书信任链**：根 CA → 中间 CA → 终端证书，层层背书
|
||||
5. **HTTPS 是底线**：免费证书（Let's Encrypt）让加密零门槛
|
||||
|
||||
## 延伸阅读
|
||||
|
||||
- [How DNS Works](https://howdns.works/) - 漫画形式讲解 DNS 工作原理
|
||||
- [Let's Encrypt 文档](https://letsencrypt.org/docs/) - 免费 SSL 证书申请指南
|
||||
- [Cloudflare Learning Center](https://www.cloudflare.com/learning/dns/what-is-dns/) - DNS 和网络安全系统教程
|
||||
- [TLS 1.3 RFC 8446](https://datatracker.ietf.org/doc/html/rfc8446) - TLS 1.3 协议规范
|
||||
- [SSL Labs](https://www.ssllabs.com/ssltest/) - 在线检测网站 HTTPS 配置质量
|
||||
|
||||
Reference in New Issue
Block a user