Draw.io Viewer: CDN vs ローカルホストのセキュリティ比較

背景

DrawioViewerコンポーネントで使用する viewer-static.min.js（約3.6MB）の読み込み方法として、以下の2つの選択肢がある。

// 方式1: CDN（外部サーバー）
script.src = 'https://viewer.diagrams.net/js/viewer-static.min.js'

// 方式2: ローカルホスト（自サーバー）
script.src = '/js/viewer-static.min.js'

CDN方式のセキュリティリスク

1. サプライチェーン攻撃（中〜低リスク）

概要: CDNサーバーが侵害された場合に、悪意のあるコードが配信される可能性がある。

実際の事例:

• 2021年 ua-parser-js事件: npmパッケージが乗っ取られ、暗号通貨マイナーが注入された
• 2022年 Heroku/Travis CI事件: OAuthトークンが盗まれ、npmパッケージが改ざんされた
• 2024年 polyfill.io事件: CDNが買収され、悪意のあるコードが配信された（最も関連性が高い）

Draw.ioの場合のリスク評価:

• Draw.ioはJGraph社が運営する信頼性の高いサービス
• 大企業でも採用されており、セキュリティ意識は高い
• ただし「絶対に安全」とは言えない

影響: 侵害された場合に、ページを閲覧したユーザーのブラウザで任意のJavaScriptが実行される可能性がある（XSS相当）

2. CDNダウン時の可用性リスク（低リスク）

概要: CDNがダウンした場合、図が表示されなくなる。

Draw.ioの場合:

• diagrams.netは高可用性インフラを使用
• ダウン時は図が表示されないだけで、サイト全体は動く
• 実用上ほぼ問題にならない

3. CSP（Content Security Policy）の緩和（低リスク）

概要: 外部スクリプトを許可するため、CSPヘッダーを緩和する必要がある。

# CDN使用時に必要なCSP
script-src 'self' https://viewer.diagrams.net;

影響: CSPが緩くなることで、他の攻撃ベクトルが増える可能性。ただし、特定ドメインのみ許可するので影響は限定的。

リスクの現実的な評価

このサイト（mdx-playground）の場合

リスク比較表

結論と推奨

このサイトの場合: CDN方式で十分

理由:

1. リスクが低い: 個人ブログで機密情報なし、攻撃対象として魅力がない
2. Draw.ioの信頼性: 大手企業でも採用されている信頼性の高いサービス
3. polyfill.io事件との違い: polyfill.ioは買収されたが、Draw.ioはJGraph社が継続運営
4. 管理コスト: ローカルホストは更新忘れのリスクがある

ローカルホストが推奨されるケース

以下の場合はローカルホストを検討:

• 金融・医療など機密性の高いサイト
• 認証情報を扱うサイト
• 企業のセキュリティポリシーで外部スクリプト禁止の場合
• オフライン環境での動作が必要な場合

実装方法

CDN方式に変更する場合

// DrawioViewer.vue の loadViewerScript 関数内
script.src = 'https://viewer.diagrams.net/js/viewer-static.min.js'

ローカルファイルは削除:

rm apps/web/public/js/viewer-static.min.js

ローカル方式を維持する場合

ファイルをgitにコミット:

git add apps/web/public/js/viewer-static.min.js
git commit -m "chore: add viewer-static.min.js for draw.io support"

定期的な更新（推奨: 3-6ヶ月ごと）:

curl -L "https://viewer.diagrams.net/js/viewer-static.min.js" \
  -o apps/web/public/js/viewer-static.min.js

参考: サプライチェーン攻撃の事例

polyfill.io事件（2024年）

最も関連性の高い事例。

• 経緯: polyfill.ioドメインが中国企業に買収された
• 影響: CDNから悪意のあるコードが配信され、10万以上のサイトが影響
• 対策: Cloudflare/Fastlyが代替CDNを提供、多くのサイトがローカルホストに移行

Draw.ioとの違い:

• polyfill.ioは個人プロジェクトから始まり、運営が不安定だった
• Draw.ioはJGraph社が商用サービスとして運営、買収リスクは相対的に低い

ua-parser-js事件（2021年）

• 経緯: npmアカウントが乗っ取られ、暗号通貨マイナーが注入された
• 影響: 週間800万ダウンロードのパッケージが数時間汚染された
• 教訓: 人気パッケージでも信頼しすぎてはいけない

まとめ

このサイトではCDN方式を推奨。セキュリティと利便性のバランスが良い。