JavaScript篇：HTTP vs HTTPS：你的网站真的“安全“吗？

江城开朗的豌豆

于 2025-05-06 08:40:57 发布

阅读量726

点赞数 13

分类专栏：前端 # 面试题文章标签： http javascript https

本文链接：https://blog.csdn.net/qq_48652579/article/details/147726499

版权

前端同时被 2 个专栏收录

205 篇文章

订阅专栏

面试题

123 篇文章

订阅专栏

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

作为一名前端开发工程师，我经常被问到："为什么我的网站需要HTTPS？HTTP不是用得好好的吗？"今天，我们就来聊聊这个看似简单却至关重要的话题。

从一次尴尬的"裸奔"经历说起

记得几年前，我刚入行不久，接手了一个企业官网项目。当时为了图省事（其实是偷懒），直接用了HTTP协议上线。结果没过多久，客户怒气冲冲地打来电话："我的网站被浏览器标记为'不安全'了！"

那一刻，我意识到：在网络世界里，HTTP就像是在大街上裸奔，而HTTPS则是穿上了得体的衣服。下面我们就来详细看看它们的区别。

HTTP：透明传输的"明信片"

HTTP（HyperText Transfer Protocol）是互联网上应用最广泛的网络协议之一。但它有个致命缺点：所有数据都是明文传输。

// 举个栗子：用HTTP登录时
const 我 = {
  username: 'zhangsan',
  password: '123456' // 这个密码在传输过程中是明文！
};

fetch('http://example.com/login', {
  method: 'POST',
  body: JSON.stringify(我)
});

想象一下，这就像你寄出一张明信片，邮递员（以及任何经手的人）都能看到上面的内容。显然，这对敏感信息（如密码、信用卡号）来说极其危险。

HTTPS：给数据穿上"防弹衣"

HTTPS（HyperText Transfer Protocol Secure）可以理解为HTTP的安全版。它在HTTP和TCP之间加了一层SSL/TLS加密层，主要解决了三个核心问题：

加密传输 - 数据不再是明文
身份认证 - 确认你访问的是真正的网站
数据完整性 - 防止数据被篡改

// 同样的登录，使用HTTPS
const 我 = {
  username: 'zhangsan',
  password: '123456' // 这个密码会被加密传输
};

fetch('https://example.com/login', {
  method: 'POST',
  body: JSON.stringify(我)
});

现在，这张"明信片"被装进了保险箱，只有收件人有钥匙打开它。

关键区别对比表

特性	HTTP	HTTPS
安全性	明文传输，不安全	加密传输，安全
默认端口	80	443
协议	应用层协议	HTTP+SSL/TLS
SEO影响	不利于排名	Google给予排名优势
速度	稍快	稍慢（但现代优化后差异很小）
证书	不需要	需要SSL证书

为什么现代网站必须使用HTTPS？

用户信任：浏览器会对HTTP网站显示"不安全"警告
功能限制：很多Web API（如地理位置、Service Worker）要求HTTPS
SEO优势：Google明确表示HTTPS是排名因素之一
性能表现：HTTP/2必须基于HTTPS，而HTTP/2能显著提升性能
数据安全：防止中间人攻击、流量劫持等安全威胁

一次真实的中间人攻击案例

去年，我朋友的公司内网系统（使用HTTP）遭到了攻击。攻击者只是在公司WiFi上做了简单的流量监听，就获取了大量员工的账号密码。后来切换到HTTPS后，这类问题彻底杜绝了。

如何从HTTP迁移到HTTPS？

获取SSL证书：可以从Let's Encrypt免费获取，或购买商业证书
配置服务器：以Nginx为例：

server {
    listen 443 ssl;
    server_name example.com;
    
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/private.key;
    
    # 强制HTTPS
    if ($scheme = http) {
        return 301 https://$server_name$request_uri;
    }
}