【Laravel】"{{ }}"二重括弧は何に使うの?

どーも!たかぽんです!

今回は僕がLaravelを触り始めて最初にえ?っとなった"{{}}"について解説していこうと思います!

触り始めのかたはようわからんけどこうすれば表示できるから使ってます。っていう方も多いのでは・・・?

しっかり理解しましょう!

二重波括弧"{{}}"とは・・・?

はい、それでは早速結論から。

二重波括弧"{{}}"はPHPのecho(値を表示する関数)と同じ働きをします!

つまり、色々表示したい時に使えるよ〜ってことなんですが...

laravelでは別に"{{}}"つけなくても文字はかけるし、そもそものechoだって使えるじゃん?

そうなんですね...

bladeファイル中に以下のように書くだけで文字の表示は可能です。

<?php echo $hoge; ?>

じゃぁなんのため...?

実はこれがすごい大切です。

"{{}}"を使うとその値を”エスケープ"して出力することができるんです!

この"エスケープ"でセキュリティ対策ができるんです。

セキュリティについても軽く知っておくとより理解が進むかと思います。

今回問題となるのはXSS(クロスサイトスクリプティング)という攻撃です。

簡単にいうとJavaScriptやHTMLを悪意のある人が仕掛け、それに第三者(サービス閲覧者)が引っかかり、悪意のあるスクリプトを実行してしまう脆弱性です。

わかりやすいサイトさんのリンクを貼っておきますので詳細が気になる方はぜひ!

laravelではXSSへの対策として、変数の出力時にJavascriptやHTMLが実行されないようにできます。

それが"エスケープ"です。

とはいってもわかりづらいですよね。

次節で例を交えてお伝えします。

実例で確認

では実例をみていきましょう!

laravelのtopページにて簡単な例を試します!

コントローラーに以下の変数を定義し、値をviewへ渡します。

//bladeに渡す値
$tech = 'てくてくテック';
$script = '<script>alert("悪さするぞぉ〜?");</script>';

view側で表示してみましょう。(welcome.blade.php)

<div class="title m-b-md">
  {{ $tech }}
</div>
{{ $tech }}を表示した時の画面
<div class="title m-b-md">
  {{ $script }}
</div>
{{ $script }}を表示した時の画面

そのまま表示されますね!

え?当たり前って?

では次はPHPのechoを使って表示してみましょう。

<div class="title m-b-md">
  <?php echo $tech; ?>
</div>
<?php echo $tech; ?>で表示した画面

まぁ、普通ですね。

では次!

<div class="title m-b-md">
  <?php echo $script; ?>
</div>

!?
<?php echo $script; ?>で実行した画面

おろろ....

Javascriptのalertが実行されてる...((((;゚Д゚)))))))

そして表示したい箇所には何も表示されていません...

そう、これがXSSの原因になってしまうんです...

例えば投稿掲示板の発言として、

”<script>悪意あるページへのリダイレクト(有名サービスのログインを求める偽フォーム等)</script>”

みたいな感じで、投稿されるとします。

サーバー側で特にチェックせず、先程のコントローラーの変数として値が入り、DBへ保存。

そのDBに保存された値が投稿一覧画面に表示されます。

もしここで、エスケープをしていなかったら...

その投稿が本来表示されるページへアクセスした人は、全員偽ページへリダイレクトされ、”googleアカウントへログインが必要です。”等のメッセージと一緒に偽の入力フォームが出てきたら...

一体何人が入力してしまうでしょうか・・・?(もちろん入力して送信したらパスワードは抜き取られますね....)

ただ、表示をする時に"{{}}"のようにスクリプトが文字として出力されたなら、たとえそれをみた人がクリックしようと何しようと、あくまで文字列なのでスクリプトが実行されず、大丈夫なんです!

まぁ、サービスとしてなんか変な文字出てきて表示バグってるな?とかは思われるかもしれませんが...!

そういった”エスケープ”ができるのが"{{}}"なんです!

そのため、ただの文字列を直接ブレードへ記載する場合なんかは別になくてもいいですが、特に変数を出す場合はつけておくべきでしょう。

"{{}}"でエスケープさせたくない場合

余談ですが、"{{}}"を使用していてもあえてエスケープをさせたくない場合があるかもしれません。

その場合は前述のechoを使うか、あるいは"{{!! !!}}"を使います。

<div class="title m-b-md">
  {!! $script !!}
</div>

こうした場合はエスケープをさせずに表示させることが可能です。

(ただし、使う場合は別途XSS対策を施すべきでしょう。)

まとめ

さて、"{{}}"を使って”エスケープ”できました!

また、”エスケープ”によってXSS攻撃に対する対策ができることもわかりましたね!

そこらへんを端折って、"{{}}"を使えばXSS対策できる〜みたいに言われたりします。

にしても、laravelのbladeは便利です...!

普段当たり前のように使っている"{{}}"ですが、つかってるときにエスケープしてるんだな?って意識するとさらにいいかもしれませんね!

ぜひ皆さんも少し試してみて、ご自身で違いを理解しておきましょう!

それでわ!

おすすめの記事