【Laravel】"{{ }}"二重括弧は何に使うの?
たかぽん
どーも!たかぽんです!

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

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

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

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

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

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

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

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

そうなんですね...

bladeファイル中に以下のように書くだけでechoが使えるんです。

<?php echo $hoge; ?>

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

実はこれがすごい便利なんですが、"{{}}"を使うことでその中にある値を”エスケープをして出力”することができます。

エスケープとは...?

それを知るためにはセキュリティについて知る必要が...

WebサイトではXSS(クロスサイトスクリプティング)という攻撃に気をつける必要があります。

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

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

そして、laravelではそういったXSSの対策の1つとして、出力する時に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の原因になってしまうんです...

例えば投稿掲示板に”このサイトやばくない?w”とか投稿して、それと一緒に上記のalertより悪質なスクリプトを混ぜ込みます。(これで$text等の変数に値が入ります)

そしてその投稿をみた人はそのURLを踏むと(悪意のあるスクリプトが入った$text等を出力しているので、実行され)、”googleアカウントへログインが必要です。”等のメッセージと一緒に入力フォームが出てきたら...

一体何人が入力してしまうんでしょうね・・・?(もちろん入力して送信したらパスワード漏出です。

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

そういった”エスケープ”ができる出力が"{{}}"でできるんです。

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

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

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

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

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

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

まとめ

さて、"{{}}"を使うことで”エスケープ”できることがわかりました!

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

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

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

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

また、暇があればぜひ皆さんも少し試してみて、ご自身で違いを理解しておくことをオススメしておきます!

それでわ!

おすすめの記事