【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】Paranoiaを使用した論理削除(ソフトデリート)
# はじめに Paranoiaは、Railsアプリケーションで論理削除(ソフトデリート)を実現するためのGemです。 論理削除は、データベースのレコードを物理的に削除するのではなく、削除フラグを設定することで「削除済み」とみなす方法です。こ [...]
2024年7月20日 21:33
【Rails】activerecord-multi-tenantを使用したマルチテナントアプリケーションの作成
# はじめに マルチテナントアプリケーションでは、複数の顧客(テナント)が同じアプリケーションを利用するため、データの分離が必要です。 activerecord-multi-tenantは、このようなマルチテナント環境をサポートするための便 [...]
2024年7月18日 16:50
【Rails】RubyとRailsにおけるattr_reader, attr_writer, attr_accessorの概念と使用方法
# はじめに RubyとRailsの開発において、`attr_reader`,`attr_writer`,`attr_accessor`は非常に便利なメソッドです。これらは、クラス内でインスタンス変数に対するゲッターおよびセッターメソッドを簡単に [...]
2024年7月17日 18:11
【Rails】RubyとRailsにおけるyieldの概念と使用方法
# はじめに RubyとRailsにおける`yield`は、メソッドやテンプレートの中で動的にコードブロックを実行する能力を提供し、これによってコードの再利用性と拡張性が大幅に向上します。本記事では、RubyとRailsにおける`yield`の概 [...]
2024年7月17日 13:15
【Rails】AASMを使用してオブジェクトの状態遷移を効率的に管理
# はじめに Railsアプリケーションにおいて、オブジェクトの状態管理は重要な課題の一つです。AASM (Acts As State Machine) gemは、複雑な状態遷移を効率的に管理します。本記事では、AASMの基本的な使い方を解説して [...]
2024年7月16日 18:00
【Rails】RSpec + Swagger + rswagでアプリケーションのAPIをテストおよびドキュメント化する方法
# はじめに Railsアプリケーションの開発において、APIのテストとドキュメント化は重要な要素です。 RSpecはテストフレームワークとして広く利用されており、SwaggerはAPIの設計とドキュメント化を支援します。これらを統合するr [...]
2024年7月16日 14:27
【Rails】mailcatcherを使用して開発環境でメール送信をテストする方法
# はじめに mailcatcherは、開発環境でのメール送信をキャプチャするためのツールです。ローカルで送信されたメールをブラウザ上で簡単に確認できるようにします。mailcatcherをRailsアプリケーションで使用する方法について説明しま [...]
2024年7月15日 16:37
【Rails】impressionistを使用してページビューやクリック数を追跡する方法
# はじめに impressionist Gemを使用してRailsアプリケーションでページビューやクリック数を追跡する方法について説明します。 # 実装方法 ## impressionist Gemのインストール まず、impre [...]
2024年7月15日 14:18