From 0299c0e6e70bca24da7a59eb5adbd4a2374a309c Mon Sep 17 00:00:00 2001 From: Alex Brazier Date: Fri, 31 Jan 2020 12:36:06 +0000 Subject: [PATCH] Add option to provide custom ssl certificates during development (#5845) * Add option to provide custom SSL certificates when using HTTPS * Update documentation with custom HTTPS certs * Improve certificate validation and move to its own file * Update https in development docs Co-Authored-By: Brody McKee * Add custom cert example to docs * Rename https file and update error message * Include original error message when custom ssl cert is invalid * Add chalk to react-scripts dependencies * Bump docs version to say that the new config will be available in 3.2.0 * Remove chalk dependency * Update custom ssl version to 3.4.0 in docs * Remove version from custom ssl certificate docs Co-authored-by: Brody McKee --- docusaurus/docs/using-https-in-development.md | 13 ++++ .../react-scripts/config/getHttpsConfig.js | 74 +++++++++++++++++++ .../config/webpackDevServer.config.js | 7 +- 3 files changed, 90 insertions(+), 4 deletions(-) create mode 100644 packages/react-scripts/config/getHttpsConfig.js diff --git a/docusaurus/docs/using-https-in-development.md b/docusaurus/docs/using-https-in-development.md index 3541e356..edd66883 100644 --- a/docusaurus/docs/using-https-in-development.md +++ b/docusaurus/docs/using-https-in-development.md @@ -32,6 +32,18 @@ HTTPS=true npm start Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page. + +## Custom SSL certificate + +To set a custom certificate, set the `SSL_CRT_FILE` and `SSL_KEY_FILE` environment variables to the path of the certificate and key files in the same way you do for `HTTPS` above. Note that you will also need to set `HTTPS=true`. + +### Linux, macOS (Bash) + +```bash +HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key npm start +``` + + To avoid having to set the environment variable each time, you can either include in the `npm start` script like so: ```json @@ -42,3 +54,4 @@ To avoid having to set the environment variable each time, you can either includ Or you can create a `.env` file with `HTTPS=true` set. [Learn more about environment variables in CRA](https://create-react-app.dev/docs/adding-custom-environment-variables). + diff --git a/packages/react-scripts/config/getHttpsConfig.js b/packages/react-scripts/config/getHttpsConfig.js new file mode 100644 index 00000000..4fec7936 --- /dev/null +++ b/packages/react-scripts/config/getHttpsConfig.js @@ -0,0 +1,74 @@ +// @remove-on-eject-begin +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +// @remove-on-eject-end +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const crypto = require('crypto'); +const chalk = require('react-dev-utils/chalk'); +const paths = require('./paths'); + +// Ensure the certificate and key provided are valid and if not +// throw an easy to debug error +function validateKeyAndCerts({ cert, key, keyFile, crtFile }) { + let encrypted; + try { + // publicEncrypt will throw an error with an invalid cert + encrypted = crypto.publicEncrypt(cert, Buffer.from('test')); + } catch (err) { + throw new Error( + `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}` + ); + } + + try { + // privateDecrypt will throw an error with an invalid key + crypto.privateDecrypt(key, encrypted); + } catch (err) { + throw new Error( + `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${ + err.message + }` + ); + } +} + +// Read file and throw an error if it doesn't exist +function readEnvFile(file, type) { + if (!fs.existsSync(file)) { + throw new Error( + `You specified ${chalk.cyan( + type + )} in your env, but the file "${chalk.yellow(file)}" can't be found.` + ); + } + return fs.readFileSync(file); +} + +// Get the https config +// Return cert files if provided in env, otherwise just true or false +function getHttpsConfig() { + const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env; + const isHttps = HTTPS === 'true'; + + if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) { + const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE); + const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE); + const config = { + cert: readEnvFile(crtFile, 'SSL_CRT_FILE'), + key: readEnvFile(keyFile, 'SSL_KEY_FILE'), + }; + + validateKeyAndCerts({ ...config, keyFile, crtFile }); + return config; + } + return isHttps; +} + +module.exports = getHttpsConfig; diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js index c8b0d8b1..baf6ade0 100644 --- a/packages/react-scripts/config/webpackDevServer.config.js +++ b/packages/react-scripts/config/webpackDevServer.config.js @@ -8,14 +8,14 @@ // @remove-on-eject-end 'use strict'; +const fs = require('fs'); const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware'); const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware'); const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware'); const ignoredFiles = require('react-dev-utils/ignoredFiles'); const paths = require('./paths'); -const fs = require('fs'); +const getHttpsConfig = require('./getHttpsConfig'); -const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; const host = process.env.HOST || '0.0.0.0'; const sockHost = process.env.WDS_SOCKET_HOST; const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node' @@ -94,8 +94,7 @@ module.exports = function(proxy, allowedHost) { watchOptions: { ignored: ignoredFiles(paths.appSrc), }, - // Enable HTTPS if the HTTPS environment variable is set to 'true' - https: protocol === 'https', + https: getHttpsConfig(), host, overlay: false, historyApiFallback: {