今回は XAMPP の入っているPCでそのオレオレSSL証明書が既にあったので、それを流用します。

証明書を server.crt、秘密鍵を server.key という名前でコピーして、 create-react-app プロジェクト配下に設置します(今回は ssl/ ディレクトリを切りました)。

次に、 .env に次の3行を足して再度 npm start します。

HTTPS=true SSL_CRT_FILE=./ssl/server.crt SSL_KEY_FILE=./ssl/server.key

これで https://localhost:3000/ でアプリにアクセスでき、無事 Clipboard API も動かすことができました。

create-react-app(react-scripts) の X high severity vulnerabilities の警告について

2022-07-12T23:57:06+09:00

経緯

create-react-app(react-scripts) で作ったアプリに対して、パッケージ追加等をすると次のような脆弱性の警告が表示されます。

up to date, audited 1485 packages in 5s

197 packages are looking for funding
run npm fund for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

脆弱性がある、と言われるとさすがに放置はできないのでどうにかできないものかと調べました。

対応

結論から言うと、今回のケースでは無視して良い、とのことでした。

create-react-appでは脆弱性の警告が出るが無視して良い

理由としては

警告の発出元である npm audit 自体の警告が不正確
今回のケース(create-react-app(react-scripts))では依存パッケージはビルドツールとして用いられており、殆どの場合は成果物に含まれるわけではない (と思われる)
ビルドツールとして脆弱性があればアップデートがあるはず

といったところのようです。

言われて見れば確かに、というところですね。

それでも気になる場合は

dependencies にある react-scripts を devDependencies に移動させる
- npm audit --production を使用する
パッケージインストール時は npm install --no-audit で audit を使用しないように指定する

とすることで警告を表示させなくすることができるとのこと。

「create-react-app」の記事 - Crieit

React (create-react-app) で Clipboard API にアクセスするために localhost:3000 をhttpsにする

経緯

対処

参考

Clipboard API

Uncaught TypeError: Cannot read property ‘writeText’ of undefined

https化

create-react-app(react-scripts) の X high severity vulnerabilities の警告について

経緯

対応

参考