AUTOVICE

TECH BLOG

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

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

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

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

調査

まず、serialize-javascriptとは何なのかを調べます。
1-1.png 23.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.png 8.42KB

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

まとめ

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