网站添加免费SSL证书——HTTPS协议

  在添加证书之前首先了解两个概念：​​SSL​​和​​HTTPS​​。

▶ ​​SSL​​(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security，TLS)是为网络通信提供安全及数据完整性的一种安全协议。​​TLS与SSL​​在传输层与应用层之间对网络连接进行加密。

▶ ​​HTTPS​​(全称：Hyper Text Transfer Protocol over SecureSocket Layer)，是以安全为目标的 ​​HTTP​​通道，在HTTP的基础上通过​​传输加密​​和​​身份认证​​保证了传输过程的安全性。​​HTTPS​​ 在​​HTTP​​的基础下加入​​SSL​​ 层，​​HTTPS​​的安全基础是 ​​SSL​​，因此加密的详细内容就需要 ​​SSL​​。

简单来说就是添加​​SSL​​可以​​增加网站安全性​​，使​​数据加密传输等级​​更高。一般的个人网站使用​​免费​​的​​SSL证书​​就可以。如果是企业建议使用收费的，本文以华为云为例。

  添加​​SSL​​证书的步骤：​​购买证书并安装证书​​→​​配置Nginx​​→​​修改网站链接并测试​​

一、购买免费的SSL证书

1、到华为云控制台，依次点击​​域名注册​​​、​​SSL证书管理​​​。点击​​购买证书​​。

###   2、默认是收费的，根据提示点击`云市场`。

###   3、我选择的是`亚洲诚信免费的SSL证书`。

###   4、点击立即购买。

###   5、购买完成后登陆`SSL证书管理系统`，没有账号的话注册一个。

###   6、可以看到刚刚购买的证书已经显示在这里了。根据提示`完成订单`，填写需要添加证书的域名。

###   7、这里需要进行`域名验证`。 复制`记录值`。

###   8、来到刚刚添加的域名的`解析界面`。添加一个记录值。类型选择`TXT`，粘贴刚刚的`记录值`。这里一般`10分钟`即可完成，完成会收到`邮箱提示`。

# 二、配置Nginx 1、订单完成后，点击`下载证书`。输入密码，选择`Nginx类型`的。

###   2、压缩包解压后会有`两个`文件。可以用xftp软件上传到云服务器。可以在`/etc/nginx/`路径下新建文件夹存放。

###   3、在`Nginx`的配置文件(`.conf`)里面进行配置`403(https协议端口)端口`。配置之前确保`安全组`已经`开通`了`403`端口。将以下代码加入配置文件即可。注意：`现在不要强制跳转，也就是网站既可以http访问，也可以https访问。`具体配置代码如下：

#网站SSL证书
server {
        listen       443 ssl;
        server_name  www.cztcms.cn;     #修改为您证书绑定的域名。
    root         /blog/wordpress;   #站点路径
        index index.php index.html;        #首页名称
        ssl_certificate      cztcms/server.crt; #替换成您的证书文件的路径和名称。
    #这样写的话绝对路径是：/etc/nginx/cztcms/server.crt
        ssl_certificate_key  cztcms/server.key; #替换成您的私钥文件的路径和名称。
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        ssl_ciphers  HIGH:!aNULL:!MD5; #加密套件。
        ssl_prefer_server_ciphers  on;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;

#解决图标不显示
location ~* \.(eot|otf|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}
#PHP端口，如果不是PHP站点不用写
location ~ \.php(.*)$ {
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_index  index.php;
        fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        fastcgi_param  PATH_INFO  $fastcgi_path_info;
        fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;
        include        fastcgi_params;
    }
}

4、现在就可以用​​https​​访问自己的网站了。不过​​WordPress​​的网站刚开始​​JS​​和​​CSS​​是用的​​http​​。所以可以看到现在网站的排版都是乱的，是因为没有JS和CSS的加载。这个需要​​修改JS和CSS的路径​​：

方法：在网站​​主题目录​​下​​functions.php​​文件最后加入以下代码，刷新网站可以看到样式又回来了。

add_filter('script_loader_src', 'agnostic_script_loader_src', 20,2);
function agnostic_script_loader_src($src, $handle) {
    return preg_replace('/^(http|https):/', '', $src);
}

add_filter('style_loader_src', 'agnostic_style_loader_src', 20,2);
function agnostic_style_loader_src($src, $handle) {
    return preg_replace('/^(http|https):/', '', $src);
}

三、修改网站链接

1、现在网站虽然可以用​​https​​​访问了，但是在浏览器最上方还是没有看到​​绿色的安全锁​​​，甚至可能会出现​​不安全​​​的提示。这个是因为你的网站还有很多链接是采用​​http访问​​​的。比如图片地址还是http开头。这个就需要将网站的所有​​http请求​​​改为​​https​​​。​​WordPress站点​​​可以用以下的​​SQL​​​语句来修改，远程登录连接​​MySQL​​，执行即可。不过这个不能修改文章里面的连接。其他还需手动修改。

UPDATE wp_posts SET post_content = replace(post_content, 'http://www.cztcms.cn/wp-content/uploads','https://www.cztcms.cn/wp-content/uploads');

2、如果不想自己手动修改。那可以使用插件。​​ssl-insecure-content-fixer​​​(SSL修复工具)。我的博客刚开始手动修改，不过后来还是没出现安全锁。我的也是用这个插件修复的。下载压缩包以后，到插件那里上传即可。设置一下就可以了。蓝奏云地址：▶ ssl-insecure-content-fixer.2.7.2.zip

3、最后用​​https​​​访问可以出现​​小绿锁​​​以后，在​​Nginx​​​的配置文件里面加入​​强制跳转​​​，也就是在地址栏输入​​http​​​会自动跳到​​https​​​。配置文件加入以下代码即可，​​域名​​改为自己的。

server {
listen 80;
server_name www.cztcms.cn;
rewrite ^(.*) https://$server_name$1 permanent;
}

360浏览器效果图

# Chrome浏览器效果图

# 火狐浏览器效果图