WordPress全站开启SSL，终于有了小绿锁！

目录 Wordpress相关2018年3月14日

http+ssl

访问安全的需求和大众的趋势使得我们该考虑给网站加ssl了，给网站加上ssl并不难，只要申请一个免费的ssl证书，在服务器端配置好ssl，wordpress稍加修改就可以实现https访问了。

申请免费SSL证书

如今免费的ssl证书申请机构不少，对于个人站长来说使用一个免费的DV SSL就可以了，要求更高的可以选择付费购买高级ssl证书。说到ssl证书，有以下三种：

数字证书 DV SSL OV SSL EV SSL
用户建议 个人 组织、企业 大型企业、金融机构
公信等级 一般 高 强
认证强度 网站真实性 组织及企业真实性 严格认证
安全性 一般 中 高
可信度 常规 中 高（地址栏绿色）

我们能申请到的免费证书就是DV SSL，个人站长不二之选。

免费证书从哪申请，我就介绍几个，具体申请步骤百度即可！
  • Let's Encrypt(https://letsencrypt.org/)
  • StartSSL(https://www.startssl.com/)
    • 提供免费一年且可以无限续期的SSL证书(此证书和沃通已被火狐和谷歌浏览器不再信任，恢复时间不确定，谨慎申请，不再推荐)
  • comodo ssl证书(https://ssl.comodo.com/)
    • 科摩多提供免费3个月的 dv ssl证书
  • 阿里云免费ssl证书(链接)
    • 基于Symantec（赛门铁克）的免费SSL证书，(本网站申请使用的证书)
  • 腾讯免费ssl证书(https://www.qcloud.com/product/ssl)
    • 腾讯云提供SSL证书的免费申请,可秒级获得申请,并可以无限续期。

配置SSL证书

虚拟主机没有独立ip的可能不支持ssl证书，而虚拟主机一般是共享ip，如果有独立ip可以向空间商咨询一下。使用ssl最好是有自己的服务器，如购买一个vps搭建即可。web服务器又有apache、nginx、iis等版本，使用不同的web服务器配置的步骤也就不同，具体配置过程百度即可，有安装了vps面板的服务器配置ssl可能会容易一些。

wordpress的相关设置

在服务器端配置好ssl证书并开启了443端口的话，就可以通过https://域名访问了，如果不能访问，前面的配置过程可能没有弄好。虽然能进行https访问wordpress了，但是在打开的页面下通过审查元素你会发现站内还是有部分js文件、css文件、图片等静态资源都是http链接。由于HTTPS协议的规定，https网站是不能引用http资源的或者需要点击窗口确认http资源的引用，结果是网站没有小绿锁虽然是https链接，并且各种js效果失效css样式缺失，如下图所示：

这是最新google浏览器显示界面，https网页引用了http的资源小绿锁就没有显示，如果你不想再用http，那么可以在后台修改wordpress地址和站点地址，全部换成https://，如下图设置：

换成https站点地址后，wordpress引用的自带js、css、站点图标icon、各种插件主题引用的css和js文件路径就都换成了https链接，当然页面也许还存在一些http链接，这就需要仔细排查。

替换wordpress的http链接

由于我们在启用https之前文章中插入的都是http链接的各项资源，在编辑文章时插入的网站内部的图片、视频、音乐等都是http链接，https安全策略导致打开网页时小绿锁依然没有，如果你的需要改动的http链接资源少的话，那么直接在文章中编辑把链接中的http改为https即可，如果需要改动的较多，那么一个一个改太耗时间了，这时可以用到数据库SQL命令或者wordpress代码。

数据库SQL命令：通过查找替换储存在数据库中文章的http字段为https可永久解决问题（直接操作数据库有一定风险，一旦出现问题，数据库可能毁坏，建议备份后再操作）。

  1. update wp_posts set post_content = replace(post_content, 'https://www.xxx.com','https://www.xxx.com');

wordpress function代码：将下面代码复制到主题文件下的function.php中，目录换成自己想要修改的目录。(代码源于网络，本人测试没有成功具体原因不详)

  1. function replacehttp($content){
  2. if( is_ssl() ){
  3. $content = str_replace('http://www.xxx.net/wp-content/uploads', 'https:// www.xxx.net /wp-content/uploads', $content);
  4. }
  5. return $content;
  6. }
  7. add_filter('the_content', 'replacehttp');

再提供两个代码可用于修改wordpress的http链接

HTTPS绝对链接替换：替换wordpress网站中的http链接为https，代码放于主题function.php文件中。(注意替换的是标签仅是网站内部链接，外部无效)

  1. add_filter('get_header', 'fanly_ssl');
  2. function fanly_ssl(){
  3.     if( is_ssl() ){
  4.         function fanly_ssl_main ($content){
  5.             $siteurl = get_option('siteurl');
  6.             $upload_dir = wp_upload_dir();
  7.             $content = str_replace( 'http:'.strstr($siteurl, '//'), 'https:'.strstr($siteurl, '//'), $content);
  8.             $content = str_replace( 'http:'.strstr($upload_dir['baseurl'], '//'), 'https:'.strstr($upload_dir['baseurl'], '//'), $content);
  9.             return $content;
  10.         }
  11.         ob_start("fanly_ssl_main");
  12.     }
  13. }

HTTPS相对链接替换：替换wordpress网站中的http链接为//相对链接，即http中引用http资源，https引用https资源，自动适应。

  1. add_filter('get_header', 'fanly_ssl');
  2. function fanly_ssl(){
  3.     if( is_ssl() ){
  4.         function fanly_ssl_main ($content){
  5.             $siteurl = get_option('siteurl');
  6.             $upload_dir = wp_upload_dir();
  7.             $content = str_replace( 'http:'.strstr($siteurl, '//'), strstr($siteurl, '//'), $content);
  8.             $content = str_replace( 'http:'.strstr($upload_dir['baseurl'], '//'), strstr($upload_dir['baseurl'], '//'), $content);
  9.             return $content;
  10.         }
  11.         ob_start("fanly_ssl_main");
  12.     }
  13. }

http强制跳转https

当我们的网站https已经可以访问了又不想继续留着http的话，可以做一个http跳转https的301重定向，这样用户访问时就会自动跳转到https，非常方便安全。301重定向需要修改网站的配置文件，不同web服务器设置方法也不同，下面主要介绍了Apache、Nginx服务器端的设置。（使用虚拟主机大多数可以在主机面板设置中找到，设置也非常简单，如有问题可想空间提供商询问）

Apache服务器端设置

在网站配置文件（一般为xxx.conf文件）中加入下面的规则或者再网站根目录创建.htaccess文件（开启.htaccess功能谷歌百度即可）实现的功能都是一样的。http跳转https：访问http(80端口)时就会跳转到https(443端口)，将以下代码复制xxx.conf网站配置文件或者.htaccess文件中就起到了强制跳转的功能。

代码一：网站换成自己的https主页

  1. RewriteEngine on   
  2. RewriteCond %{HTTP_HOST} ^www.xxx.com [NC]   
  3. RewriteRule ^(.*)$ https://%{SERVER_NAME}/$1 [L,R=301]
  4. 或   
  5. RewriteEngine on   
  6. RewriteCond %{HTTP_HOST} ^www.xxx.com [NC]   
  7. RewriteRule ^(.*)$ https://%{SERVER_NAME}%{REQUEST_URI} [L,R=301]

代码二：

  1. RewriteEngine On   
  2. RewriteCond %{SERVER_PORT} 80   
  3. RewriteRule ^(.*)$ https://%{SERVER_NAME}/$1 [R=301,L]
  4. 或   
  5. RewriteEngine On   
  6. RewriteCond %{SERVER_PORT} 80
  7. RewriteRule ^(.*)$ https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]

代码三：

  1. RewriteEngine on   
  2. RewriteCond %{SERVER_PORT} !^443$   
  3. RewriteRule ^(.*)$ https://%{SERVER_NAME}/$1 [L,R=301]
  4. 或   
  5. RewriteEngine on   
  6. RewriteCond %{SERVER_PORT} !^443$   
  7. RewriteRule ^(.*)$ https://%{SERVER_NAME}%{REQUEST_URI} [L,R=301]

如果对某个目录做https强制跳转，则复制以下代码：

  1. RewriteEngine on
  2. RewriteBase /yourfolder
  3. RewriteCond %{SERVER_PORT} !^443$
  4. RewriteRule ^(.*)$ https://%{SERVER_NAME}%{REQUEST_URI} [L,R]

Nginx服务器端设置

在服务器端目标网站配置文件xxx.conf文件中加入如下规则即可实现htp跳转https。在配置文件}之前xxxxx位置加入如下规则，然后重启/重载nginx就可以了。

server {
listen 80;
xxxxxxxxxxxxxxxxxx;
}

第一种

  1. return 301 https://$server_name$request_uri;        
  2. 或       
  3. return 301 https://$host$request_uri;  

第二种

  1. rewrite ^(.*)$ https://$host$1 permanent;

第三种

  1. if ($server_port = 80 ) {   
  2. return 301 https://$host$request_uri;   
  3. }   
  4. 或   
  5. if ($scheme = http ) {
  6. return 301 https://$host$request_uri;   
  7. }  

使用.htaccess文件

Nginx服务器其实也可以使用.htaccess文件，修改配置让Nginx服务器支持.htaccess，可以和Apache服务器一样在网站根目录下创建.htaccess文件复制Nginx规则同样实现301重定向。在 nginx配置文件的server{}中引入 .htaccess 文件:，代码如下（xxx为网站目录）。将上面的第一种、第三种代码复制到.htaccess文件中重启/重载nginx即可实现301重定向。

  1. include /xxx/.htaccess;   

可能存在的问题

写入.htaccess规则时，我发现博客只有首页能跳转https，其他文章页面都无法实现跳转，http状态查询如下

http状态

输入http://angeltime.cc，http状态返回来301状态码，指向https://angeltime.cc，证明.htaccess规则起了作用。

http状态

本来页面应返回301状态码并指向https://angeltime.cc/archives/494.html，但返回的是正常的200状态码，说明了.htaccess没起作用。

问题所在：

如果我们的博客开启了伪静态可能就就有可能出现上诉问题，原因是跳转规格放错位置。本来我们复制代码到.htaccess会出现下图的情况

.htaccess规则

我们把跳转规则放在伪静态规则的下面出现问题，[L]表明当前规则是最后一条规则，停止分析以后规则的重写，所以访问地址重写的文章页面时有[L]即停止了后面的规则，所以跳转规则不起作用。当访问http首页时，没有触发地址重写，就跳过伪静态规则执行了跳转规则所以http首页可以进行https跳转。我们要把跳转规则放在伪静态的上面就行如下图：

伪静态规则

 

再进行http状态查询时就正常了，如下图所示：

http状态

利用谷歌浏览器开发工具排查http元素

我们的博客可能在页面的某处引用了外部的js、css文件，用替代wordpress站内链接function代码也无法替换，这时我们检查主题时又找不到，这时就可以利用谷歌开发者工具用来排查http链接，我们知道一旦有http链接就会掉了小绿锁，为了全站ssl有必要这么作。

打开网页发现没有小绿锁时，从菜单或F12打开开发者工具找到安全选项如下图：

谷歌开发者工具

刷新以查看网页中存在的http链接如下图操作

谷歌开发者工具

也可以从这里找到引用的http资源

谷歌开发者工具

我们利用谷歌开发者工具定位http资源后，在源代码中修改其链接不行的去掉即可换成ssl链接资源即可！至此，我们修改了页面所有可能的链接，那么网站所有页面也就有了小绿锁。

暂无评论

发表评论