Https在各种Web服务器下配置

jiezi

5 年前

前端很多情况需要用启动 web 服务器，而为了保证数据的安全性，都需要用 Https 对传输的数据进行加密传输，而且有些 web-view 只允许 https 通过访问，所以学习怎么配置 https 也成为大前端不可以少的功课之一。下面本妹子将先简单介绍下 Https, 再依次介绍怎么在 Node、webpack-dev-server 和nginx这三个最常见的前端 web 服务器下配置Https，以及关于证书的扩展干货。

Https协议的主要作用可以分为两点：
1. 建立一个信息安全通道，来保证数据传输的安全；
2. 确认网站的真实性；
而 https 的加密方式主要是非对称加密，所以会有一对密钥，分别是一个公钥 (证书) 和私钥。

浏览器 allen 访问的时候，客户端会接受这个证书，并利用这个证书里的公钥对数据加密，加密后，服务端 tony 用自己的私钥解密就行了。

Web 服务一般使用 OpenSSL 工具提供的密码库，生成 PEM、KEY、CRT 等格式的证书文件。
其中 .crt 后缀一般存放证书，.key后缀一般存放私钥，.pem后缀的可以同时存放把 CA 证书和密钥。

可以直接用命令生成

# 使用以下命令生成一个证书密钥对 key.pem 和 cert.pem，它将有效期约 10 年（准确地说是 3650 天）openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.key -out cert.crt
#或者直接生成到一个 pem 文件中
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout all.pem -out all.pem

可以用 selfsigned 插件生成

const selfsigned = require('selfsigned');
var selfsigned = require('selfsigned');
var attrs = [{name: 'commonName', value: 'contoso.com'}];
// 有效期约 10 年
var pems = selfsigned.generate(attrs, { days: 3650});
fs.writeFileSync('all.pem', pems.private + pems.cert, { encoding: 'utf-8'});

用 openssl 生成 all.pem

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout all.pem -out all.pem

在同目录编写 app.js, 并运行node app.js, 启动node 服务监听 88 端口

var https = require('https');
const fs = require('fs');
const path = require('path');

const options = {key: fs.readFileSync(path.resolve(__dirname, './all.pem')),// 密钥
  cert: fs.readFileSync(path.resolve(__dirname, './all.pem'))// 证书
};
https.createServer(options, (request, response)=> {
    // 发送 HTTP 头部 
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 发送响应数据 "Hello World"
    response.end('Hello World\n');
}).listen(88);

// 终端打印如下信息
console.log('Server running at https://127.0.0.1:88/');

具体代码可查看 https://github.com/raoenhui/node-https.git

web-dev-server 配置很简单，只要将 https 选项设成 true 即可。

module.exports = {
  devServer: {https: true}
};

web-dev-server 原理
server.js 里面判断如果没有证书和密钥，则用selfsigned 生成，并放在 ssl 目录中的 server.pem 文件下, 默认生成有效期为 30 天。

     const certPath = path.join(__dirname, '../ssl/server.pem');
      let certExists = fs.existsSync(certPath);
      ...
      if (!certExists) {log('Generating SSL Certificate');
        const attrs = [{name: 'commonName', value: 'localhost'}];
        const pems = selfsigned.generate(attrs, {
          algorithm: 'sha256',
          days: 30,
          keySize: 2048,
          extensions: [...]
        });

        fs.writeFileSync(certPath, pems.private + pems.cert, { encoding: 'utf-8'});
      }
      fakeCert = fs.readFileSync(certPath);

启动服务的时候引用证书和密钥

    options.https.key = options.https.key || fakeCert;
    options.https.cert = options.https.cert || fakeCert;
    ...
    this.listeningApp = spdy.createServer(options.https, app);

# 进入 nginx 目录
cd nginx
# 在 key 文件夹中用 openssl 生成
mkdir key && cd key && openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout all.pem -out all.pem

# HTTPS server
    #
    server {
        listen       443 ssl;
        server_name  localhost;
        #证书路径
        ssl_certificate      key/all.pem;
        ssl_certificate_key  key/all.pem;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        location / {
            root   /HD/mycode/test;
            index  index.html index.htm;
        }
    }

上面本妹子所讲的是对于前端比较常见的 web 服务器，而其实还有很多种服务器它们的证书格式是不一样的，而且可以互相转换，具体如下图所示

CA 全称为 Certificate Authority 证书授权中心。上面本妹子是自己生成证书，这个证书在互联网上是认为不安全的。只有通过 CA 机构下发的证书，浏览器和电脑才会认为是可靠安全的。
其中证书也有很多分类，可以向 CA 申请不同类型的证书。下面举例几种常见证书类型的区别

还可以用 SSL 证书在线检测工具，检测网站证书详细信息。
https://www.chinassl.net/ssltools/ssl-checker.html

如 www.jd.com

原文地址:https://raoenhui.github.io/nodejs/2019/06/04/https/

Https 网络安全架构设计与实践视频教程

selfsigned 说明文档

数字证书

Happy coding .. :)

Https在各种Web服务器下配置

前言

Https 简介

生成证书和密钥

node 配置 https

web-dev-server 配置 https

Nginx 配置 https

知识扩展

其他证书格式

CA

相关链接