tellogs.com

Web開発でのHTMLエンティティ変換活用

HTMLエンティティ変換

Web開発の現場では、HTMLエンティティ変換を日常的に使用します。フロントエンド開発では、ユーザーが入力したテキストを画面に表示する前にエンティティ変換を施すことで、XSS脆弱性を防ぎます。ReactやVue.jsなどのフレームワークは自動エスケープ機能を持っていますが、dangerouslySetInnerHTMLなどを使用する場合は開発者自身が変換を管理する必要があります。

バックエンド開発でも事情は同じです。サーバーサイドでHTMLを生成する場合は、テンプレートエンジンのエスケープ機能を適切に設定することが重要です。Ruby on RailsやDjango、Laravelなどのフレームワークではデフォルトでエスケープが有効になっていますが、raw出力を指定した箇所は脆弱性の温床になり得ます。

APIレスポンスとしてHTMLを返すケースもあります。REST APIやGraphQLで取得したデータをフロントエンドでHTMLとして描画する際は、API側でエンティティ変換を行うか、クライアント側でサニタイズ処理を施す必要があります。どちらのアプローチを取るかは、アーキテクチャの設計段階で決定すべき事項です。

テスト自動化の観点からも、エンティティ変換の正しい理解は重要です。E2Eテストやユニットテストで、特殊文字を含む入力値が正しく変換されることを検証するテストケースを用意しておくと、セキュリティホールの早期発見につながります。

HTMLエンティティ変換を使ってみましょう

このページの内容を、HTMLエンティティ変換で実際に試してみましょう。

HTMLエンティティ変換を開く