【Laravel】{{ … }} によるHTMLエスケープ処理の仕組みと注意点

Laravel

Laravelでフロントエンドの実装をしていると必ず目にする {{ ... }} という構文。 これは単に変数を表示するだけでなく、セキュリティ上非常に重要な役割を持っています。今回は、この構文の仕組みと注意点について備忘録としてまとめます。

1. {{ ... }} の基本的な役割

Laravelのブレードテンプレート（.blade.php）において、{{ $variable }} は「データを安全に画面に出力する」ための構文です。

裏側では、PHPの htmlspecialchars 関数が自動的に実行されており、HTMLとして意味を持つ特殊文字（< や > など）を、無害な文字列（エンティティ）に変換（エスケープ）しています。

具体例

例えば、ユーザーが入力したデータに以下のような危険なスクリプトが含まれていたとします。

PHP
// コントローラー側から渡されたデータ
$userInput = "<script>alert('危険な処理');</script>";

これをブレードで出力してみます。

HTML
<div>{{ $userInput }}</div>

実際のブラウザ側の出力（HTMLソース）：

HTML
<div>&lt;script&gt;alert(&#039;危険な処理&#039;);&lt;/script&gt;</div>

このように < が &lt; に変換されるため、ブラウザはこれを「プログラム」ではなく「ただの文字列」として認識し、画面にはそのまま <script>...</script> と表示されます。

2. なぜエスケープが必要なのか？（XSS対策）

もしエスケープ処理を行わないと、悪意のあるユーザーが仕込んだJavaScriptが他のユーザーのブラウザ上で勝手に実行されてしまう「XSS（クロスサイトスクリプティング）」という脆弱性が生まれます。

XSSが発生すると、以下のような被害に遭う可能性があります。

  • クッキー（セッション情報）が盗まれ、アカウントを乗っ取られる
  • 偽のログイン画面を表示され、パスワードを盗まれる

Laravelの {{ ... }} は、デフォルトでこのリスクを自動的に防いでくれています。

3. エスケープせずにHTMLをそのまま出力したい場合

ブログの記事本文や、リッチテキストエディタで作成した装飾付きの文章など、「HTMLタグを有効にしたまま出力したい」ケースもあります。

その場合は、{!! ... !!} 構文を使用します。

HTML

<div>{!! $userInput !!}</div>

⚠️ 重大な注意点

{!! ... !!} はエスケープ処理を完全にバイパス（無効化）します。 そのため、「不特定多数のユーザーが自由に入力できるデータ」に対しては絶対に {!! ... !!} を使用してはいけません。

どうしても使用する場合は、信頼できる管理者が入力したデータに限定するか、事前に Purifier などのライブラリを使って危険なタグを削除（サニタイズ）する処理を必ず挟む必要があります。

4. 【補足】属性値での利用における注意点

HTMLタグの属性値（href や src など）に {{ ... }} を使う場合も注意が必要です。

HTML

<a href="{{ $userWebsite }}">プロフィール</a>

もし $userWebsite の中身が javascript:alert('XSS') のような文字列だった場合、{{ ... }} でエスケープしていても、リンクをクリックした際にJavaScriptが実行されてしまいます（属性値インジェクション）。

URLを出力する場合は、事前に filter_var($url, FILTER_VALIDATE_URL) などを使って、正しいURL形式（http:// や https:// から始まるもの）であるかをチェックするバリデーションが不可欠です。

まとめ

  • 通常は必ず {{ ... }} を使う（自動で htmlspecialchars が適用され安全）。
  • HTMLを反映させたい時だけ {!! ... !!} を使う（ただし、ユーザー入力値には絶対に使わない）。
  • 仕組みを正しく理解して、脆弱性のない安全なLaravel開発を心がけましょう。

コメント