How to enable HTTPS for local development in macOS by using Chrome All In One

How to enable HTTPS for local development in macOS by using Chrome All In One

HTTPS, macOS, Chrome

2023.09.18 update

Certificates for localhost - Let's Encrypt 🚀

https://letsencrypt.org/zh-cn/docs/certificates-for-localhost/
https://letsencrypt.org/docs/certificates-for-localhost/

# 一键生成
$ openssl req -x509 -out localhost.crt -keyout localhost.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=localhost' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

demo test ✅

import https from 'node:https';
import fs from 'node:fs';
import express from 'express';
import chalk from 'chalk';

const app = express();
const port = 443;
const options = {
  key: fs.readFileSync('./localhost.key'),
  cert: fs.readFileSync('./localhost.crt'),
};

// const options = {
//   // ❌ Error: error:1C800064:Provider routines::bad decrypt
//   // key: fs.readFileSync('./key.pem'),
//   key: fs.readFileSync('./decrypt_key.pem'),
//   cert: fs.readFileSync('./cert.pem'),
//   // key: fs.readFileSync('./key.pem', 'utf8'),
//   // cert: fs.readFileSync('./cert.pem', 'utf8'),
// };

app.get(`/api`, (req, res) => {
  console.log(`req`, req.query);
  res.json({
    https: true,
    port,
  })
});

// https://localhost:443/api?id=1 => https://localhost/api?id=1
// HTTPS 默认的端口 443 ✅
// https://localhost:3000/api?id=1

const server = https.createServer(options, app);
server.listen(port, () => {
  // const color = chalk.green('Hello world!');
  const color = chalk.green.bgGreen('Hello world!');
  console.log(`color log`, color);
  console.log(`https server is running on: https://localhost:${port}/`);
  console.log(chalk.magenta(`[API]: `) + chalk.green('PORT : [ 443 ]'));
});

server.on("clientError", (error, socket) => {
  console.log(`❌ clientError =\n`, error);
});

https://x.com/xgqfrms/status/1703574062742810953?s=20

https://www.cnblogs.com/xgqfrms/p/13845919.html#5211802

.pem

What are PEM files?
Privacy Enhanced Mail (PEM) files are a type of Public Key Infrastructure (PKI) file used for keys and certificates. PEM, initially invented to make e-mail secure, is now an Internet security standard. HPE Service Manager uses OpenSSL libraries to encrypt and decrypt SOAP messages over HTTP and requires certificates and keys in PEM format. The typical PEM files are:

key.pem contains the private encryption key
cert.pem contains certificate information
Because it is a standard, any PKI implementation can use .pem files as a repository for keys or certificates. OpenSSL supports a variety of standard formats in addition to .pem, including Distinguished Encoding Rules (DER) and X.509. OpenSSL has several utility functions that can convert these formats.

https://docs.microfocus.com/SM/9.52/Hybrid/Content/security/concepts/what_are_pem_files.htm

local HTTPS

https://www.cnblogs.com/xgqfrms/p/13582130.html

localhost & HTTPS

1. 隐藏警告

2. 修改证书

拖拽 icon

localhost.cer

Quit keychains, 刷新 Chrome

生成证书

key ， cert 有效期

keytmp.pem
cert.pem
key.pem

$ openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365
# 123456

$ openssl rsa -in keytmp.pem -out key.pem

React 17 & SSR

{
  "start": "HTTPS=true react-scripts start"
}

{
  "start": "export HTTPS=true && SSL_CRT_FILE=cert.pem && SSL_KEY_FILE=key.pem react-scripts start",
}

demo

https://github.com/xgqfrms/react-in-depth/tree/master/https-app

key & cert

https://github.com/xgqfrms/react-in-depth/blob/master/https-app/cert.pem

https://github.com/xgqfrms/react-in-depth/blob/master/https-app/key.pem

https://github.com/xgqfrms/react-in-depth/blob/master/https-app/package.json

{
  "name": "https-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "dev": "react-scripts start",
    "start": "export HTTPS=true && SSL_CRT_FILE=cert.pem && SSL_KEY_FILE=key.pem react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

demos

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

https://flaviocopes.com/react-how-to-configure-https-localhost/

https://flaviocopes.com/macos-install-ssl-local/

https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/

https://medium.com/@jonsamp/how-to-set-up-https-on-localhost-for-macos-b597bcf935ee

https://dev.to/tability/local-development-with-https-on-osx-1jpb

https://stackoverflow.com/questions/59080466/how-do-i-fix-my-ssl-configuration-for-local-development-with-apache

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---