对于使用NX的带有Angular Micro前端的mac

步骤1：创建自签名根证书

openssl req -x509 -nodes -new -sha256 -days 390 -newkey rsa:2048 -keyout "RootCA.key" -out "RootCA.pem" -subj "/C=de/CN=localhost.local"
openssl x509 -outform pem -in "RootCA.pem" -out "RootCA.crt"

步骤2：定义应包含在证书中的域和子域

为此，只需创建一个名为vhosts_domains.ext的文本文件并插入以下内容：

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
DNS.2 = *.mixable.blog.local
DNS.3 = mixable.blog.local

此示例包括域mixeble.blog.local的本地开发环境的子域以及所有子域，如www.mixable.blog.loal或apps.mixeble.blog.local。

步骤3：创建证书

openssl req -new -nodes -newkey rsa:2048 -keyout localhost.key -out localhost.csr -subj "/C=de/ST=State/L=City/O=Organization/CN=localhost.local"
openssl x509 -req -sha256 -days 1024 -in localhost.csr -CA RootCA.pem -CAkey RootCA.key -CAcreateserial -extfile vhosts_domains.ext -out localhost.crt

步骤4：使证书可用于Angular应用程序

nx serve host --open --devRemotes=<app names> --ssl --ssl-key <folder_location>/localhost.key --ssl-cert <folder_location>/localhost.crt

步骤5：将证书从导入添加到macOS密钥链

在chrome上，如果您仍然获得无效证书，则下载证书并添加到密钥链，并使所有证书都可信。

截至2020年3月，在使用Chrome81的MacOSCatalina上，一旦您使用openssl创建了一个有效的证书，上述情况就会发生变化。

首先，我使用Safari浏览了我的网站，并单击了警告页面底部的链接，该链接允许我无论如何访问该网站。这将证书添加到我的Mac Keychain（即Keychain.app）。Safari将允许我查看该页面。Chrome显示证书是可信的，但不允许我查看该页面。我继续收到CERTIFICATE_INVALID错误。

在Keychain中，选择左下角窗格中的“所有项目”。然后搜索本地主机DNS名称（即myhost.example.com）。

双击证书。它将打开证书的编辑对话框。

将“使用此证书时”更改为“始终信任”

这完全违反直觉，因为SSL已经设置为Always Trust，可能是Safari在添加证书时设置的。Chrome只有在我将其全局更改为“始终信任”后才开始工作。当我把它换回来时，它停止了工作。

在Mac上，您可以通过执行以下操作创建一个在系统级别完全受Chrome和Safari信任的证书：

# create a root authority cert
./create_root_cert_and_key.sh

# create a wildcard cert for mysite.com
./create_certificate_for_domain.sh mysite.com

# or create a cert for www.mysite.com, no wildcards
./create_certificate_for_domain.sh www.mysite.com www.mysite.com

上面使用了以下脚本和支持文件v3.ext，以避免主题替代名称丢失错误

如果您想使用自己的根权限创建一个完全受信任的新的自签名证书，可以使用这些脚本。

创建root_cert_and_key.sh

#!/usr/bin/env bash
openssl genrsa -out rootCA.key 2048
openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

为域.sh创建证书

#!/usr/bin/env bash

if [ -z "$1" ]
then
  echo "Please supply a subdomain to create a certificate for";
  echo "e.g. www.mysite.com"
  exit;
fi

if [ ! -f rootCA.pem ]; then
  echo 'Please run "create_root_cert_and_key.sh" first, and try again!'
  exit;
fi
if [ ! -f v3.ext ]; then
  echo 'Please download the "v3.ext" file and try again!'
  exit;
fi

# Create a new private key if one doesnt exist, or use the xeisting one if it does
if [ -f device.key ]; then
  KEY_OPT="-key"
else
  KEY_OPT="-keyout"
fi

DOMAIN=$1
COMMON_NAME=${2:-*.$1}
SUBJECT="/C=CA/ST=None/L=NB/O=None/CN=$COMMON_NAME"
NUM_OF_DAYS=825
openssl req -new -newkey rsa:2048 -sha256 -nodes $KEY_OPT device.key -subj "$SUBJECT" -out device.csr
cat v3.ext | sed s/%%DOMAIN%%/"$COMMON_NAME"/g > /tmp/__v3.ext
openssl x509 -req -in device.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out device.crt -days $NUM_OF_DAYS -sha256 -extfile /tmp/__v3.ext 

# move output files to final filenames
mv device.csr "$DOMAIN.csr"
cp device.crt "$DOMAIN.crt"

# remove temp file
rm -f device.crt;

echo 
echo "###########################################################################"
echo Done! 
echo "###########################################################################"
echo "To use these files on your server, simply copy both $DOMAIN.csr and"
echo "device.key to your webserver, and use like so (if Apache, for example)"
echo 
echo "    SSLCertificateFile    /path_to_your_files/$DOMAIN.crt"
echo "    SSLCertificateKeyFile /path_to_your_files/device.key"

v3.ext版本

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
    
[alt_names]
DNS.1 = %%DOMAIN%%

另一步-如何在Chrome/Safari中完全信任自签名证书

若要在Chrome和Safari中完全信任自签名证书，您需要将新的证书颁发机构导入Mac。要做到这一点，请遵循以下说明或mitmproxy网站上有关此一般流程的更详细说明：

您可以在命令行使用以下两种方法之一执行此操作，该命令将提示您输入密码：

$ sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain rootCA.pem

或使用Keychain Access应用程序：

打开钥匙链访问在“钥匙链”列表中选择“系统”在“类别”列表中选择“证书”选择“文件|导入项目…”浏览到上面创建的文件“rootCA.pem”，选择它，然后单击“打开”在“证书”列表中选择新导入的证书。单击“i”按钮，或右键单击证书，然后选择“获取信息”展开“信任”选项将“使用此证书时”更改为“始终信任”关闭对话框，系统将提示您输入密码。关闭并重新打开使用目标域的所有选项卡，它将被安全加载！

另外，如果您需要java客户端信任证书，可以通过将证书导入到java密钥库来实现。注意，如果证书已经存在，这将从密钥库中删除证书，因为它需要在情况发生变化时更新它。当然，它只对正在导入的证书执行此操作。

import_certs_in_current_folder_into_java_keystore.sh

KEYSTORE="$(/usr/libexec/java_home)/jre/lib/security/cacerts";

function running_as_root()
{
  if [ "$EUID" -ne 0 ]
    then echo "NO"
    exit
  fi

  echo "YES"
}

function import_certs_to_java_keystore
{
  for crt in *.crt; do 
    echo prepping $crt 
    keytool -delete -storepass changeit -alias alias__${crt} -keystore $KEYSTORE;
    keytool -import -file $crt -storepass changeit -noprompt --alias alias__${crt} -keystore $KEYSTORE
    echo 
  done
}

if [ "$(running_as_root)" == "YES" ]
then
  import_certs_to_java_keystore
else
  echo "This script needs to be run as root!"
fi

我继续使用bjnord建议的方法，即：Google Chrome、Mac OS X和自签名SSL证书

博客中显示的内容不起作用。

然而，该博客的一条评论是金色的：

sudo安全添加可信证书-d-r trustRoot-k/Library/Keychains/Systemkeychain site.crt

你需要关注博客中关于如何获取cert文件的内容，然后你可以使用上面的命令，应该很好。

更新11/2017：这个答案可能不适用于大多数较新版本的Chrome。更新02/2016:Mac用户的更好说明可以在这里找到。

在要添加的站点上，右键单击地址栏中的红色锁定图标：单击标记为“连接”的选项卡，然后单击“证书信息”单击“详细信息”选项卡，然后单击“复制到文件…”按钮。。。。这将打开证书导出向导，单击下一步进入导出文件格式屏幕。选择DER编码二进制X.509（.CER），单击“下一步”单击浏览。。。并将文件保存到计算机。给它起个描述性的名字。单击下一步，然后单击完成。打开Chrome设置，滚动到底部，然后单击显示高级设置。。。在HTTPS/SSL下，单击管理证书。。。单击受信任的根证书颁发机构选项卡，然后单击导入。。。按钮这将打开证书导入向导。单击“下一步”进入“要导入的文件”屏幕。单击浏览。。。并选择先前保存的证书文件，然后单击“下一步”。选择将所有证书放置在以下存储中。所选存储应为受信任的根证书颁发机构。如果不是，请单击浏览。。。然后选择它。单击“下一步”并完成单击安全警告上的“是”。重新启动Chrome。

更新日期：2020年4月23日

铬团队推荐

https://www.chromium.org/Home/chromium-security/deprecating-powerful-features-on-insecure-origins#TOC-测试强大功能

快速超级简单解决方案

有一个秘密的绕过短语，可以在错误页面中输入，让Chrome不顾安全错误继续运行：这是不安全的（在早期版本的Chrome中，键入baddidea，甚至更早版本的危险）。除非你完全明白为什么需要它，否则不要使用它！

资料来源：

https://chromium.googlesource.com/chromium/src/+/d8fc089b62cd4f8d907acff6fb3f5ff58f168697%5E%21/

（注意，window.atob（'dGhpc2lzdW5zYWZl'）解析为此isnsafe）

源的最新版本为@https://chromium.googlesource.com/chromium/src/+/refs/heads/master/components/security_interentials/corebrowser/resources/intertial_large.js和window.atob函数可以在js控制台中执行。

有关Chrome团队为何更改旁路短语（第一次）的背景信息：

https://bugs.chromium.org/p/chromium/issues/detail?id=581189

如果所有其他方法都失败（解决方案1）

对于快速一次性，如果“无论如何继续”选项不可用，或者旁路短语也不起作用，这个黑客很好：

通过启用此标志，允许来自本地主机的证书错误（注意，更改标志值后，Chrome需要重新启动）：chrome://flags/#allow-不安全的本地主机（并投票赞成答案https://stackoverflow.com/a/31900210/430128作者@Chris）如果要连接的站点是localhost，那么就完成了。否则，设置TCP隧道以在本地侦听端口8090，并连接到端口443上的broken-remote-site.com，确保已安装socat并在终端窗口中运行以下内容：socat tcp侦听：8090，reuseddr，fork tcp：断开远程站点.com:443去https://localhost:8090在浏览器中。

如果所有其他方法都失败（解决方案#2）

类似于“如果所有其他都失败（解决方案#1）”，这里我们使用ngok为本地服务配置代理。因为您可以通过TLS访问ngrok http隧道（在这种情况下，它由ngrok使用有效证书终止），也可以通过非TLS端点访问，所以浏览器不会抱怨证书无效。

下载并安装ngrok，然后通过ngrok.io公开它：

ngrok http https://localhost

ngok将启动并为您提供一个可以连接到的主机名，所有请求都将通过隧道传输回本地计算机。