WordPress: 开启全站HTTPS访问加密

Linux 2017-01-20 coderstory 手机阅读

最近想把博客整站https化，花了点时间尝试了一下。把成果写成笔记，希望对大家有所帮助。

 

本文内容包括了证书的申请，apache、nginx中的证书配置，以及wp相关设置等内容。
需要注意的是，免费的证书扩展性相比付费的证书要差一点，在android 2.x系统上，win xp以及老版本的ie上，可能会出现警告或者干脆打不开页面的情况。

在设置完成后，你可以去https://www.ssllabs.com/ssltest/跑个分看看具体的成绩。
相比之下，经测试沃通的证书能拿A- 评分,而LetEncrypt和腾讯的只能拿B评分。

 

 

1.证书的获取

【沃通免费证书】

WordPress: 开启全站HTTPS访问加密-我的技术分享

要玩https，证书是必须的，资源的加解密都是用证书完成的。
我用的是沃通的免费证书，当然如果是什么正式的网站，可别用免费的。
申请地址如下：http://www.wosign.com/DVSSL/DV_KuaiSSL_Free.htm
官方说明文档；http://freessl.wosign.com/1405.html

【LetEncrypt免费证书】

WordPress: 开启全站HTTPS访问加密-我的技术分享

Letencrypt是一个国外的知名免费CA证书颁发机构。目前国内很多个人网站和博客都在用他的证书。
申请比较简单，功能也够用，只是申请的证书只有3个月的有效期。
github上有全自动的证书申请脚本工具，直接clone下来，本地跑一次就OK了

具体的证书申请脚本下载方法和使用方法如下：

git clone https://github.com/letsencrypt/letsencrypt
cd letsencrypt
./letsencrypt-auto certonly --standalone --email 你的邮箱 -d 你的域名1 -d 你的域名2

脚本执行完毕后，相应的证书文件就自动下载好了
一般存放在/etc/letsencrypt/archive/申请证书的域名下面

*操作前请先配置好web服务器和域名绑定，因为申请的过程中需要往网站目录里写入验证文件，并且能通过域名访问这个验证文件
Tips：
如果你是windows主机，那么你大概需要去官网手动申请了。

【腾讯】
腾讯的申请地址：https://console.qcloud.com/ssl
登入QQ号后直接点页面上的申请证书按钮，然后按提示操作就好了，因为操作比较简单就不具体多说了。

2.配置服务器绑定证书

下载的证书一般是个压缩包，解压后有多个目录，用于区分不同的web服务器所使用的证书文件。
你需要根据你所使用的服务器软件选择正确的证书配置文件。
把你需要的证书文件解压到合适的目录里面。
【apache】

有了证书后，就要进行相关配置，让证书用起来。
我的服务器软件是apache。以此为例。
首先打开网站的配置文件，文件一般在/etc/apache2/sites-enabled/下面
打开后，在末尾追加如下配置

<VirtualHost *:443>
ServerAdmin webmaster@localhost
DocumentRoot /var/www/html
ServerName blog.coderstory.cn
SSLEngine on
SSLCertificateFile /usr/local/ssl/crt/2_blog.coderstory.cn.crt
SSLCertificateKeyFile /usr/local/ssl/3_blog.coderstory.cn.key
SSLCACertificateFile /usr/local/ssl/1_root_bundle.crt
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

 

注意加粗的字体，需要你修改下。ServerName是你网站的域名，SSLCertificateFile ，SSLCertificateKeyFile ，SSLCACertificateFile 是证书的路径，根据你存放路径修改，注意下文件的扩展名和我提供的配置上的文件扩展名一一对应。

 

然后配置.htaccess文件

我的配置如下 包含了基本的文章页url重写和443重写 屏蔽 ie 1-8浏览器 因为不支持

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
RewriteCond %{SERVER_PORT} !^443$
RewriteCond %{HTTP_USER_AGENT} !MSIE/[1-8]\. [NC]
RewriteCond %{HTTP_HOST} blog.coderstory.cn
RewriteRule ^.*$ https://blog.coderstory.cn%{REQUEST_URI} [L,R=301]
</IfModule>
# END WordPress

 

重启服务后， 网站应该能用https协议访问了。
【nginx】

nginx的配置范例如下：

配置文件路径:/etc/nginx/sites-available/defalut
当然也可能在其他目录，主要看nginx的配置文件目录在哪了。

#监听80端口（也就是http） 重写url 全部跳转到https
server {
    listen 80 default_server;
    server_name blog.coderstory.cn;
    rewrite ^(.*) https://$server_name$1 permanent;
}
#监听443端口（也就是https）
server {
        #配置网站根目录
	root /var/www/html/htdocs;
        #配置网站的首页
	index index.html index.htm index.nginx-debian.html;
        # 配置URL重写 解决wp中文章页404
	location / {
		 if (-f $request_filename/index.html){
                    rewrite (.*) $1/index.html break;
                }
                if (-f $request_filename/index.php){
                    rewrite (.*) $1/index.php;
                }
               if (!-f $request_filename){
                   rewrite (.*) /index.php;
                }
                #检查url是否合法（是否存在） 不存在的返回404页面
		try_files $uri $uri/ =404;
	}
     #配置URL重写 后台管理页面404的问题
     rewrite /wp-admin$ $scheme://$host$uri/ permanent;
     #配置PHP页面的处理方法 转发到php
    location ~ \.php$ {
       include snippets/fastcgi-php.conf;
       fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
    }

   #SSL 配置段 包括开启ssl 监听端口 以及证书路径
   listen 443;
   ssl on;
   ssl_certificate /etc/letsencrypt/live/blog.coderstory.cn/fullchain.pem;
   ssl_certificate_key /etc/letsencrypt/live/blog.coderstory.cn/privkey.pem;
}

3.wordpress源码修改

经过上面的步骤，网站虽然可以实现https访问了。但还是有点问题，主要是部分网页上的资源还是用http协议访问的。

导致这个https并不完整。

 

首先要修改主题的function.php文件 实现文章页面http链接替换成https

这些链接大部分都是文章上的图片。当然你也可以修改数据库，把文章里的http改成https

文章表的表明为wp_posts.

我们打开function.php，在末尾追加如下代码 其中blog.coderstory.cn改成你的域名

function replacehttp($content){
if( is_ssl() ){
$content = str_replace('https://blog.coderstory.cn/wp-content/uploads', 'https://blog.coderstory.cn/wp-content/uploads', $content);
}
return $content;
}
add_filter('the_content', 'replacehttp');

具体操作如下（附图中是没有保存按钮的，这是主题的限制，如果你也遇到了，那么大概要手动修改文件）
WordPress: 开启全站HTTPS访问加密-我的技术分享

 

然后修改一些主题模板里的资源链接
进入网站的后台，修改主题设置。把主题设置的网站logo啊，背景图片啊的链接改成https的。
如果设置里改不了，那么自己去手动改源码。

在菜单中选择 设置-常规， 将WordPress地址（URL），站点地址（URL）这两个参数都改成https的博客地址

WordPress: 开启全站HTTPS访问加密-我的技术分享

 

接下来说说 多说 的修改

首先你需要实现多说的本地化，这个百度有很多博文我就不多说了。
多说核心文件下载地址是http://static.duoshuo.com/embed.js
你需要修改embed.js
搜索

e.avatar_url||rt.data.default_avatar_url

改为

e.avatar_url?'https://blog.coderstory.cn/wp-content/plugins/duoshuo/img-cache.php?src='+e.avatar_url:'https://blog.coderstory.cn/wp-content/plugins/duoshuo/img-cache.php?src='+rt.data.default_avatar_url

 

注意下https://blog.coderstory.cn/wp-content/plugins/duoshuo/img-cache.php这个php文件的地址

需要修改成你自己的路径
img-cache.php需要你自己去创建
自己创建个空文件，写入以下代码即可。

<?php
$src = $_GET['src'];
// Replace Gravatar to CN servers.
$src = preg_replace('/http:\/\/.+\.gravatar\.com/','http://cn.gravatar.com',$src);

// Timeout settings
$timeout = stream_context_create(array(
'http' => array('timeout' => 1.0)
));

// Do process for remote resource.
$data = file_get_contents($src, 0, $timeout);
header('Content-Type:image/png');
if(substr($data,0,3) === "\xFF\xD8\xFF" || substr($data,1,3) === "\x50\x4E\x47") {
echo $data;
} else {
echo file_get_contents(dirname(__FILE__)."//static.coderstory.cn/none.jpg", 0, $timeout);
}
?>

其中?none.jpg是多说用户默认头像可随意修改

最后 将 embed.js放到网站里 然后在footer.php写上对这个js的引用
img-cache.php放到你指定的路径下。

这个时候 多说的头像应该能显示了，但多说中评论出现了表情的话。。。又悲剧了（都是些图片外链）
暂时还没搞定。大概需要和处理头像的方式一样处理下。

 

SSL测试结果:

WordPress: 开启全站HTTPS访问加密-我的技术分享