人人网FED博客

专注于前端技术

为什么要把网站升级到HTTPS

笔者最近把博客网站升级到了https:https://fed.renren.com,为什么要升级呢?

举一个最简单的例子,当我打开这个网页的时候:在网页的右下角会显示一个广告:

但是这个网站是美国的:

为什么中国的广告会打到美国去了?并且不止一个网站有这个问题,自己的博客网站在我家打开经常也会有这个问题,经常会弹一些广告,这是为什么呢?

因为网站被运营商劫持了,它往你的html里面注入了一段广告的html,如下图所示:

这个时候运营商就相当于一个中间人,如下图所示:

这个我在《https连接的前几毫秒发生了什么》已经介绍过,不过不太一样的是,由于中间人的身份比较特殊,是运营商,所以它是在正常的连接上面的。也可以说由于运营商暗地里做了劫持,你也可以认为它不是一个正常的连接了。

不管怎么样,这种劫持也叫http劫持只发生在http连接上,而https的连接是没这个问题的,基本只要打开的是https的网页都不会被注入广告。因为传输的数据都是加密的,中间人收到的是一串无法解密的文本,它也不知道怎么篡改。

防火防盗防运营商,但是注入广告还算是小事,因为如果是http连接你的数据在网络上都是明文传输的,包括你的密码等敏感信息,你和服务器之间经过的路由都可以嗅探到你的数据,可以做些修改如嵌入一个广告,做一些破坏,或者只单纯的抓取信息如邮件内容、账号密码等。所以使用https是很有必要的,火狐会在非https的网页的密码输入框提示不安全:

Chrome/firefox等浏览器会在较明显的位置提示当前http网站不安全,只要点一下地址栏左边的i按钮就会弹出来:

并且https的网站能够提升SEO。

在外面连的公共wifi,使用https能够减少账号信息被盗的风险,但也不是100%安全,因为它可以用其它的方式如在你的设备上种植木马等获取和控制你的账号。

不管怎么样,搞一个https还是很有必要的,至少不要让别人以为那个广告是你自己的网站打的。那怎么建立一个https的网站呢?我在《https连接的前几毫秒发生了什么》已经简单介绍过,需要购买SSL的证书,网上也有一些免费的证书。在某家证书购买机构可以看到证书的分类和价格:

证书分为三种dv(域名型)、ov(企业型)和ev(增强型),dv是最简单的只要有一个可以访问的域名就可以申请,而ov是给企业用的,申请比较严格需要提供企业的相关材料,ev可以在地址栏上显示公司的名字,如sitepoint.com。对于我们这种小博客网站搞一个dv型的就可以了。

有一个免费的dv型证书颁发机构叫letsencrypt,它可以提供三个月的免费使用,到期了再续一下就行,所以说它是免费的。而且安装和申请非常简单,使用certbot安装。下面简单介绍下安装过程:

先打开certbot的网站,选择你的操作系统,如笔者用的是centos + nginx:

然后它就会提示你怎么装了,先下载一个编译好的可执行文件:

然后再执行安装的命令:

它会先安装一些python的包,之后会让你输入你的邮箱,然后自动去找你的nginx配置文件,找出里面的server的域名列出来,让你选哪个要安装https证书:

Which names would you like to activate HTTPS for?
——————————————————————————-
1: fed.renren.com
——————————————————————————-
Select the appropriate numbers separated by commas and/or spaces, or leave input
blank to select all options shown (Enter ‘c’ to cancel):

选好了之后它就会去申请证书,然后检验域名的合法性,如果报了连接超时的错误:

– The following errors were reported by the server:

Domain: trumporate.com
Type: connection
Detail: Timeout

那么很可能是防火墙iptables的443端口没有开放,只要把它和80端口一样开放一下就好了。

成功验证后它就会把SSL的证书下载下来,同时给nginx的添加ssl的配置:

还会提示是否要把http的重定向到https,如果选是的话,它就会添加以下nginx配置:

301表示资源永久转移,浏览器收到301响应之后就会自动做重定向。

由于网站的很多图片的地址是http的已经固化到数据库里面,导致需要在https的网页里加载http的图片,这样即使是配了证书,浏览器也会提示不安全,浏览器地址样栏的小锁也没有了:

如果手动去改数据库会比较麻烦,有个比较简单的方法就是使用让http升级的meta标签:

这样页面上所有的http请求都会强制变成https的请求。如果某些请求的服务器不支持https那这些请求就会挂掉,但我这个网站没有这个问题。

这样就愉快地把网站免费升级成https了:

在浏览器查看证书:

https升级后的问题是:加密和解密需要占用更多的CPU,并且加密后的数据会变大,但是据笔者观察加上gzip压缩之后,https传输的内容大小几乎和http一样。除了正常的tcp连接之外,还要建立ssl连接,这个时间一般在0.3s ~ 0.5s左右,这个是需要付出点代价的,但是由于浏览器左下角会提示用户“正在建立安全连接”,有一个缓冲的过程,所以其实还好。

目录: 页面优化

4 回复

  1. 恩,写的不错,多谢分享!

Trackbacks

  1. 怎样把网站升级到http 2 – 人人网FED博客
  2. 我是怎么让网站用上HTML5 Manifest – 人人网FED博客
  3. 使用Service Worker发送Push推送 – 人人网FED博客

发表评论

电子邮件地址不会被公开。 必填项已用*标注