Closed16

storybookをinstallした際のvulnerabiltiesの解消log

Kyosuke KuboKyosuke Kubo

問題

storybookを導入する際に、npx sb initでプロジェクトをセットアップしようとするがpackageをインストールし終わった段階で26 vulnerabilities (8 moderate, 16 high, 2 critical)出てしまう。

Kyosuke KuboKyosuke Kubo

storybookたち

"@storybook/addon-docs": "^6.2.2",
"@storybook/addon-essentials": "^6.1.21",
"@storybook/react": "^6.1.21",
Kyosuke KuboKyosuke Kubo

推測込みだが、reactとstorybookの相性?(バージョン)が良くなさそう
https://github.com/storybookjs/storybook/issues/14065

Kyosuke KuboKyosuke Kubo

そもそもnpm auditしたら、storybookの依存パッケージの部分で問題が起きているので、直接直すのは該当ライブラリにcontributeするしかなさそう。

なので、依存pkgのバージョンをどうやったら操作できるかを考える。

Kyosuke KuboKyosuke Kubo

下記記事にもあるとおりyarnでしか標準でできない機能になっているが、package.jsonに追記してみる。

"resolutions": {
    "ansi-regex": "5.0.1",
    "nth-check": "2.0.1",
    "trim": "0.0.3",
    "browserslist": "4.16.5",
    "glob-parent": "5.1.2",
    "immer": "9.0.6"
  }

https://numb86-tech.hatenablog.com/entry/2020/05/26/170627

Kyosuke KuboKyosuke Kubo

yarn auditすると、自分の場合はresolutionで治った。
しかし、ansi-htmlだけ依然highで残っている。

Kyosuke KuboKyosuke Kubo

react-scriptsの問題なので、react-scriptsをyarn removeしたら0にできた。

現時点で考えられるベストプラクティスはcreate-react-appではなく、

  • 全部手動で構築させたのちに
  • 手動で@storybook/react,@storybook/vulnerabilitiesでstorybookを構築
  • resolutionsで深い依存のpackageのversionを設定
  • npmの場合はpkgを使ってpackageのversionを設定(未検証)
  • react-scriptsがある場合はremove(uninstall)

↑こんな感じ??まあまあ無理くり感あるが、auditの結果を健全にできる方法ではある。

このスクラップは2021/12/10にクローズされました