Share
Download the
Global Threat
Intelligence Report
12/7（火）は、SOC アナリスト 髙橋 一基の記事です。Web ブラウザ拡張機能を用いた業務改善について紹介します。
---
我々のSOCでは日々のログ分析業務を高度化するために様々な取り組みを行っています。過去のアドベントカレンダーでは SOCで作る自動化ライブラリと FaaS（Function as a Service） という例をご紹介させていただきました。本日はそのような高度化の取り組みの中から、自作のブラウザ拡張機能についてご紹介します。
我々のログ分析環境ではWebブラウザを多用しますが、その拡張機能の開発を主にJavaScriptで行っています。
なお、この記事で説明されない拡張機能作成の準備やJavaScript の基礎等の内容については、「拡張機能 作り方」「ユーザースクリプトマネージャー 使い方」「JavaScript 入門」などのキーワードでWeb検索しますと、先人達が書いてくださった役立つ記事が見つかるはずですのでそちらをご覧ください。この記事では実際の運用業務ではどんなことを考え、どう改善したか、という点をまとめていきます。
拡張機能を自作することの目的および利点
拡張機能を自作することの目的および利点はいくつかあります。
- ブラウザを用いた日々の作業を単純化・効率化し、作業を楽にできること
- ブラウザを用いた日々の作業におけるヒューマンエラーの発生箇所に機能追加を施し、同じミスを繰り返さない仕組みを作る事
- 自分たちが管理していないWebシステム・Webサービスも、自分たちが使いやすいように改造できること
- 作成した機能をチーム内で共有することでチーム全体の作業効率を上げつつ、作業方法の統一を図れること
それぞれについて詳しく説明していきます。
1. ブラウザを用いた日々の作業を単純化・効率化し、作業を楽にできること
これが拡張機能を自作する主な理由です。具体例は後ほど紹介します。
2. ブラウザを用いた日々の作業におけるヒューマンエラーの発生箇所に機能追加を施し、同じミスを繰り返さない仕組みを作ること
日々の作業の中でヒューマンエラーが発生してしまうことがあります。我々のチームではそのようなミスがあった場合、何が起きたのか、なぜ起きたのか、今後起こさないためにはどのようにすればよいか、を業務フローや仕組みの観点で分析しチーム内に共有する取り組みが行われています。そして何らかミスがWebブラウザを用いた作業の中で発生してしまった場合は、拡張機能を用いることで何か対策できないか模索します。こちらも具体例を後ほど紹介します。
3. 自分たちが管理していないWebシステム・Webサービスも、自分たちが使いやすいように改造できること
日々の作業に使用するWebシステム・Webサービスには、それ自体を我々SOCで内製しているものもあれば、既存の製品を使用しているものもあります。内製しているシステムであれば、改善案をシステム担当者に依頼し対応してもらうことでも目的は達成できるかもしれません。ですが外部の製品の場合はそうは行きません。また内製のシステムであっても、自分たちのチーム以外はその改造を望まないかもしれません。そのような場合でも、拡張機能を自作すれば適用範囲を柔軟にコントロールしながら自分たちにとって便利な改造を施せます。
4. 作成された拡張機能を使用必須にすることで、チーム全体の作業効率を上げつつ、作業方法の統一を図れること
一般的にブラウザの拡張機能といえば使いたい人が自分の意志で後から追加するものですが、我々の場合は違います。我々の作成した拡張機能はログ分析環境のブラウザに自動でインストールされ、一般権限では停止や削除が不可となっています。すなわち、使うとより便利になる拡張機能、ではなく、この拡張機能を使わずに作業をしてはいけない、という位置づけとなっています。このように拡張機能を使用必須とすることで、①と②の内容の徹底を図ることができます。
以上4つの目的と利点について述べましたが、これらを実現する方法は拡張機能を1から自作する他に、ユーザースクリプトマネージャーと呼ばれる拡張機能を使う方法もあります。本記事ではユーザースクリプトマネージャーについて詳しくご紹介はしませんが、一言で言うと自作の拡張機能を作るための拡張機能と呼べるものです。この記事でご紹介する業務改善の例はどれも、拡張機能を自作することでも、ユーザースクリプトマネージャー上にスクリプトを作成することでも実現できます。
拡張機能の自作による業務改善の例
この記事では以下の4つの例をご紹介します。汎用的に使える考え方であろうものピックアップしました。
- いつも同じ値を入れる入力欄には最初からその値を設定しておく
- 入力欄に値の候補を追加する
- 不要なボタンやリンクを非表示にする
- 便利機能を追加する
各例では、まずどんなことを実現したかったのかという考え方を述べ、その後スクリーンショットを紹介し、そしてそのスクリーンショット上で行われていることを簡単に解説します。
（例1）いつも同じ値を入れる入力欄には最初からその値を設定しておく
いつも同じ値を入れる入力欄というのは日々の業務でしばしばあるかと思います。そのような入力欄に毎回値を手入力する、もしくはブラウザに記憶された履歴をクリックして入力する、というのは時間の無駄です。そのような欄には自動で値が入るようにして作業を楽にしましょう。
以下はFireEyeという製品のWeb操作画面における例です。
これはFireEyeのMalware Analysisという機能の画面で、指定したURLからダウンロードされるファイルがマルウェアかどうか調査してくれます。はじめにLive調査（調査時に実際にインターネットに通信する）かSandbox調査（インターネット通信しない）を選択し、またタイムアウトまでの時間を設定します。これらの値がよく使う設定である、「Live」調査、タイムアウトが「60」秒に初めからなっていて欲しいのですが、システム上はそうなっていません。
毎回これらを手入力するのは面倒なので、拡張機能を自作し最初からこの値が入るようにしました。また、SOC内でURLを扱う場合はそのリスクを可能な限り排除するため「hxxps」で始まるようなdefangされた状態にしてありますが、これをそのまま入力すると調査に失敗してしまうので、自動で「https」に直す機能もつけています。
実装はとてもシンプルで、上記の3つの処理を合わせてもソースコード上で10行程度です。ある程度JavaScriptに慣れている人であれば試験含め短時間で作成できるかと思われます。ですが作成作業の簡単さにに比べて得られる効果は大きいです。1回で短縮される時間はものの数秒かもしれませんが、多数のメンバーが一日に何度もする調査であるため、チームメンバー全員にこの拡張機能を配布して使用すれば開発稼働分は簡単に回収できて、あとは恩恵を受けるのみです。
（例2）入力欄に値の候補を追加する
1つ目の例では入力欄に最初から値を設定しておく場合を紹介しました。ですが、複数の選択肢から値を選びたい入力欄や、大抵は過去と同じ値が入るが新規の値が入ることもある入力欄、といったものもあるかと思います。そういった場合はそれらの選択肢や入力候補を表示する機能を追加しましょう。
ここでは我々のログ分析環境で使用するフィルタという機能に関する例をご紹介します。
フィルタとは、指定した条件にマッチするアラートを分析システム上で非表示にする仕組みです。明らかに誤検知とわかるもの、お客様からの分析停止依頼を受け一定期間分析対象から外すもの、などをフィルターで除外します。フィルタの作成時には条件を指定するのですが、このとき打ち間違いによって効果のないフィルタを適用しそうになるというヒヤリハットがありました。
この状況を改善すべく、条件の候補を表示する拡張機能を作成しました。これにより、条件の文字列を途中まで入力すれば目当てのものが見つかるため入力時間の短縮にもなり、また打ち間違いをした場合は候補が1つも表示されなくなるので自分の打ち間違いにも気づけるようになりました。このように、入力欄への自動入力や選択肢または候補の表示は、効率化とヒューマンエラー防止の両方を達成します。
この例では候補を表示する際に、各候補がそれぞれ過去に何件使われているかという情報をラベルとして表示しています。ラベルにより、入力したいデータそのものだけでなくそれらが何を意味するかという補足情報も表示できるので、よりユーザーフレンドリーにすることができます。またこの例では、候補として表示している値はJavaScriptのソースコードに直書きしているのではなく、このフィルタシステム上の別ページにある条件一覧のリストを非同期通信により毎回取得しています。こうすることで常に最新の情報を候補として表示できます。
（例3）不要なボタンやリンクを非表示にする
日々の業務で使用するWebページに業務上使う場面がないボタンやリンクはないでしょうか。そういったものを非表示にすることで画面がシンプルになり、ミスクリックによる不要な画面遷移という無駄な時間を減らすことができます。
以下の例は我々が使用しているWikiツールのものです。
このツールのページ左側メニューの下部には？マークのボタンがあり、これを押すと公式ドキュメントのページが開きます。しかし我々のログ分析環境はインターネットに繋がっていないためこのページを開くことができず、押すだけ無駄なボタンとなってしまっています。そこでこのボタンは非表示にしました。加えて、Wikiのコメント欄も非表示にしました。これは、Wikiのページに対して聞きたいことがあればそれはチャットツールで誰かに尋ねればよし、Wikiのページに対して情報を残すのであればそれはそのページの本文に追記すればよし、ということで我々の業務上コメント機能を使う場面がなかったからです。
実装に関しては、このように要素を非表示にするだけのような単純な処理ならば、JavaScriptではなくCSSを使って実現すると処理不可が軽くなるので好ましいです。拡張機能の自作およびユーザースクリプトマネージャー使用時には、JavaScriptファイルだけでなくCSSファイルも作成し適用することが可能です。
（例4）便利機能を追加する
ここでは「複数行テキストの入力欄にてタブキーを押した際、次の要素へフォーカスを移す代わりに、半角スペース4個を入力する」という機能をご紹介します。モダンなエディタには大抵、タブキーを押すとインデントを一段下げる機能があります。これと同じ機能がWebページ上の複数行テキスト入力欄でも使えれば便利なのではと思い、自作の拡張機能で実現しました。
この例のテキストボックスはmarkdown形式に対応しており、箇条書きを使う際などインデントの上げ下げは頻繁に行います。その度にスペースキーやバックスペースキーを連打してインデントを調整するのは面倒です。本機能を使うことでドキュメント作成作業のが楽になり、時間短縮にもなります。とても小さな工夫ですが、月に何回も書くものですので、これだけでも心理的には非常に楽に感じます。
実装に関してキーワードだけご紹介すると、タブキーを押してカーソル移動という本来の挙動をさせないためにはpreventDefaultという処理を、ページ読み込み時には表示されておらず後から出てくるテキストボックスを対象に処理を行うためにはMutationObserverという仕組みを使っています。
その他の自作の拡張機能の使用例
その他にも、我々が作成した拡張機能の一部を簡単にご紹介します。
【ミスにつながるようなボタンを誤って実行しないようにする】
不注意や勘違い、エンターキーを連打していたなどの理由で不完全な状態のデータを送信してしまったというようなミスはどんな業務にも起こり得ます。こういったミスへの対策はシステム側で用意されているのがベストですが、常にあるとは限りません。
そういったミスを防ぐために「入力欄のフォーマットチェックの仕組みを用意し、これ満たすまで送信ボタンを無効化状態にする」「送信ボタンクリック時にダイアログを開き、決められたキーワードを入力してからOKを押さないと本来の処理を実行できないようにする」といった、一般にもよく見られる仕組みを自作の拡張機能で実現しています。
【よく使う日付データは1クリックで挿入できるようにする】
我々の業務では「現在時刻から〇日後に△△をする」というような作業のための日付データの入力をよく行います。ですがこれを毎回手入力したり、カレンダー形式のフォームから入力したりするのは面倒です。そこで拡張機能を用いて「押すと現在時刻からちょうど7日後の時刻が入力されるボタン」といったものを日付データ入力の横に用意し、作業を楽にしています。
また、1つのボタンを押した際に値が自動入力される入力欄が1箇所だけである必要はありません。業務内容がパターン化しており、このパターンのときにはフォームAにはこの値、フォームBにはこの値、…と決まっているならば、そのパターンに合わせたボタンを用意し、ボタンを1回押すだけで複数のフォームにそれぞれの値が自動入力されるようにするととても便利です。
【作業の概要を自動でまとめ用ページに記載する】
これまでの例よりも多少凝った自動化の例をご紹介します。我々の業務はシフト制であり、交代のタイミングで前の時間帯に何があったかを引き継ぐ作業を行います。この際にいわば日報のような、今日何があったかをまとめたページを作成して使用します。ですがこれをいちいち分析担当者が手入力して作成するのは面倒ですし、抜け漏れにつながります。そこで拡張機能を用いてこれを自動で作成しています。処理内容をごく簡単に説明すると以下のようになります。
①まとめ用ページをAPIで操作できるよう準備する
我々はWikiシステム上のページへ自動書き込みを行っていますが、チャットツールへの投稿や、Microsoft 365上のドキュメントへの書き込みでもよいかと思います。書き込みの際に使用するAPI keyを拡張機能のソースコードに直書きするのはセキュリティ的にあまり好ましくないので、そうする場合は権限を可能な限り絞ったアカウントのAPI keyを使うようにしましょう。
②まとめ用ページを自動で更新する共通の仕組みを作る
我々の場合は更新内容を表す一行程度の文章とそのページのURLをまとめ用ページに追記させる仕組みとしています。処理としてはまとめ用ページの現在の内容を取得し、それにまだ反映されていない分の情報を追記してまとめ用ページを更新する、というシンプルなものです。
③まとめ用ページに掲載すべき情報がアップされた直後のタイミングで②を呼び出す機能をシステム毎につくり、まとめ用ページを更新する。
まとめ用ページに掲載する情報は様々なシステムから集める必要がありますが、方式としては各システム側で情報がアップされた際に、システム毎に②を呼び出す仕組みとしています。これは、システムによってまとめ用ページに記載したいタイミングなどの処理が異なるためであり、システムごとに任意のタイミングで処理を走らせられる柔軟性を担保しています。
おわりに
以上、SOC業務改善のためのWebブラウザ拡張機能開発における、特にその実装の考え方についてご紹介いたしました。今回ご紹介したもの、できなかったもの合わせて多数の拡張機能を自作し、その一括管理の仕組みも含め、日々の業務をより楽に、ミスのないものに改善しています。本記事を読まれた方の業務改善に繋がる情報共有となっておりましたら幸いです。