【Laravel】改行を含む入力内容を表示する方法と注意点

2019年8月21日

改行を含む複数行文字列を表示したい。

フォームの確認画面などを用意する場合、ユーザに入力してもらった内容をそのまま表示したいですよね?
1行の文字列なら以下のように表示すれば良いのですが、改行を含む複数行文字列だったりすると改行が取り除かれてしまいます。

    {{ $hoge }}

以下のようにすることで改行を含めた内容を表示することができます。

    {!! nl2br($hoge) !!}

nl2br()は文字列の中の改行文字の前に改行タグ<br>を挿入してくれるphpの関数です。
例えば、以下のような文字列があった場合。

    hoge\nhoge\r\nhoge

nl2br()を通すことで
が挿入され以下のようになります。

    hoge<br>\nhoge<br>\r\nhoge

更に{!! !!}で囲むことでHTMLタグをエスケープさせないことができます。
これによって
が改行としてブラウザに認識され、以下のように改行した状態で表示することができるわけです。

    hoge
    hoge
    hoge

改行を含んだ文字列を表示する場合の注意点

これまでは先に記載したように複数行文字列を表示していたのですが、これでは問題が発生することがわかりました。

{!! !!}で囲むことでHTMLタグがエスケープされず、入力フォームにHTMLタグを入力された場合にそれをそのままHTMLとして読み込んでしまうのです。

<button>ほげほげ</button>と入力されればボタンになってしまいます。

これを悪用するとスクリプトタグなどを埋め込み、JavaScriptを実行させることもできてしまいます。XSS(クロスサイドスクリプティング)という攻撃です。

自身の環境で試してみたところ、スクリプトを実行することはできませんでしたが、注意が必要です。(Laravelで勝手に弾いてくれている?)

XSSを防ぎながら改行を表示するには以下のようにする必要があります。

{!! nl2br(e($hoge)) !!}
  • e()でサニタイズ
  • nl2br()
    タグ挿入
  • {!! !!}でエスケープなしでそのまま表示

上記のようにすることで改行以外をサニタイズすることができます。

おしまい。