LaravelのBladeでHTMLエスケープ・非エスケープを切り替える方法

1. BladeのHTMLエスケープとは？（セキュリティ対策）

1. BladeのHTMLエスケープとは？（セキュリティ対策）

Bladeテンプレートで `{{ $変数 }}` を使うと、自動でエスケープ処理が行われます。エスケープ処理とは、HTMLタグや特殊文字を文字列として安全に扱う仕組みです。XSS（クロスサイトスクリプティング）攻撃と呼ばれる、悪意あるスクリプトが実行されるリスクを防ぐために重要です。

例えば、ユーザーが入力した内容に `<script>alert('危険')</script>` があった場合、エスケープされてそのまま表示されず、安全に表示されます。

2. 生のHTMLを表示したいときは？{!! !!}

2. 生のHTMLを表示したいときは？{!! !!}

Bladeでは `{!! $変数 !!}` を使うと、**エスケープせずにそのままHTMLを出力**できます。非エスケープなので、HTMLタグやスタイルがそのまま反映されます。フォーム入力などでは注意が必要です。

3. safeExample：使い分けを簡単に理解しよう。

3. safeExample：使い分けを簡単に理解しよう。

// コントローラ例
public function show()
{
    $safe = '<strong>太字テキスト</strong>';
    return view('sample', ['safe' => $safe]);
}

<p>エスケープ表示：{{ $safe }}</p>
<p>非エスケープ表示：{!! $safe !!}</p>

実行結果：

エスケープ表示：<strong>太字テキスト</strong>
非エスケープ表示：太字テキスト

4. いつ使い分けるの？

4. いつ使い分けるの？

■ ユーザー入力やコメントなど、外部からのデータは常に `{{ }}` でエスケープして安全に表示することが基本です。

■ 管理者だけが書くような信頼できるHTMLを表示したいときは `{!! !!}` を使うと便利ですが、XSSに注意してください。

5. Bladeとセキュリティの基本ルール

5. Bladeとセキュリティの基本ルール

1. いつもエスケープ（`{{ }}`）で表示する
2. 非エスケープ（`{!! !!}`）は必要最低限の場面だけ使う
3. 外部入力にはサニタイズ（無害化）処理を追加する

このルールを守ることで、脆弱性を未然に防ぐことができ、安心して表示をコントロールできます。

6. 用語のやさしい説明

6. 用語のやさしい説明

エスケープ： < を &lt; のように変換して「文字として」処理。

非エスケープ：HTMLタグをそのまま出力。見た目どおり。

XSS：悪意のあるスクリプトが混ざった状態で出力されると、ユーザーに不正処理をされる攻撃。

7. 最後にチェックリスト

7. 最後にチェックリスト

• ユーザー投稿はすべて `{{ }}` で表示しているか？
• 信頼できるHTMLのみ `{!! !!}` で表示しているか？
• 非エスケープを使うときにサニタイズ処理を追加しているか？

まとめ

まとめ

本記事では、LaravelのBladeテンプレートにおけるHTMLエスケープと非エスケープの使い分けについて、初心者の方でも無理なく理解できるように丁寧に整理しました。Webアプリケーションでは、画面に表示する内容が「安全な文字として扱われるべきものなのか」「意図的にHTMLとして描画したいものなのか」を判断する力がとても大切です。Bladeでは、通常の二重波括弧である{{ }}が自動エスケープを担い、HTMLタグなどを無害な文字として扱えるため、XSSのような攻撃から守る役割を果たします。一方、非エスケープ構文である{!! !!}は、生のHTMLをブラウザに描画させたい場面でとても便利ですが、安全に扱うには十分な注意が求められます。

特に初心者の段階では、表示される内容がどのように扱われているかを具体的にイメージしづらいことが多いため、実際にサンプルプログラムを動かしながら違いを体感することが理解の近道になります。例えば、太字や色付きの文字、リスト構造などをどのようにBladeが解釈して画面に反映させているのかを知ると、HTMLエスケープの重要性がより実感しやすくなります。逆に、非エスケープ構文をむやみに使用してしまうと、意図しないスクリプトが実行される危険性があり、ユーザーの情報が盗まれたり、想定しない動作が起きる可能性があります。そのため、Bladeが提供する二つの出力方法の違いを正しく理解して使い分けることは、Laravel学習のみならず、Webアプリ全体の品質と安全性を守るうえで重要な基礎となります。

ここでは、より理解を深めるための簡単なサンプルを紹介します。コントローラで渡したHTMLタグが、Bladeの書き方によってどのように違った形で画面に表示されるのかを確認できる例です。

サンプルコードで理解を深めよう

public function preview()
{
    $html = '<span style="color:red;">重要なお知らせです</span>';
    return view('preview', ['html' => $html]);
}

<p>エスケープ表示：{{ $html }}</p>
<p>非エスケープ表示：{!! $html !!}</p>

このサンプルを実行すると、エスケープ表示では赤文字のタグがそのまま文字として表示され、非エスケープ表示では赤色のテキストとして正しく装飾された状態で描画されます。これにより、BladeがどのようにHTMLを扱っているのかが直感的に理解できるでしょう。

また、表示する内容がユーザー入力なのか、管理者が設定した安全なHTMLなのかを判断する習慣をつけることも大切です。特にユーザーが投稿するコメント欄や問い合わせフォームなどでは、必ずエスケープされた状態で表示し、非エスケープを使う場合はサニタイズ処理などを追加して安全性を確保することを心がけましょう。LaravelのBladeは非常に扱いやすく、明快な記述で画面表示をコントロールできるため、正しい使い方を身につけると開発がより快適になり、安全なWebアプリケーションの構築につながります。

HTMLエスケープと非エスケープの仕組みを理解することは、Laravelに限らず、フロントエンド・バックエンドのどちらでも求められる基礎知識です。特にXSS攻撃を防ぐ観点からも、この部分の理解は非常に重要です。今回学んだポイントを押さえながら、実際のプロジェクトでどう使い分けるべきかを意識していくと、より安全で信頼性の高い画面表示が実現できます。