ローカルIIS Webサイトの自己署名証明書の作成方法

# 概要
ローカル環境でhttpsを使用したWeb APIを実装して、IIS上で動作検証を試みた。
[MicrosoftのDoc][5]を参考に、インターネットインフォメーションサービス (IIS) マネージャー上で自己署名証明書を作成した。
ブラウザでWeb APIのURLを入力すると、下記エラーが発生した。
(Google chrome/Microft Edge/Internet Explorerで同様のエラーが発生しため、ブラウザ依存性は無し)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/d996e6cc-c257-44dc-44ea-3c2e4df95a10.png)

原因を調査した結果、「IISマネージャーの自己署名証明書は不十分」ということがわかった。
前記の問題を回避する方法として、「PowerShellで自己署名証明書」を生成する方法がある。
この記事に、問題(ERR_CERT_COMMON_NAME_INVALID)が発生した設定手順、問題を回避する手順、参考にしたサイトを記載する。

# 動作環境
IIS version 10.0.19041.1100
Google Chrome 92.0.4515.107


# 問題(ERR_CERT_COMMON_NAME_INVALID)が発生した設定の手順

## 1. IIS上で自己署名証明書を作成する
(1)インターネット インフォメーション サービス (IIS) マネージャーを起動する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/4ec55181-bcf0-fa53-bb3b-81f0e5c5ea32.png)
(2)[サーバー証明書]を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/003088aa-3797-c544-cfcc-42f7567e3881.png)
(3)右の「操作」-「自己署名入り証明書の作成」を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/33a8e1ab-b311-671f-8fda-0a92bbc3f358.png)
(4)フレンドリ名を指定して、「OK」を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/5386b992-572f-caac-b4c1-06808fa8a73f.png)
(5)自己署名入り証明書が作成されていることを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/85424ff7-066a-54f1-d5e1-9eb329d8598b.png)

## 2. IISに評価用サイトを新規追加する
評価用サイトには、下記記事のWeb APIを使用する。
https://qiita.com/SY81517/items/cf4e3983f8e063bb0e28

(1)Visual StudioでWebアプリケーションのプロジェクトを選択する。「発行」を押下する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/4813b94c-56cd-0ae5-9780-5b5db1b55d73.png)
(2)IISに配置するASP.NET Webアプリケーションを発行する。
フォルダパスは任意。Visual Studioを管理者権限なしで起動して、管理者権限が必要なフォルダパスを指定すると、発行に失敗するので注意。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/ae009c8e-ce36-e344-11dc-f8d014ddde64.png)
(3)IISマネジャーで「サイトの追加」を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/a9d1064c-188c-d12a-3362-1b63522b4e59.png)
(4)Webサイトの設定を行う。
サイト名：任意
コンテンツディレクトリ
・ 物理パス:[発行]で指定したフォルダパス
バインド
・種類は[https]/ポート番号は任意。
・SSL証明書は［自己署名証明書］を使用する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/6f9001ea-5dd3-84e1-1cc1-c93d269b86c4.png)

## 3. 動作確認(ブラウザでWeb APIのURLを指定)
下記URLを指定したときに、「ERR_CERT_COMMON_NAME_INVALID」が発生する。
https://localhost:59320/api/products
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/d996e6cc-c257-44dc-44ea-3c2e4df95a10.png)

# 問題を回避する手順
## 1. PowerShellを用いて、自己署名証明書を作成する
(1)PowerShellを管理者権限で実行する。
(2)下記コマンドを実行する。

~~~Bash:実行コマンド
> New-SelfSignedCertificate -DnsName "localhost" -CertStoreLocation "cert:\LocalMachine\My"
~~~

~~~Bash:実行結果
PSParentPath: Microsoft.PowerShell.Security\Certificate::LocalMachine\My

Thumbprint                                Subject
----------                                -------
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  CN=localhost
~~~

コマンドの詳細は[New-SelfSignedCertificate][4] を参照のこと。

## 2. 自己署名証明書の使用を許可する
(1)Windowsボタンを押して「cert」と入力する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/21a89976-7c7c-8493-d031-af1acefbf522.png)
(2)「コンピュータ証明書の管理」をクリックする。[ファイル名を指定して実行]で[certlm.msc]でも可。
(3)「個人」→「証明書」フォルダをクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/8ffd1222-3695-ff4c-43cd-15755831563d.png)
(4)作成した証明書を選択して、右クリックで「コピー」を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/df5b465c-aca8-246f-7e11-0fbb0a63ca64.png)
(5)[信頼されたルート証明機関]で［証明書］フォルダを右クリックで「貼り付け」を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/5d7bcc51-4647-d347-5521-4bcf5c6f9437.png)
(6)貼り付けた証明書が追加されたことを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/02a25024-f2ef-5f5b-5089-1757d5c1543e.png)

## 3. PowerShellで作成した自己署名証明書をIISで使用する
(1)インターネット インフォメーション サービス (IIS) マネージャー を起動する。
(2)新規追加した評価用サイトを選択する。
(3)「サイト編集」の「バインド」を押下する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/7d508d45-5614-7a84-5ec7-7df89665772f.png)
(4)下記のように「サイト バインド」を編集する。
ホスト名:localhost
SSL証明書：Powershellで作成したものを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/a10796d5-8136-cb38-caa5-eb80625dc4ad.png)

## 4.動作確認(ブラウザでWeb APIのURLを指定)
実行結果は下記の通り。エラーが発生せず、HttpsのGETメソッドが実行された。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156594/eacad58b-ea0d-61ec-0239-022cbf8f6162.png)


# 参考サイト

| No | リンク | 概要 |
|:-|:-|:-|
|1   |[Blog: How to Create a Self Signed Certificate For Your Local IIS Website][1]|ローカルサイトの自己署名証明書の作成する手順を記載したブログ(英語)   |
|2   |[IIS自己証明書の警告エラー無しで作成方法。localhostをSSL/TLSで接続][2]|IIS証明書の警告を出さずに作成する方法が記載されたブログ。|
|3   |[How can I create a self-signed cert for localhost?][3]|stackoverflowの質問「ローカルホストの自己署名証明書を作るにはどうすればよいか？」|
|4   |[New-SelfSignedCertificate][4] |Microsoft社PowerShellのNew-SelfSignedCertificateコマンドの記事|
|5   |[How to Set Up SSL on IIS 7][5] |Microsoft社のIISのセットアップ手順のページ   |

[1]:https://moriyama.co.uk/about-us/news/blog-how-to-create-a-self-signed-certificate-for-your-local-iis-website/
[2]:http://korekurai.com/itrelated/iis-localhost-create-self-signed-certificate.html
[3]:https://stackoverflow.com/questions/8169999/how-can-i-create-a-self-signed-cert-for-localhost
[4]:https://docs.microsoft.com/ja-jp/powershell/module/pki/new-selfsignedcertificate?view=windowsserver2019-ps
[5]:https://docs.microsoft.com/en-us/iis/manage/configuring-security/how-to-set-up-ssl-on-iis