1. The background

When Chrome is upgraded to version 80 or later, the default value SameSite=None will be changed to SameSite=Lax (other browsers, such as Safari and Firefox, have similar plans). As a result, cross-site cookies cannot be transmitted, resulting in login failures. A common solution is to set cookies under all domain names involved in business development to “SameSite=None; Secure;” However, the precondition of this solution is that the access protocol must be HTTPS. However, most front-end local development is HTTP at present, so the request still cannot carry cookies. Therefore, the local HTTP service needs to be upgraded to HTTPS.

More information about Samesite can be found in Ruan’s article

2. Overall plan

2.1 webpack – dev – based server

If your local service is started with webpack-dev-server, webpack-dev-server supports HTTPS service enabling, which provides two configurations:

Methods a

devServer: {
    https: true
}
Copy the code

The set with self-signed certificates, so through Interview with http://h5.dev.weidian.com:9003/pages/index.html development address, for example, the browser will have security risk warning, need to take the initiative to trust the rear accessibility (ignore the risk actively, although can turn on HTTPS service, Exceptions may occur in individual scenarios.

Way 2

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

This setting requires a certificate provided by the developer. If the developer provides a certificate for the domain name, the browser does not display a security warning when you access the domain name through HTTPS.

2.2 Generating a Certificate and Key

If mode 2 is adopted, certificates and secret keys must be provided. Traditional certificate generation schemes (such as OpenSSL) require various commands to configure and are cumbersome. Therefore, a relatively simple and convenient certificate generation scheme is provided as follows:

Creating a certificate is based on the mkcert tool. See the official tutorial for more information

Step 1: Installmkcert

brew install mkcert // On macOS, use Homebrew
Copy the code

Step 2: Generate a root certificate

mkcert -install
Copy the code

Step 3: Create a local folder and go to that directory (for storing certificates)

mkdir ca
cd ca
Copy the code

The common solution is to put it on disk, such as the User directory (/User).

Step 4: Generate a local certificate for the required domain name, for examplehttp://h5.dev.weidian.com

mkcert h5.dev.weidian.com
Copy the code

After the command is executed, h5.dev.weidian.com-key.pem (private key) and h5.dev.weidian.com.pem (certificate) files are generated in this file, which are required for webpack-dev-server configuration.

Step 5: Open your own project, copy the files generated in Step 4 into the project, and modify the WebPack configuration

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

Restart the project, open the development address, the result is as follows:

2.3 A library that automatically generates certificates and keys

In addition to manually generating certificates and keys, you can use the devcert library to write a small amount of code to generate certificates and keys as follows:

<! --webpack.config.js-->async webpackConfig(){
    let ssl = await devcert.certificateFor("h5.dev.weidian.com", { getCaPath: true });

    <! --key and cert are the certificates and secret keys used to enable Https services.
    const { key, cert } = ssl;
    
    return {
        "dev-server":{
            https: {
                key, cert;
            }
        }
    }
}

module.exports = webpackConfig()
Copy the code

3. Summary

In the future, as Chrome upgrades, samesite’s default Settings will have a significant impact on local development. It is necessary to reserve technology in advance, and individuals can use it according to their company’s development situation.

A link to the

webpack https

Issue of Local Certificates