## 背景

Webの機能には、httpsでアクセスしているときにしか利用できないものがあります。
例えば、[navigator.clipboardを用いてクリップボードへ書き込む機能はhttpsでアクセスしているときにのみ利用可能](https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard#clipboard_api_%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B)です。
ローカル環境においてhttpで走っている開発中のアプリに対して、こういった機能をテストするために、httpsでアクセスしたい場合があります。

## ローカルでhttpsアクセスをhttpアクセスへ振り向ける方法

以下のコマンドを実行すれば、httpで走っている（ http://localhost:3000/ ）アプリに、ブラウザからhttps（ https://localhost:3001/ ）からアクセスできるようになります。

```
npx local-ssl-proxy --source 3001 --target 3000
```

なお、アプリが走っているPCとは別のデバイスからアクセスする場合には、httpのポートのために行ったポートフォワーディングやファイアウォールの設定がhttpsのポートにも必要となります。   

- （設定方法の参考資料） [WSL2上にてrails serverで立ち上げたサーバに別デバイスからのアクセスを可能にする方法](https://www.techtips.page/ja/topics/128)

## 余談その1

[Copilot先生](https://www.techtips.page/ja/items/57)によれば、httpで走っているアプリにhttps相当でアクセスするための別の方法としては、以下のものがあるそうです。

- localtunnelなど、ローカルで走っているアプリをインターネットに公開するサービスを利用してしまう。
- Chrome DevToolsのリモートデバッグ機能を利用する。

なお、Copilot先生の回答全文は[こちら](https://copilot.microsoft.com/sl/gLQ140Z2eom)です。

## 余談その2

[`local-ssl-proxy`は、Copilot先生に教えてもらいました](https://copilot.microsoft.com/sl/gWbaxfxJ8Fw)。Google検索では`local-ssl-proxy`にはたどり着いていませんでした。