本地https服务搭建指南

1.背景

Chrome升级到80版本以上会将原来默认值 SameSite=None 修改为SameSite=Lax（其它浏览器，例如safari，firefox等都有此类似计划），导致跨站cookie无法传递，从而导致类似登录失败等问题。通用的解决方案是将涉及业务开发的所有域名下的cookie设置成”SameSite=None;Secure;“，但该方案前提条件要求访问协议必须是https，然而目前前端本地开发大部分都是http，导致请求还是无法携带cookie，因而需要将本地http服务升级为https。

关于samesite的更多介绍可以查看阮老师的文章

2.整体方案

2.1 基于webpack-dev-server

如果您的本地服务是通过webpack-dev-server开启的，webpack-dev-server支持开启https服务，它提供了两种配置方式:

方式一

devServer: {
    https: true
}

此设置使用了自签名证书，故通过 例如http://h5.dev.weidian.com:9003/pages/index.html这样的开发地址访问时，浏览器会有安全风险提示，需主动信任后方可访问（主动忽略风险，虽然能开启https服务，但可能在个别场景下会有异常）。

方式二

devServer: {
    https: {
        key: fs.readFileSync('/path/to/server.key'),
        cert: fs.readFileSync('/path/to/server.crt'),
        ca: fs.readFileSync('/path/to/ca.pem'),
    }
}

此设置需要由开发者自行提供证书，如果开发者提供了对应域名的证书，通过https访问该域名时，浏览器就不会有安全风险提示。

2.2 生成证书和秘钥

假如采用方式二，就必须提供证书和秘钥，传统的证书生成方案（例如 OpenSSL）需要各种命令配置，比较繁琐，故这里提供了一种相对简单方便的证书生成方案，步骤如下：

创建证书基于mkcert这个工具，相关详细信息可查看官方教程

第一步：安装 mkcert

brew install mkcert // On macOS, use Homebrew

第二步：生成根证书

mkcert -install

第三步：本地新建一个文件夹，并进入到该目录（用于存储证书）

mkdir ca
cd ca

也可不用放在项目中，通用的解决方案是放在磁盘中，比如用户目录(/User)

第四步：生成所需域名对应的本地证书，比如http://h5.dev.weidian.com

mkcert h5.dev.weidian.com

命令执行完之后，在该文件下会生成 h5.dev.weidian.com-key.pem（私钥）和h5.dev.weidian.com.pem（证书）两个文件，也就是webpack-dev-server配置需要的文件。

第五步：打开自己的项目，将步骤4生成的文件拷贝到项目中，然后修改webpack配置

devServer: {
    https: {
        key: fs.readFileSync('./cat/h5.dev.weidian.com-key.pem'),
        cert: fs.readFileSync('./cat/h5.dev.weidian.com.pem')
    }
}

重启项目，打开开发地址，结果如下：

2.3 一个自动生成证书和秘钥的库

除了手动生成证书和秘钥，还可以通过devcert这个库编写少量代码来生成证书和秘钥，方式如下：

<!--webpack.config.js-->

async webpackConfig(){
    let ssl = await devcert.certificateFor("h5.dev.weidian.com", { getCaPath: true });

    <!--key和cert分别就是开启Https服务的证书和秘钥-->
    const { key, cert } = ssl;
    
    return {
        "dev-server":{
            https: {
                key, cert;
            }
        }
    }
}

module.exports = webpackConfig()

3.总结

未来随着chrome升级，samesite的的默认设置必然会对本地开发产生重大影响，提前进行技术储备是必然的，个人可以结合公司开发情况酌情使用。

相关链接

webpack https

签发本地证书