Snykのセキュリティアップデートを自動適用して、Vue.jsのJamstackアプリケーションをNetlifyにデプロイする方法

フロントエンドのセキュリティについて学びながら、静的サイトをNetlifyにデプロイしてみませんか？JavaScriptの依存関係に潜む脆弱性を自動的に検出して修正する方法を学びましょう。

さっそく始めましょう。

この記事では、次のツールを使います。

• Netlify - サイトをすばやく構築し、グローバルネットワークにデプロイできるプラットフォーム。

• Snyk.io - オープンソースライブラリ、コンテナ、クラウドネイティブアプリケーション向けの、開発者を第一に考えたセキュリティプラットフォーム。

• Vue.js - プログレッシブなJavaScriptフレームワーク。

• Vuetify - Vue.jsアプリ向けのマテリアルデザインUIコンポーネントフレームワーク。

新しい概念を学ぶには、実際に試してみるのが効果的です。フロントエンドセキュリティのトピックをいくつか学ぶなら、ビンゴゲームを楽しみながら学ぶのはいかがでしょうか？

そこで、フロントエンドセキュリティビンゴのゲームをデプロイします。どうすれば勝ちでしょうか？ルールは簡単です。チームやオープンソースプロジェクトで実践している項目のボックスをすべてチェックしてください。全部チェックできたら勝ちです！

フロントエンドセキュリティビンゴのプレイ画面はこちらです。

Netlifyへのデプロイ

静的サイトを公開するために、Jamstackサイトのホスティングに適した最適化済みツールのひとつであるNetlifyにデプロイします。

Netlifyでは、サイトをデプロイする方法が2つあります。

1. NetlifyのUIからプロジェクトのリポジトリを接続します。Netlifyをバージョン管理の進捗と同期させ、変更があるたびにサイトをデプロイする継続的デプロイの仕組みを利用したい場合に便利です。この場合、Netlifyの設定で、静的サイトを作成する任意のビルドツールを実行するよう指定し、Netlifyがその成果物をデプロイします。

2. Netlify CLIを使って、CLIから直接サイトをデプロイします。開発マシン上のプロジェクトのワークスペースからすばやくデプロイを実行できるため、手軽に始められる方法です。

今回は最初の方法を使い、フロントエンドセキュリティビンゴのゲームをリポジトリから直接デプロイします。

まず、Netlifyにログインするか、アカウントを作成します。

次に、GitHub、GitLab、Bitbucketのいずれかから、Webサイトプロジェクトのリポジトリをインポートします。

今回はGitHubを使うので、手順は次のとおりです。

1. GitHubをクリックします

2. NetlifyアプリにGitHubアカウントへのアクセスを許可します

3. リストからWebサイトのリポジトリを選択します

No repositories foundというメッセージが表示された場合は、Configure Netlify on GitHubをクリックし、該当するGitHubアカウントのプロフィールにNetlifyアプリをインストールします。インストール後、すべてのリポジトリに適用するか、Webサイトのリポジトリだけを選択できます。

完了すると、次のように表示されます。これでデプロイを開始し、ビルドプラグインを接続する準備が整いました。

frontend-security-bingoというWebサイトの項目をクリックして設定を完了し、Deployボタンをクリックします。

Netlifyはリポジトリのクローンを作成し、依存関係をインストールして、Webサイトをビルドします。完了すると一時的なWebサイトのURLが発行され、カスタマイズできます。

わずか数秒で、https://frontend-security-bingo.netlify.appからフロントエンドセキュリティビンゴを利用できるようになります。

これで完了、ですよね？

いえ、まだあります。

Webサイトに潜むJavaScriptのセキュリティ脆弱性

小さな静的サイトなのに、JavaScriptのセキュリティ脆弱性があるかもしれないとは、どういうことでしょうか？

依存関係も大量に使っていません。プロジェクトで本番環境用に使っている依存関係は、文字どおり2つだけです。プロジェクトの初期化時にVue.js CLIで作成された、初期状態のスキャフォールドを示すWebサイトのpackage.jsonを見てみましょう。

私が使っているVS Code拡張機能のVuln Costによると、12行目にセキュリティ脆弱性を含む依存関係があるようです。

こうしたアラートを無視していませんか？脆弱性のトリアージは大変な作業ですが、開発に適したツールやワークフローを導入すれば、対応しやすくなります。Snykを使うメリットには、次のようなものがあります。

• 脆弱性データベース - 無料プランでも有料プランでも、すべてのSnykユーザーがSnykの脆弱性インテリジェンスデータベースを利用できます。Snykの経験豊富なセキュリティリサーチチームがデータベースを精査し、幅広い脆弱性を網羅しながら誤検知を抑える高い水準を維持しています。CVEデータセットと比べ、脆弱性を370%多く収録しています。

• 継続的なモニタリング - オープンソースのセキュリティ対策を始めるには、1回限りのスキャンが効果的です。しかし、実際のアプリケーションでは、プロジェクトを継続的にモニタリングして、新たなセキュリティ脆弱性が見つかったときにアラートを受け取る必要があります。さらに、プルリクエストでセキュリティ修正を自動作成できれば、マージするだけで脆弱性を修正できます。

Vuln Costのインラインリンターエラーを詳しく見ると、Vue.jsのUIフレームワークVuetifyに影響する中程度の脆弱性だとわかります。無視するのは得策ではありません。

ちょっとしたチャレンジに挑戦しませんか？

https://frontend-security-bingo.netlify.app/で公開中のWebサイトには、Vuetifyの未修正のJavaScript脆弱性が含まれています。見つけられますか？

ヒント：Vuetifyのバージョン2.1.9より前のバージョンに影響する、JavaScriptのクロスサイトスクリプティング（XSS）脆弱性です。詳細は公開されているSnyk Vulnerability Databaseをご覧ください。Snykのセキュリティリソースで、クロスサイトスクリプティングの脆弱性について、また2020年に開発されたWebアプリケーションでもどれほど広く見られるかを学びましょう。

この脆弱性について説明します。

フロントエンドセキュリティビンゴのWebサイトの下部には、Twitterでこのサイトを共有するためのボックスがあります。テキスト欄で、投稿前にツイートを編集できます。

このテキストボックスでは、Vuetifyの**error-messages**スロットを使ってエラーメッセージを表示します

<template>
 <div>
   <v-text-field
     :counter="true"
     v-model="shareTwitterText"
     label="tweet"
     required
     :error-messages="tweetErrors"
   ></v-text-field>
   <v-btn
     color="blue"
     outlined
     large
     @click="shareTwitter"
     class="blue--text text--darken-1 font-weight-bold"
     full-width
   >Share on Twitter</v-btn>
 </div>
</template>

コンポーネントのコードでは、**tweetErrors**配列と**shareTwitter()**メソッドを使ってエラー処理を設定しています。

<script>
export default {
 name: "SocialShare",
 data: () => {
   return {
     shareTwitterText:
       "Learn about Frontend Security Bingo: https://goo.gl #FrontendSecurity #WebDev",
     tweetErrors: []
   };
 },
 methods: {
   shareTwitter() {
     if (this.shareTwitterText.length > 280) {
       this.tweetErrors.push(
         `Your text is longer than 280 characters: ${this.shareTwitterText}`
       );
       return true;
     } else {
       this.tweetErrors = [];
       const tweetMsg = encodeURIComponent(this.shareTwitterText);
       const tweetUrl = `https://twitter.com/intent/tweet?text=${tweetMsg}&via=liran_tal`;
       window.open(tweetUrl, "_blank");
     }
   }
 }
};
</script>

テキストが280文字を超えると、エラーを設定します。次のように表示されます。

ツイートのテキストに、JavaScriptを含むHTML要素が入っていたらどうなるでしょうか？

次のテキストをツイートに含めて、共有ボタンをクリックしてみてください。

<img src=x onError=”alert(1)” />

アラートのポップアップが表示されましたか？

おめでとうございます。あなたはハッカーです！ :-)

ただし、この脆弱性に気づいていないと危険です。VuetifyのXSSに関する脆弱性ページには、次のように記載されています。

このパッケージの影響を受けるバージョンには、error-messages配列を介したクロスサイトスクリプティング（XSS）脆弱性があります。注：propsのrules、messages、hint、success-messages、error-messagesにHTMLを使用していない場合、この問題の影響はありません。

これは公知のセキュリティ脆弱性であるため、攻撃者は簡単に情報を入手し、攻撃に利用できます。

Webサイトをデプロイしながら、セキュリティを確保するには？

いい質問です！

Webサイトをデプロイする前に、サードパーティのセキュリティスキャンを実行できますし、実行すべきです。NetlifyのビルドにSnykプラグインを追加する以上に簡単な方法はありません。

Netlifyのプラグインエコシステムを使えば、ビルドプロセスにアクションを追加・拡張するプラグインを接続できます。

Snykプラグインを検索して、Webサイトに追加しましょう。

セキュリティ結果を取得するには開発者用APIトークンが必要なので、Snyk.ioにアクセスして取得します。ホームページの右上にあるQUICK STARTボタンをクリックし、使いたい認証アカウントでログインします。GitHubをおすすめします。古いバージョンの依存関係をアップグレードするプルリクエストだけでなく、セキュリティ修正のプルリクエストも自動で送信できるためです。

アカウントの一般設定ページでAPIトークンを確認できます。

SnykのAPIトークンを取得したら、Netlifyのビルドプロセスの環境変数として追加します。Netlifyのサイトの一般設定ページにある、左側のメニューのBuild & deployからビルド設定を開けます。

Edit variablesをクリックし、名前をSNYK_TOKEN、値をAPIトークンにした新しい変数を追加します。

これで完了です！

これで、Webサイトのビルドに必要なパッケージ依存関係からセキュリティ脆弱性が検出されると、ビルドが失敗するため、問題をすばやく修正できます。Snykは、脆弱性の修正方法やアップグレードが必要なパッケージを明確に案内します。

プロジェクトでビルドが失敗したときの様子を見てみましょう。まず、デプロイのステータスに、プラグインが原因でビルドに失敗したことが表示され、デプロイ失敗の原因を確認できます。

ページをスクロールしてログを確認すると、Snykプラグインが報告したエラーがはっきりとわかります。vuetifyのクロスサイトスクリプティング脆弱性が原因で、このWebサイトのビルドをデプロイできません。

Snykプラグインのおかげで、Netlifyのビルドプロセスは停止しました。依存関係ツリーにある脆弱なバージョンのVuetifyが原因で、クロスサイトスクリプティング脆弱性を介して悪意のあるJavaScriptコードを注入できてしまう、Vuetifyの該当するセキュリティ脆弱性を正確に検出しました。

使っている依存関係に新たなセキュリティ脆弱性が見つかったのに、長い間Webサイトをビルドしていなかったらどうなるでしょうか？ご安心ください。Snykがサポートします！Snykはビルドのたびに実行されるだけでなく、SnykプラグインがSnykプラットフォームを使ってプロジェクトをモニタリングし、毎日テストを実行します。依存関係に新たなセキュリティ脆弱性が見つかると、通知が届きます。

次のステップ

• Vuetifyを使っている場合は、依存関係をスキャンしてセキュリティ脆弱性を検出し、修正しましょう。ヒント：リポジトリをSnykに接続すると、脆弱性を修正するプルリクエストが自動的に作成され、今後の脆弱性もモニタリングされます。自分で定期的にスキャンやデプロイを行っていない場合にも安心です。

• SnykのNetlifyビルドプラグインを使ってみる

• SnykでAPIトークンを取得し、リポジトリを追加してモニタリングと修正を開始しましょう