前言
访问个人网站,偶尔会跳出广告,看来网站被运营商劫持了。为了避免这种情况,郝同学决定对网站进行https加密。早在2015年,美国政府就要求所有联邦政府网站使用https加密连接,这次郝同学也算是赶上了国际潮流的尾巴。
HTTPS(SSL/TLS)加密原理,参考文档《浅谈数据加密》。
HTTPS配置方法
https是在http下加入ssl层,那么,怎么加入呢?
很简单,在nginx、apache等web服务器中加入ssl安全证书的配置即可。
SSL证书申请
很多网站都提供免费的ssl证书:
- 阿里云免费SSL证书,保护类型选择1个域名,选择品牌选择Symantec,即可看到免费型DV SSL。
- 腾讯云免费SSL证书
- 七牛免费SSL证书
推荐使用腾讯云,注册登录,根据提示填写信息,不久就可以拿到证书。
解压www.voidking.com.zip
,可以得到下列文件:
1 | www.voidking.com |
思路
GitLab
github和coding,都不支持上传ssl证书。但是,gitlab支持啊!最简单的思路就是,把网站迁到gitlab上。
按照这个思路,参考《利用gitlab pages和hexo搭建一个个人博客》和《零成本打造安全博客的简单办法》。
1、打开gitlab的项目,Settings,Pages,New Domain,即可进入域名配置页面。
2、Domain填入www.voidking.com
,Certificate (PEM)填入1_www.voidking.com_bundle.crt
中的内容,Key (PEM)填入2_www.voidking.com.key
中的内容。
Cloudflare
Cloudflare是一家CDN提供商,它提供了免费的https服务(但不是应用SSL证书)。实现模式就是,用户到CDN服务器的连接为https,而CDN服务器到真实服务器的连接为http。也就是说,在CDN服务器那里加上反向代理。没错,又是反向代理,只不过这次的代理服务器归属于Cloudflare,不是我们自己的。
这种方式,好处是你不需要拥有自己的公网服务器,坏处是你必须把域名的dns服务器换成cloudflare。
具体设置步骤参考《让个人域名下GithubPage完美支持https》。
Nginx反向代理
反向代理是普遍思路,无论我们的真实服务器在github、coding还是gitlab,都可以使用反向代理的方式完成https加密连接。前提是你有一个公网服务器,上面安装了nginx。
用户访问域名;域名解析到公网IP,访问到nginx;nginx反向代理到coding等真实服务器,通过http方式拿到页面;nginx拿到页面后进行ssl加密,然后返回给用户加密后的页面。
详细步骤
郝同学决定选用最通用的方式,通过nginx反向代理来实现https访问(假设已经申请好了ssl证书)。
修改域名解析
原来的域名解析位CNAME记录,指向pages.coding.me,现在修改为A记录,指向公网IP。
上传证书
1、服务器上,创建目录sslmkdir /etc/nginx/ssl
2、使用xftp上传 www.voidking.com/Nginx 文件夹中的 1_www.voidking.com_bundle.crt 和 2_www.voidking.com.key 到ssl目录。
配置Nginx
配置nginx,参考《Nginx开启SSL与重定向优化》
1、coding pages配置不变,依然绑定 www.voidking.com 域名。
2、/etc/nginx/conf.d中新建配置文件 www.voidking.com.conf ,内容如下:
1 | server { |
3、重启nginxsystemctl restart nginx
4、测试访问
访问 https://www.voidking.com ,已经可以正常访问网址,只不过有些脚本是通过http方式引用的,会提示不安全,等下我们修改了hexo主题就好了。
修改Hexo主题
1、访问 https://www.voidking.com ,F12,启用调试模式,查看哪些文件是不安全的。
2、修改hexo主题,把那些不安全的文件全部修改为https引用。
jquery1.9.0
在hexo/themes/yilia/layout/_partial
中找到head.ejs,修改jquery引用地址为:
1 | <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script> |
Mathjax
《Hexo中使用Mathjax的冲突问题》一文中,我们引用mathjax的方式也是http,引用单位是整个主题(所有的页面)。下面我们把引用方式修改为https,引用单位改为单个页面。
1、把hexo/themes/yilia/layout/_partial
中的mathjax.ejs移动到hexo/themes/yilia/layout/_partial/post
。
2、修改mathjax.ejs中的js引用:
1 | <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> |
3、删除after-footer.ejs中关于mathjax的引用。
4、修改hexo/themes/yilia/layout/_partial/article.ejs
,在最后添加:
1 | <if (!index && post.mathjax){ > |
5、修改markdown文档。使用mathjax的文档,在头部加上:
1 | mathjax: true |
畅言
在hexo/themes/yilia/layout/_partial/post
中找到changyan.ejs,其中的两个js引用,改成https。
jiathis
jiathis和baidushare都不提供https方式的引用,所以只能将其本地化(下载所有源码并修改源码),或者利用反向代理。实在费劲,郝同学决定换成overtrue同学的share.js。
原post/share.ejs为:
1 | <div class="share"> |
修改为:
1 | <div class="share"> |
源码分享
个人yilia地址:https://github.com/voidking/hexo-theme-yilia
配置Nginx进阶
至此,已经可以通过http和https两种方式访问 www.voidking.com 了。既然已经有了https,http不妨重定向到https。
修改 www.voidking.com.conf 为:
1 | server { |
SSL的配置不要加 ssl on ,否则启动时会存在一个警告:
1 | [warn] 1#1: the "ssl" directive is deprecated, use the "listen ... ssl" directive instead in /etc/nginx/conf.d/www.voidking.com.conf:11 |
重启nginx,访问 http://www.voidking.com ,会自动跳转到 https://www.voidking.com ,说明配置成功。
后记
这里,我们并没有配置 voidking.com 和 blog.voidking.com ,可以参照上面的步骤进行配置。
更加简单的配置方式,是在dnspod上配置显性url,直接跳转到 http://www.voidking.com 。
本文主要研究Hexo启用https加密连接。其实平时建站的时候,也可以给网站启用https加密连接,原理类似。