WordPress: 开启全站HTTPS访问加密

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

 

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

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

 

 

1.证书的获取

【沃通免费证书】

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

【LetEncrypt免费证书】

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://blob.coderstory.cn/wp-content/uploads', 'https://blob.coderstory.cn/wp-content/uploads', $content);
}
return $content;
}
add_filter('the_content', 'replacehttp');

具体操作如下(附图中是没有保存按钮的,这是主题的限制,如果你也遇到了,那么大概要手动修改文件)

 

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

在菜单中选择 设置-常规, 将WordPress地址(URL),站点地址(URL)这两个参数都改成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__)."https://blob.coderstory.cn/none.jpg", 0, $timeout);
}
?>

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

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

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

 

SSL测试结果:

QQ截图20160824212255

点赞
  1. SuperFFChain说道:
    WebView Android 6.0

    咦?回复哪去了

  2. SuperFFChain说道:
    WebView Android 6.0

  3. YuXiao说道:

    你好,我的Wordpress配置SSL后,无法加载CSS和图片,该怎么办呢?

    1. coderstory说道:

      自己看下控制台,找到相关的url。。。然后修改无法访问资源的协议头 一般都在主题资源里面

  4. 80秋说道:

    联系下博主,有一个类似抢红包的软件开发,过来问个价,感兴趣请回复。

    1. coderstory说道:

      你的网站挺好看的

发表评论

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