Update 20251028b_【PoC】Vue_+_DuckDB-Wasm_+_ECharts_によるセキュリティ投資判断アプリ.md

source/_posts/2025/20251028b_【PoC】Vue_+_DuckDB-Wasm_+_ECharts_によるセキュリティ投資判断アプリ.md

@@ -16,6 +16,8 @@ lede: "経営者がセキュリティ投資判断をしやすくする簡易ダ
 
 こんにちは、CSIG（Cyber Security Innovation Group）所属 の松本です♪
 
+フロントエンド初心者ですが [Vue連載](https://future-architect.github.io/articles/20251016a/) で頑張ってみました。
+
 現在専門ドメインはセキュリティです。もともとデータのセマンティックに関心がありますが、加えて最近では脅威モデリングや脅威インテリジェンスに注目しています。
 
 今回は、経営者がセキュリティ投資判断をしやすくする簡易ダッシュボードを構築しました！使用するデータ量が多くなってもブラウザで固まらず、今後の拡張性も加味した構成にしたかったため [WASM (WebAssembly)](https://developer.mozilla.org/ja/docs/WebAssembly) を組み込んでいます。開発プロセスで遭遇するセキュリティ豆知識も掲載しているので、記事を通して一緒に学んでいければと思います。
@@ -57,12 +59,12 @@ lede: "経営者がセキュリティ投資判断をしやすくする簡易ダ
 
 <iframe width="560" height="315" src="https://www.youtube.com/embed/jUJgXRPqGQQ?si=9A9N8BlqrtPkfNiS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
-**【経営者ビュー】**
+###【経営者ビュー】
 投資対効果を検討するため、その対策を行ったときの想定損失低減率を縦軸、１つの対策で自社の資産をどの程度（範囲/規模）守ることができるのかのカバレッジを横軸に4象限で区分けし、現状に即したセキュリティ投資対象を選別することを想定しています。バブルチャートは投資割合を表しており、左下の基準(1)となる円より大きければ過剰投資、小さければ投資不足を意味します。つまり、右上の "IDEAL AREA" に基準円と同じ大きさの円があれば、**最適な投資対象** に **最適な投資額** を投じていることになります。具体的な数値は、カーソルオン時のポップアップに記載しています。
 
 <img src="/images/2025/20251028b/image.png" alt="image.png" width="1200" height="551" loading="lazy">
 
-**【技術者ビュー】**
+###【技術者ビュー】
 経営者に根拠をもって説明するため、技術的脅威（attack technique）と防御策と対象資産を網羅的に紐づけ、防御策の有効性を可視化することを想定しています。クリックすると、各ノードは該当するMITREのリンクへアクセスしてくれます。
 
 <img src="/images/2025/20251028b/21eb3673-f334-4431-9977-1871ffb96a81.png" alt="" width="1200" height="587" loading="lazy">
@@ -87,7 +89,7 @@ lede: "経営者がセキュリティ投資判断をしやすくする簡易ダ
 ### 関連用語
 
 - **SPA（Single Page Application）**
-処理の多くをサーバーと通信せずにブラウザ内（クライアントサイド）で完結させ、ページ遷移なしの高速なUIレスポンㇲを実現するアプリケーション全般を指します。
+処理の多くをサーバーと通信せずにブラウザ内（クライアントサイド）で完結させ、ページ遷移なしの高速なUIレスポンスを実現するアプリケーション全般を指します。
 - **DuckDB**
 もともとは、データ分析（大量のデータを読み込んで集計や計算をすること）に特化した、高速なデータベースです。「データ分析版SQLite」のような存在です。[操作デモ](https://shell.duckdb.org/) をweb上で行うことができるので是非使用感をお試しください。
 - **WASM (WebAssembly)**
@@ -208,7 +210,7 @@ duckdb-graph-spa/
 
 Viteは、モダンなWeb開発で使われる非常に高速な開発ツール（ビルドツール）です。下記設定ファイルを使って、Viteの動作をプロジェクトに合わせてカスタマイズします。オプションがさまざまあるので [こちら](https://ja.vite.dev/config/shared-options.html) を参考に使いこなしてみましょう。
 
-#### クロスオリジン分離
+**クロスオリジン分離**
 
 処理を高速化させたい場合に、DuckDB-WASM のマルチスレッド機能を利用するため COEP/COOP ヘッダーを設定することでデフォルトではセキュリティ面（Spectre脆弱性）から無効化されている SharedArrayBuffer を有効化することができます。が、「自ドメイン以外のリソースを読み込む際に、相手側が読み込み許可と宣言してくれていないと、ブラウザがブロックする」という制限がかかります。そのため、許可宣言を記載をすべてのリソースに行わないといけないのでかなり大変です。ここに高速処理とセキュリティのトレードオフを垣間見ました...。最初知らずに設定し続けていたため、画面に何も表示されず沼にはまりました(´;ω;｀) (3Dグラフィックスの計算などはWASM-Thread高速処理設定が必要だったりするのですかね...今回はそこまでの量を扱ってないので利用せず)
 詳細解説は [こちら](https://blog.agektmr.com/2021/11/cross-origin-isolation.html)
@@ -279,7 +281,7 @@ tooltip: {
     },
 ```
 
-こちらは、**ノード（点）** と **リンク（線）** で構成されるデータの関係性を分かりやすく表現している箇所です。
+こちらは、**ノード（点）** と **リンク（線）** で構成されるデータの関係性を表現している箇所です。
 
 ```html 力学指向ネットワーク図
 ~~~（中略）~~~
@@ -332,7 +334,7 @@ DuckDB-WASMは **Parquet形式** の読み込みに最適化されています
 
 ※今回利用しているデータは一般公開情報を元にしたサンプルデータとなります。
 
-### 参考資料
+## 参考資料
 
 https://duckdb.org/docs/stable/clients/wasm/instantiation
 https://duckdb.org/docs/stable/clients/wasm/data_ingestion