WordPress全站开启SSL,终于有了小绿锁!

2018年2月4日12:27:00来源:深冬博客 评论 597
摘要

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

WordPress全站开启SSL,终于有了小绿锁!

申请免费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样式缺失,如下图所示:

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

WordPress全站开启SSL,终于有了小绿锁!

换成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文件中就起到了强制跳转的功能。

代码一

  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]

代码二:网站换成自己的https主页

  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状态查询如下

WordPress全站开启SSL,终于有了小绿锁!

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

WordPress全站开启SSL,终于有了小绿锁!

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

问题所在:

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

WordPress全站开启SSL,终于有了小绿锁!

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

WordPress全站开启SSL,终于有了小绿锁!

 

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

WordPress全站开启SSL,终于有了小绿锁!

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

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

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

WordPress全站开启SSL,终于有了小绿锁!

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

WordPress全站开启SSL,终于有了小绿锁!

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

WordPress全站开启SSL,终于有了小绿锁!

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

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: