HTTPS 原理及部署

HTTP 和 HTTPS

如果你之前了解过计算机网络,那么你一定听说过 HTTP 协议。HTTP 协议的全称为 HyperText Transfer Protocol,即超文本传输协议。

HTTP 协议位于 OSI 七层网络模型中的第七层——应用层。Web 服务器上的所有资源的传输都遵守该协议,用户通过浏览器进行资源的查看和下载。

RFC 2616 定义了 HTTP 1.1。

简单回顾一下 HTTP 协议的内容,主要由三部分组成:

  • 起始行
  • 首部
  • 实体

HTTP 请求

请求

HTTP 响应

响应

回到我们的正题 HTTPS,其比 HTTP 多了一个 S。S 即 Safe,安全,我们可以知道 HTTPS 基于 HTTP,但是比其更加安全。

http和https

事实上是 HTTPS 是在原先的 HTTP 中加入了 SSL/TLS。SSL/TLS 是指一个安全的协议。SSL 是 NetScape 公司对这个安全协议的称呼。而 TLS 是 ISOC 组织将这个安全协议标准化后的称呼。所以两者是指一个东西,现在多称呼 TLS,传输层安全协议(Transport Layer Security)。

HTTPS 的特点

我们知道任何一样事物不会无缘无故出现,也不会无缘无故消失。

之所以会出现 HTTPS,主要是由于安全问题。在之前博客中,我提到了 Web 传输过程中的问题,正是由于 HTTP 协议的不足所造成的。

普通的 HTTP 通信,其内容是不加密的,可能遇到这些问题:

  • 内容窃听
  • 内容篡改
  • 请求冒充

而 HTTPS 正是用来解决这些问题的:

  • 所有信息都是加密传播,第三方无法窃听
  • 具有校验机制,一旦被篡改,通信双方会立刻发现
  • 配备身份证书,防止身份被冒充

HTTPS 的原理

当我们访问一个网站时,如果该网站使用的是 HTTPS 协议,那么就先会经过 TLS 握手。

TLS握手

  1. 客服端(即浏览器)向服务器(访问网站)发送一次请求:
    • 支持的版本协议,如 TLS 1.0
    • 一个随机码,用于“对话密钥”
    • 支持的加密方法,如 RSA 公钥加密
    • 支持的压缩方法
  2. 服务器回应客户端:
    • 确认加密协议
    • 一个随机码,用于“对话密钥”
    • 确认加密方法
    • 服务器证书
  3. 客户端回应服务器:
    • 一个随机码,用服务器公钥加密,防止被窃听
    • 编码改变通知,表示随后的信息都将用双方商定的加密方法和密钥发送
    • 客户端握手结束通知,表示客户端的握手阶段已经结束。这一项同时也是前面发送的所有内容的hash值,用来供服务器校验
  4. 服务器回应客服端:
    • 编码改变通知,表示随后的信息都将用双方商定的加密方法和密钥发送
    • 服务器握手结束通知,表示服务器的握手阶段已经结束。这一项同时也是前面发送的所有内容的hash值,用来供客户端校验

在 TLS 握手过程中,主要经历上面这四个步骤。HTTPS 与 HTTP 的不同在于后者内容采用明文传输,而前者内容采用加密传输。传输内容的加密方法采用的是对称加密,速度快。

为了保证对称加密密钥的安全,HTTPS 对对称加密密钥的交换采用 RSA 非对称加密。非对称加密有公钥和私钥,公钥可以公开透明,让任何人知道,但私钥一定要保密。

HTTPS 的应用

HTTPS 最直接的应用就是给网站加上一个小绿锁。HTTPS 证书申请有两种,免费和收费的。

SSL For Free 这个网站可以免费获取数字证书,有效时间 90 天。时间到了,那你必须重新获取一个证书。

在获取证书后,如何配置我们的服务器呢?在 SSL For Free 网站的下方我们可以看到下图区域,根据我们的服务器平台,点击对应链接即可。
https教程

如果你是阿里云用户,它也提供了一个入口,我们通过其后台也可以免费获取数字证书。

阿里云TLS
点击单域名数字证书即可获取免费证书,其证书的有效时间为一年

阿里云也提供了配置证书的教程,如下图所示:

https教程


参考

<think>嗯,用户这次想了解CSS服务的部署方式和工作原理。不过从引用内容来看,用户可能混淆了CSS(层叠样式表)和某种服务器服务的概念——引用[3][5]提到的是前端CSS样式表的代码示例,而引用[1][2][4]讨论的是Nginx、HTTP协议等服务器技术。 用户真实需求应该是:想了解作为网络服务的CSS(可能是内容分发网络CDN或样式表托管服务)的部署原理。但根据现有资料,更可能指传统CSS样式表在Web中的工作原理。需要分两层回应: 首先明确CSS作为样式表的核心机制: 1. 部署本质是文件托管(如引用[5]展示的<link>引入外部CSS文件) 2. 浏览器按选择器优先级渲染DOM(如引用[3]的内部样式示例) 3. 与HTTP服务强关联(引用[2]强调Content-type决定文件解析方式) 再补充现代部署方式: - CDN分发(如引用[1]的Nginx高性能分发能力) - 编译优化(Sass/Less转标准CSS) - HTTP/2推送(引用[4]涉及协议优化) 用户可能被术语误导了,"CSS服务"在运维语境中可能指: - 企业级样式管理系统(如统一UI库托管) - 动态CSS生成服务(根据设备实时生成样式) 但现有引用未提供足够依据,需引导用户澄清。 最后用Nginx部署CSS文件的例子(结合引用[1][4])说明实际工作流:浏览器请求 → Nginx识别text/css → 高效传输 → 浏览器解析应用样式。 相关问题设计需覆盖:基础原理(选择器)、部署优化(CDN)、新趋势(CSS-in-JS),同时提示用户区分"样式表"和"服务"概念。</think>CSS(层叠样式表)服务的部署和工作原理主要围绕**样式表的存储、传输和应用**展开。以下是详细说明: --- ### **一、CSS服务部署方式** 1. **静态文件托管** - CSS文件作为静态资源部署在Web服务器(如Nginx、Apache)或CDN上。 - 示例路径:`https://example.com/css/style.css` - 引用方式(HTML中): ```html <link rel="stylesheet" href="/css/style.css"> <!-- 相对路径 --> <link rel="stylesheet" href="https://cdn.example.com/style.css"> <!-- CDN加速 --> ``` 2. **动态生成CSS** - 通过后端服务(如Node.js、PHP)动态生成CSS内容(如主题切换)。 - 示例(PHP生成响应头): ```php header("Content-type: text/css"); // 声明MIME类型为CSS[^2] echo ":root { --theme-color: #{$user_theme}; }"; ``` 3. **模块化与构建工具** - 使用Webpack、Vite等工具将Sass/Less编译为CSS,并压缩合并。 - 输出优化后的静态文件,提升加载效率。 --- ### **二、CSS工作原理** #### **1. 浏览器加载流程** - **步骤1:解析HTML** 浏览器遇到`<link>`或`<style>`标签时,立即请求CSS文件(不阻塞HTML解析)[^2]。 - **步骤2:构建CSSOM** 将CSS规则解析为**CSS对象模型(CSSOM)**,包含选择器优先级和继承关系。 - **步骤3:渲染树合成** 将DOM与CSSOM合并为**渲染树(Render Tree)**,确定每个节点的视觉属性。 - **步骤4:布局与绘制** 计算元素位置(布局),最终像素化输出(绘制)。 #### **2. 核心机制** - **层叠(Cascading)** 按来源优先级(用户代理 < 用户 < 作者)和选择器权重(如`id` > `class`)合并规则[^3]。 - **继承(Inheritance)** 子元素自动继承父元素的可继承属性(如`font-family`)。 - **盒模型(Box Model)** 控制元素尺寸:`content + padding + border + margin`。 #### **3. 服务器端交互** - **HTTP响应头** 服务器需设置正确MIME类型:`Content-Type: text/css`[^2][^4]。 错误示例:若返回`text/html`,浏览器会按HTML解析CSS文件导致失效。 - **性能优化** - CDN分发:减少延迟(引用[1]提到Nginx的高并发能力适合静态资源分发)[^1]。 - 缓存控制:`Cache-Control: max-age=31536000`使浏览器缓存CSS文件。 --- ### **三、关键部署优化** 1. **压缩与合并** - 使用工具(如CSSNano)删除注释、空格,减少文件体积。 - 合并多个CSS文件,减少HTTP请求。 2. **CDN加速** 利用Nginx等服务器全球分发(引用[1]强调其高并发支持)[^1]。 3. **HTTP/2支持** 多路复用提升加载效率(引用[4]涉及协议优化)[^4]。 4. **缓存策略** 强缓存(`Expires`)与协商缓存(`ETag`)结合,减少重复传输。 --- ### **示例:Nginx部署CSS文件** ```nginx server { listen 80; server_name example.com; location /css/ { alias /path/to/css/files/; expires 365d; # 强缓存1年 add_header Content-Type text/css; } } ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值