MENU

【npm】Laravel, Vue.js環境でのパッケージの脆弱性対応

かなり前に作ったアプリをGitHubに公開しています。時間が経過すると、This automated pull request fixes a security vulnerability (moderate severity).というメールがたくさん届きます。「vulnerability」は、脆弱性という意味です。
面倒でずっと放置していたのですが、実務では対応必須なので、アプリの方もしぶしぶ対応することにしました。

始めに、今回脆弱性対応を行うリポジトリの主な環境です。LaravelとVue.jsを使っています。

    "devDependencies": {
        "axios": "^0.26.0",
        "bootstrap": "^4.6.1",
        "browser-sync": "^2.27.7",
        "browser-sync-webpack-plugin": "^2.3.0",
        "core-js": "^3.21.1",
        "cross-env": "^5.1",
        "jquery": "^3.6.0",
        "laravel-mix": "^6.0.43",
        "laravel-mix-polyfill": "^2.0.0",
        "lodash": "^4.17.21",
        "popper.js": "^1.12",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.49.9",
        "sass-loader": "^7.1.0",
        "vue": "^2.6.14",
        "vue-loader": "^15.9.8",
        "vue-router": "^3.5.3",
        "vue-template-compiler": "^2.6.14",
        "vuex": "^3.6.2"
    },
    "dependencies": {
        "vue-smoothscroll": "^0.2.0"
    }


該当のリポジトリでnpm installを打つと、以下のようなメッセージが表示されます。

found 110 vulnerabilities (3 low, 57 moderate, 48 high, 2 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

110件もの脆弱性を放置していました。criticalも2件あります。まずは、文最後の`npm audit` for detailsを見てnpm auditを実行してみます。

  High            Resource exhaustion in engine.io                              
                                                                                
  Package         engine.io                                                     
                                                                                
  Patched in      >=4.0.0                                                       
                                                                                
  Dependency of   browser-sync [dev]                                            
                                                                                
  Path            browser-sync > socket.io > engine.io                          
                                                                                
  More info       https://github.com/advisories/GHSA-j4f2-536g-r55m             
                                                                                
found 110 vulnerabilities (3 low, 57 moderate, 48 high, 2 critical) in 1264 scanned packages
  run `npm audit fix` to fix 67 of them.
  41 vulnerabilities require semver-major dependency updates.
  2 vulnerabilities require manual review. See the full report for details.

Highがリスクの大きさと、脆弱性の種類です。Packageが該当のパケージです。Patched inは、脆弱性が解消されているバージョンです。Dependency ofが使われているツールと環境です。[dev]の場合は、開発環境ですね。Pathの所は依存関係ですね。これが1つの脆弱性なので、自分の例では110件出力されました。run `npm audit fix` to fix 67 of them.
となっているので、npm audit fix を実行します。67件と言わず、全部直ってほしいところです。

+ axios@0.26.0
added 55 packages from 53 contributors, removed 31 packages, updated 23 packages and moved 1 package in 43.005s

43 packages are looking for funding
  run `npm fund` for details

fixed 67 of 110 vulnerabilities in 1264 scanned packages
  2 vulnerabilities required manual review and could not be updated
  2 package updates for 41 vulnerabilities involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)

予告通り67件の脆弱性が解消されたようです。npm audit fix –forceを打つと、強制的にアップデートがかかりそうですが、npm auditを実行してみます。

  High            ReDOS in IS-SVG                                               
                                                                                
  Package         is-svg                                                        
                                                                                
  Dependency of   laravel-mix [dev]                                             
                                                                                
  Path            laravel-mix > optimize-css-assets-webpack-plugin > cssnano >  
                  cssnano-preset-default > postcss-svgo > is-svg                
                                                                                
  More info       https://github.com/advisories/GHSA-r8j5-h5cx-65gg 

laravel-mixにたくさんの脆弱性が残っているようです。公式のドキュメントを参考にして、アップデートを行なっていきます。

npm install laravel-mix@latest

+ laravel-mix@6.0.43
added 225 packages from 166 contributors, removed 403 packages, updated 316 packages, moved 22 packages and audited 1044 packages in 172.987s

81 packages are looking for funding
  run `npm fund` for details

found 4 vulnerabilities (1 moderate, 3 high)
  run `npm audit fix` to fix them, or `npm audit` for details

一気に脆弱性の数が減りました。ただし、ビルド系のパッケージをアップデートしたので、アップデート前の通り開発環境が使えるのかどうか確認してみます。

npm run watch-poll

> @ watch-poll /var/www/html/match/laravel_match
> mix watch -- --watch-options-poll=1000

Error: You are using an unsupported version of Node. Please update to at least Node v12.14

エラーになりました。Node.jsのバージョンが古いようです。自分のローカル環境では、Dockerを使用しているので、Dockerfileを更新します。

FROM php:7.4.1-fpm

COPY install-composer.sh /
RUN apt-get update \
  && apt-get install -y wget git unzip libpq-dev \
  && : 'Install Node.js' \
  &&  curl -sL https://deb.nodesource.com/setup_12.x | bash - \
  && apt-get install -y nodejs \
  && : 'Install PHP Extensions' \
  && docker-php-ext-install -j$(nproc) pdo_mysql \
  && : 'Install Composer' \
  && chmod 755 /install-composer.sh \
  && /install-composer.sh \
  && mv composer.phar /usr/local/bin/composer

WORKDIR /var/www/html/match

Node.jsのイメージを持ってくる行を10から12に変更しました。本当は12.14以上になるように指定するのが、正確なのですが、面倒なのでいったんこれでDockerの環境をビルドしてみます。

docker compose up --build
docker-compose exec XXX bash

# node -v
v12.22.2

イメージを再度持ってくるので、–buildのオプションを付けます。node -vでバージョンを確認したところ12.22.2でした。結果オーライです。続いて公式のドキュメントに沿って、npmのscriptsを更新します。以下のコードが更新前です。

    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },

更新後以下の通りです。実行するコマンドは同じですが、すっきりしました。

    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },

続いてwebpack.mix.jsも更新します。

mix.js('resources/js/app.js', 'public/js')
mix.js('resources/js/app.js', 'public/js').vue()

.vue()を追加するだけです。それでは、もう一度開発環境を立ち上げてみます。

 npm run watch-poll

> @ watch-poll /var/www/html/match/laravel_match
> mix watch -- --watch-options-poll=1000

 	Additional dependencies must be installed. This will only take a moment.
 
 	Running: npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps
 
 	Finished. Please run Mix again.
 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ watch-poll: `mix watch -- --watch-options-poll=1000`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ watch-poll script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-03-04T06_17_06_626Z-debug.log

エラーで実行できませんでしたが、もう一回実行してねというメッセージが出ました。再度npm run watch-pollを実行したところ、開発環境を立ち上げられました。再びnpm auditを実行してみます。

                       === npm audit security report ===                        
                                                                                
# Run  npm install --save-dev resolve-url-loader@5.0.0  to resolve 3 vulnerabilities
SEMVER WARNING: Recommended action is a potentially breaking change

丁寧に解決のためのコマンドを提示してくれましたので、実行してみます。

+ resolve-url-loader@5.0.0
added 2 packages from 1 contributor, removed 27 packages, updated 3 packages, moved 1 package and audited 1034 packages in 14.333s

86 packages are looking for funding
  run `npm fund` for details

found 1 high severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

あと1件のところまで来ました。npm auditを実行してみます。

  High            Uncaught Exception in engine.io                               
                                                                                
  Package         engine.io                                                     
                                                                                
  Patched in      >=4.1.2                                                       
                                                                                
  Dependency of   browser-sync [dev]                                            
                                                                                
  Path            browser-sync > socket.io > engine.io                          
                                                                                
  More info       https://github.com/advisories/GHSA-273r-mgr4-v34f  

browser-sync に使われているパッケージでした。ただ、browser-sync自体は最新のバージョン2.27.7で、解決は難しそうでした。以下のようにresolutions を入れてみたのですが、開発環境自体立ち上がらなくなってしまいました。
ここまでで数時間かかり、これ以上作業するは無理そうだったので放置することにしました。browser-syncの更新に期待します…

// NGだったpackage.jsonの記述
    "resolutions": {
        "engine.io": "4.1.2"
    },

最後まで読んでいただいてありがとうございました。脆弱性の対応は必須の作業だったりしますが、地味に時間がかかってしまうことがあります。何かエラー解決のヒントになればうれしいです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次