Hexo启用https加密连接

文章目录
  1. 1. 前言
  2. 2. https简介
  3. 3. 配置原理
  4. 4. ssl证书申请
  5. 5. 思路
    1. 5.1. gitlab
    2. 5.2. 反向代理
    3. 5.3. Cloudflare
  6. 6. 详细步骤
    1. 6.1. 修改域名解析
    2. 6.2. 上传证书
    3. 6.3. 配置nginx
  7. 7. 修改hexo主题
    1. 7.1. jquery
    2. 7.2. mathjax
    3. 7.3. 畅言
    4. 7.4. jiathis
    5. 7.5. 源码分享
  8. 8. 配置nginx进阶
  9. 9. 小结

前言

访问个人网站,偶尔会跳出广告,看来网站被运营商劫持了。为了避免这种情况,小编决定对网站进行https加密。早在2015年,美国政府就要求所有联邦政府网站使用https加密连接,这次小编也算是赶上了国际潮流的尾巴。

https简介

HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版。即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。 它是一个URI scheme(抽象标识符体系),句法类同http:体系。用于安全的HTTP数据传输。https:URL表明它使用了HTTP,但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层(在HTTP与TCP之间)。这个系统的最初研发由网景公司(Netscape)进行,并内置于其浏览器Netscape Navigator中,提供了身份验证与加密通讯方法。现在它被广泛用于万维网上安全敏感的通讯,例如交易支付方面。

配置原理

https是在http下加入ssl层,那么,怎么加入呢?很简单,在nginx、apache等web服务器中加入ssl安全证书的配置即可。

ssl证书申请

很多网站都提供免费的ssl证书,收集整理如下:

推荐使用阿里云、腾讯云和七牛,注册登录,根据提示填写信息,不久就可以拿到证书。
解压www.voidking.com.zip,可以得到下列文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
www.voidking.com
│ www.voidking.com.csr

├─Apache
1_root_bundle.crt
2_www.voidking.com.crt
3_www.voidking.com.key

├─IIS
│ keystorePass.txt
│ www.voidking.com.pfx

├─Nginx
1_www.voidking.com_bundle.crt
2_www.voidking.com.key

└─Tomcat
keystorePass.txt
www.voidking.com.jks

思路

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中的内容。

反向代理

反向代理是普遍思路,无论我们的真实服务器在github、coding还是gitlab,都可以使用反向代理的方式完成https加密连接。前提是你有一个公网服务器,上面安装了nginx。

用户访问域名;域名解析到公网IP,访问到nginx;nginx反向代理到coding等真实服务器,通过http方式拿到页面;nginx拿到页面后进行ssl加密,然后返回给用户加密后的页面。

Cloudflare

Cloudflare是一家CDN提供商,它提供了免费的https服务(但不是应用SSL证书)。实现模式就是,用户到CDN服务器的连接为https,而CDN服务器到真实服务器的连接为http。也就是说,在CDN服务器那里加上反向代理。没错,又是反向代理,只不过这次的代理服务器归属于Cloudflare,不是我们自己的。

这种方式,好处是你不需要拥有自己的公网服务器,坏处是你必须把域名的dns服务器换成cloudflare。

具体设置步骤参考《让个人域名下GithubPage完美支持https》

详细步骤

小编决定选用最通用的方式,通过nginx反向代理来实现https访问(假设已经申请好了ssl证书)。

修改域名解析

原来的域名解析位CNAME记录,指向pages.coding.me,现在修改为A记录,指向公网IP。

上传证书

1、服务器上,创建目录ssl
mkdir /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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
server {
listen 80;
listen 443 ssl;
server_name www.voidking.com;
charset utf-8;

#ssl配置
ssl_certificate /etc/nginx/ssl/1_www.voidking.com_bundle.crt;
ssl_certificate_key /etc/nginx/ssl/2_www.voidking.com.key;
ssl_session_timeout 5m;
ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!ADH:!EXPORT56:RC4+RSA:+MEDIUM;

location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 1024m;
client_body_buffer_size 128k;
client_body_temp_path /var/data/client_body_temp;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffer_size 4k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
proxy_temp_file_write_size 64k;
proxy_temp_path /var/data/proxy_temp;

proxy_pass http://voidking.coding.me;
}
}

3、重启nginx
systemctl restart nginx

4、测试访问
访问 https://www.voidking.com ,已经可以正常访问网址,只不过有些脚本是通过http方式引用的,会提示不安全,等下我们修改了hexo主题就好了。

修改hexo主题

1、访问 https://www.voidking.com ,F12,启用调试模式,查看哪些文件是不安全的。

2、修改hexo主题,把那些不安全的文件全部修改为https引用。

jquery

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
2
3
<% if (!index && post.mathjax){ %>
<%- partial('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
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="share">
<!-- JiaThis Button BEGIN -->
<div class="jiathis_style">
<span class="jiathis_txt">分享到:</span>
<a class="jiathis_button_tsina"></a>
<a class="jiathis_button_cqq"></a>
<a class="jiathis_button_douban"></a>
<a class="jiathis_button_weixin"></a>
<a class="jiathis_button_tumblr"></a>
<a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
</div>
<script type="text/javascript" src="https://v3.jiathis.com/code/jia.js?uid=1405949716054953" charset="utf-8"></script>
<!-- JiaThis Button END -->
</div>

修改为:

1
2
3
4
5
6
7
<div class="share">
<div class="social-share"></div>

<!-- css & js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js"></script>
</div>

源码分享

个人yilia地址:https://github.com/voidking/hexo-theme-yilia

配置nginx进阶

至此,已经可以通过http和https两种方式访问 www.voidking.com 了。既然已经有了https,http不妨重定向到https。

修改www.voidking.com.conf为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
server {
listen 80;
server_name www.voidking.com;
return 301 https://$server_name$request_uri;
}

server {
# SSL configuration
listen 443 ssl;
listen [::]:443 ssl;
ssl on;

server_name www.voidking.com;

ssl_certificate /etc/nginx/ssl/1_www.voidking.com_bundle.crt;
ssl_certificate_key /etc/nginx/ssl/2_www.voidking.com.key;
ssl_session_timeout 5m;
ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!ADH:!EXPORT56:RC4+RSA:+MEDIUM;
ssl_prefer_server_ciphers on;

location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_pass http://voidking.coding.me;
}
}

重启nginx,访问 http://www.voidking.com ,会自动跳转到 https://www.voidking.com ,说明配置成功。

小结

这里,我们并没有配置 voidking.com 和 blog.voidking.com ,可以参照上面的步骤进行配置。但是,更加简单的配置方式,是在dnspod上配置显性url,直接跳转到 http://www.voidking.com

本文主要研究Hexo启用https加密连接,围绕hexo来谈,最终配置成功。其实,平时建站的时候,也可以给网站启用https加密连接,原理类似。