本地https服務搭建指南

skinner發表於2020-04-06
HTTP

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

本地https服務搭建指南

如果您的本地服務是通過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')
    }
}
複製程式碼

重啟專案，開啟開發地址，結果如下：

本地https服務搭建指南

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

簽發本地證書

相關文章