【Rails6】GitHubのセキュリティアラート「serialize-javascript」の対処法

Rails6で作った自作アプリのGitHubのページを見ていたら、以下のセキュリティアラートが出ていました。
2.png33.6KB

セキュリティレベルは「moderate security」、つまり中程度の危険度ということです。
ずっとアラートが出続けているのは気持ち悪いので早急に対処することにしました。

Railsアプリのバージョンは以下のとおりです。
  • Rails 6.0.0
  • Webpacker 4.2.0

調査

まず、serialize-javascriptとは何なのかを調べます。
1-1.png23.7KB

セキュリティアラートのページに対象のファイルが書いてありました。
どうやらyarnでインストールされたパッケージのようです。

serialize-javascriptがどのパッケージに依存しているかを調べるには以下のコマンドを実行します。
$ yarn why serialize-javascript
yarn why v1.17.3
[1/4] 🤔  Why do we have the module "serialize-javascript"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "serialize-javascript@1.9.1"
info Reasons this module exists
   - "@rails#webpacker#compression-webpack-plugin" depends on it
   - Hoisted from "@rails#webpacker#compression-webpack-plugin#serialize-javascript"
   - Hoisted from "@rails#webpacker#terser-webpack-plugin#serialize-javascript"
info Disk size without dependencies: "24KB"
info Disk size with unique dependencies: "24KB"
info Disk size with transitive dependencies: "24KB"
info Number of shared dependencies: 0
✨  Done in 0.81s.
Webpackのcompression-webpack-pluginをインストールするときに一緒にインストールされたようです。
また、同じくWebpackのterser-webpack-pluginとも依存関係があるようです。
Webpack(Webpacker)はRails6から標準導入されるようになったので、Rails6で作られたアプリはすべてserialize-javascriptを使用しているということになります。

yarn.lockの中も見てみます。
...
compression-webpack-plugin@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-2.0.0.tgz#46476350c1eb27f783dccc79ac2f709baa2cffbc"
  integrity sha512-bDgd7oTUZC8EkRx8j0sjyCfeiO+e5sFcfgaFcjVhfQf5lLya7oY2BczxcJ7IUuVjz5m6fy8IECFmVFew3xLk8Q==
  dependencies:
    cacache "^11.2.0"
    find-cache-dir "^2.0.0"
    neo-async "^2.5.0"
    schema-utils "^1.0.0"
    serialize-javascript "^1.4.0"
    webpack-sources "^1.0.1"

...

serialize-javascript@^1.4.0, serialize-javascript@^1.7.0:
  version "1.9.1"
  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb"
  integrity sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A==

...

terser-webpack-plugin@^1.3.0, terser-webpack-plugin@^1.4.1:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz#61b18e40eaee5be97e771cdbb10ed1280888c2b4"
  integrity sha512-ZXmmfiwtCLfz8WKZyYUuuHf3dMYEjg8NrjHMb0JqHVHVOSkzp3cW2/XG1fP3tRhqEqSzMwzzRQGtAPbs4Cncxg==
  dependencies:
    cacache "^12.0.2"
    find-cache-dir "^2.1.0"
    is-wsl "^1.1.0"
    schema-utils "^1.0.0"
    serialize-javascript "^1.7.0"
    source-map "^0.6.1"
    terser "^4.1.2"
    webpack-sources "^1.4.0"
    worker-farm "^1.7.0"
...
インストールされているserialize-javascriptのバージョンは1.9.1のようですね。

対処

serialize-javascriptのバージョンが古いことがわかったので、バージョンアップします。
以下のコマンドを実行します。
$ yarn upgrade serialize-javascript@latest
yarn upgrade v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > webpack-dev-server@3.8.0" has unmet peer dependency "webpack@^4.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.0" has unmet peer dependency "webpack@^4.0.0".
[4/4] 🔨  Rebuilding all packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ serialize-javascript@2.1.1
info All dependencies
└─ serialize-javascript@2.1.1
✨  Done in 7.97s.
「yarn upgrade <package>@latest」で指定したパッケージを最新バージョンにしてくれます。
「@latest」ではなく「@x.x.x」とすることで任意のバージョンを指定することもできます。

バージョンアップされたか見てみましょう。
$ git diff
diff --git a/package.json b/package.json
index 2d079b9..c91d7b9 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "dependencies": {
     "@rails/actiontext": "^6.0.0",
     "@rails/webpacker": "^4.0.7",
+    "serialize-javascript": "^2.1.1",
     "trix": "^1.0.0"
   },
   "devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 1617c77..28315e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6030,6 +6030,11 @@ serialize-javascript@^1.4.0, serialize-javascript@^1.7.0:
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.8.0.tgz#9515fc687232e2321aea1ca7a529476eb34bb480"
   integrity sha512-3tHgtF4OzDmeKYj6V9nSyceRS0UJ3C7VqyD2Yj28vC/z2j6jG5FmFGahOKMD9CrglxTm3tETr87jEypaYV8DUg==
 
+serialize-javascript@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.1.tgz#952907a04a3e3a75af7f73d92d15e233862048b2"
+  integrity sha512-MPLPRpD4FNqWq9tTIjYG5LesFouDhdyH0EPY3gVK4DRD5+g4aDqdNSzLIwceulo3Yj+PL1bPh6laE5+H6LTcrQ==
+
 serve-index@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
既存の1.9.1がバージョンアップされたわけではなく、2.1.1が新しくインストールされたように見えます…
一応、この状態でコミットしてみます。
3.png8.42KB

セキュリティアラートが消えました!
やや腑に落ちない気もしますが、消えたのでよしとしましょう😅

まとめ

Rails6からWebpackerが標準導入され便利になった反面、それに起因するエラーや警告も増えている気がします。
今回のようにエラーや警告に対処していくのは大変ですが、これからもしっかり勉強して行きたいと思います。
間違いやご指摘等ありましたらコメントしていただけると嬉しいです。

関連記事

【Rails】Railsアップグレードまとめ
# はじめに Ruby on Railsに限らず、何らかのフレームワークを使ってWebシステムを構築している場合、フレームワークのアップグレード作業は避けて通れません。 一般的にフレームワークはバージョン毎にEOL (End of Life [...]
2022年10月1日 14:32
【Rails】ユーザー登録時に行うメールアドレス認証機能の実装方法
# はじめに ユーザー登録/解除やログイン/ログアウトといった認証機能の導入に「devise」というGemを使っている人は多いと思います。「devise」では以下のように記述するだけで、ユーザー登録時に確認メールを送付しメールアドレス認証を行う機 [...]
2022年9月24日 14:24
【Rails】モデルに列挙型(enum)を定義し、使いこなす方法
# はじめに Railsはモデルでカラム名と同名の列挙型(enum)を定義することで、カラムと列挙型の変数を紐付けることができます。カラムと列挙型の変数を紐付けると、カラムに対して様々な便利な使い方ができるようになります。 本記事では、モデ [...]
2022年9月3日 10:29
【Rails】RailsでCORSとPreflight requestの設定を行う方法
# はじめに RailsアプリをAPIサーバーとして構築するには、CORS (Cross-Origin Resource Sharing)と Preflight requestの設定を行う必要があります。APIサーバーは外部からの要求に対して処理 [...]
2022年8月27日 10:44
【Rails】M1チップ搭載MacでRuby on Railsの開発環境構築
# はじめに M1チップ搭載MacにRuby on Railsの開発環境を構築する手順を記載します。 - MacBook Air (M1, 2020) - macOS Monterey 12.3.1 # Homebrew ## [...]
2022年5月5日 11:56
【Rails】Rakeタスクの基本情報と作成・実行方法
# はじめに Railsには標準でRakeというGemが同梱されています。RakeはRubyで実装されたMake(UNIX系のOSで使用できるコマンド)のようなビルド作業を自動化するツールです。Ruby Make、略してRakeというわけですね。 [...]
2022年3月7日 22:12
【Rails】モデルに外部キーを設定する方法とよく起こるエラー内容について
# はじめに Railsでモデルに外部キーを設定する方法について説明します。 # モデルに外部キーを設定する ## リレーションシップ 今回は1つのブログ記事は複数のコメントを持つ1対多のリレーションシップを例に説明します。現在は` [...]
2022年2月10日 14:18
【Rails】Capybaraのfill_inメソッドを実行すると「既存レコードの内容+指定した内容」がセットされる事象の原因と対処【RSpec】
# はじめに RSpec + Capybaraを使用して、Railsアプリの統合テストを実装しています。とあるモデルの編集画面において、入力フォームの内容を書き換えた上で送信し、レコードが更新されることを確認します。 入力フォームの内容を書 [...]
2022年1月27日 21:22