本地https服务搭建指南

64,778 阅读3分钟

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

签发本地证书