运行在 HTTPS/Web 套接字上的 Webpack 开发服务器安全答案

【问题标题】：Webpack Dev Server running on HTTPS/Web Sockets Secure运行在 HTTPS/Web 套接字上的 Webpack 开发服务器安全
【发布时间】：2014-12-27 02:36:08
【问题描述】：

通常在开发者模式下，Webpack 使用 HTTP 运行。通常有一个 Web 服务器通过 HTTP 和 webpack 在单独的端口上使用 http/websockets 提供内容。

是否可以在 https 上运行 web 服务器，在 https/websocket 上运行 webpack 安全？

【问题讨论】：

在重读了几次之后，这可能是我的问题的重复？ stackoverflow.com/questions/31973085/…

标签： ssl https webpack devserver

【解决方案1】：

见webpack docs

你可以在 webpack-dev-server 命令中添加一个标志

webpack-dev-server --https

【讨论】：

webserver 在 https 中，但是 webpack-dev-server 没有创建到 socket.io 的 https 连接——对吗？
我试过了，现在 http 不再工作了。有没有办法同时使用 https 和 http？
@Eschon 你有没有找到同时使用 http 和 https 的解决方案？
@MuhammadAteeqAzam 不，但我真的不需要它。只是花了一些时间来习惯总是用 https 打开我的本地版本。
我在这里做了一个教程binarycarpenter.com/…。实际上，您需要生成 SSL 证书并信任它。这是一次设置，您可以重复使用 10 年甚至更长时间

【解决方案2】：

虽然上述答案对于 cli 是正确的，但如果您不在 CLI 中，您可以执行以下操作（在 gulp 任务中）：

var WebpackDevServer = require('webpack-dev-server');

new WebpackDevServer(webpack(WebpackDevConfig), {
    https: true,
    hot: true,
    watch: true,
    contentBase: path.join(__dirname, 'src'),
    historyApiFallback: true
}).listen(1337, 'localhost', function(err, result) {
    if (err) {
        console.log(err);
    }
    console.log('Dev server running at https://localhost:1337');
});

【讨论】：

执行此操作时，我收到 502 Bad Gateway 错误。我可能配置了一些特殊的东西会导致这个或我需要的其他东西吗？例如，这是否适用于 Windows？
也许您需要将端口从 1337 更改为 443？或者您可能需要在对服务器的请求中包含端口，例如 https://localhost:1337？让我们详细了解您的服务器设置以及您正在加载的 URL，也许我们可以提供更多帮助:)
我首先在浏览器中遇到“net::ERR_INSECURE_RESPONSE”错误，因为 webpack-dev-server 使用自签名证书。通过访问被阻止的“https://.... .js”-url 并告诉浏览器我确定我要继续，可以解决此问题。

【解决方案3】：

这仅用于测试环境：

你需要如下配置你的 webpack-dev-server：

webpack-dev-server --https --cert ./cert.pem --key ./key.pem

最简单的解决方法是生成没有密码的密钥（我不知道这样做的安全后果！但这仅用于测试）。

要从您的密钥中取出密码，请使用以下命令：

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

并在预览配置行中使用新密钥

【讨论】：

你发的这个链接，应该不是你想要的吧？
只需添加 --https ，不需要 --cert ./cert.pem --key ./key.pem ，webpack会自己生成cer。
没有为我生成有效的证书。 Chrome 抱怨连接问题。我必须设置证书和密钥来修复它。我选择在开发配置文件中设置。

【解决方案4】：

使用webpack-dev-server --https，您可以创建自签名证书。但它并不适用于所有用例。

浏览器会要求您提供安全例外，并在 url 栏中显示连接不安全。

因此建议使用mkcert为localhost创建一个本地信任的开发证书

然后通过 CLI 使用它：

webpack-dev-server --https --key C:/Users/User/localhost-key.pem --cert C:/Users/User/localhost.pem --cacert C:/Users/User/AppData/Local/mkcert/rootCA.pem

或者在 webpack.config.js 中配置 devServer.https 选项：

devServer: {
    https: {
        key: fs.readFileSync('C:/Users/User/localhost-key.pem'),
        cert: fs.readFileSync('C:/Users/User/localhost.pem'),
        ca: fs.readFileSync('C:/Users/User/AppData/Local/mkcert/rootCA.pem')
    }
}

mkcert 默认以 Unix 格式创建 .pem 文件。因此，如果您使用的是 Windows，您可能需要使用例如将它们转换为 Windows 格式。记事本++

【讨论】：

mkcert --CAROOT 检查 ca 路径，即 /Users/xxx/Library/Application Support/mkcert
chrome 中有红色的“不安全”吗？有没有办法让它变成绿色？

【解决方案5】：

就我而言，我必须运行所有这些命令才能获得证书：

openssl genrsa -out private.key 4096
openssl req -new -sha256 -out private.csr -key private.key
openssl x509 -req -days 3650 -in private.csr -signkey private.key -out private.crt -extensions req_ext
openssl x509 -in private.crt -out private.pem -outform PEM

最后：

npm run dev -- --open --https --cert private.pem --key private.key

【讨论】：

【解决方案6】：

在 Windows 上测试（2021 年 4 月 22 日）。简单（无需安装）。

1.项目配置

在您的项目根目录中运行 Powershell（或 CMD）：

npx mkcert create-cert
npx mkcert create-ca

你的webpack.config.js：

devServer: {
    // ...
    https: {
        key: fs.readFileSync("cert.key"),
        cert: fs.readFileSync("cert.crt"),
        ca: fs.readFileSync("ca.crt"),
    },
    // ....
},

2。安装证书

双击ca.crt > 安装证书 > ...

... > 当前用户 > 将所有证书放在以下存储区 > 受信任的根证书颁发机构 > ...

... > 完成 > 是

3.检查正确安装

开始 > 输入：“cert” > 管理用户证书 > ...

... > 受信任的根证书颁发机构 > 证书 > 测试 CA

4.重新加载和测试

重新加载浏览器，启动 webpack 开发服务器并检查 SSL 证书的有效性：

其他步骤

如果您收到此错误：

您可以将此配置添加到您的webpack.config.js:

devServer: {
    // ...
    // https: { ... }
    disableHostCheck: true,
    // ....
},

https://www.npmjs.com/package/mkcert

【讨论】：

【解决方案7】：

我正在做 react 项目，现在想在这个项目上添加 SSL 证书并使用 https 运行我的网站，所以按照以下步骤操作：

在 webpack.config.js 中添加 https

 devServer:{

          https: true,
          host: '0.0.0.0', // you can change this ip with your ip
          port: 443,       // ssl defult port number
          inline: true,

          historyApiFallback: true,
          publicPath: '/',
          contentBase: './dist',
          disableHostCheck: true
   }

在 package.json 文件中添加 SSL 公共证书如果您不想在 package.json 文件中添加证书，则必须将其添加到 webpack.config.js 中，必须添加您的项目中的证书，您可以在 package.json 文件或 webpack.config.js 上使用它

对于 Package.json

scripts: {
                    "test": "echo \"Error: no test specified\" && exit 1",
                    "build": "webpack --mode production",
                    "start": "webpack-dev-server  --open --https --cert /path/to/private.crt --key /path/to/private.key"

            }

或 webpack.config.js

 devServer:{

              https: true,
              host: '0.0.0.0', // you can change this ip with your ip
              port: 443,       // ssl defult port number
              inline: true,
              https: {
                    key: fs.readFileSync('/path/to/private.pem'),
                    cert: fs.readFileSync('/path/to/private.pem'),
                    ca: fs.readFileSync('/path/to/private.pem')
                    }
              historyApiFallback: true,
              publicPath: '/',
              contentBase: './dist',
              disableHostCheck: true
       }

在终端上运行npm start 命令或者你也可以使用pm2 start npm -- start

【讨论】：

第二个代码示例中有两个https 属性。这是正确的吗？
我想他的意思可能是第一个https: true 是http2: true webpack documentation

【解决方案8】：

当 webapp 从内部使用 http 的 docker 容器提供服务时也有类似的情况，但 traefik 通过 https（多个端口：4000、3000）为应用程序提供服务，因此套接字客户端试图连接到 http://my.app.url:3000。

花了几个小时想出一个解决方案后，在 webpack 5 中提出了这个：

devServer: {
    client: {
        port: ' ', <--must be empty to eliminate the 3000 port for connecting to socket client
    },
    devMiddleware: {
        writeToDisk: true,
    },
    transportMode: 'sockjs',
    port: 3000, // port which is dev server opening for the sockets
    ...(process.env.DOCKER_DEV && {
        host: '0.0.0.0',
        firewall: false,
        public: 'https://my.app.url', <-- HTTPS here
    }),
},

【讨论】：