blade 템플릿의 `{{`와 `{{{`의 차이점

블레이드 템플릿에서는 화면 출력을 위해서 이중괄호({{..}})와 삼중괄호({{{..}}})를 사용할 수가 있다. 이 두 가지의 차이점은 무엇인가?

다음의 내용을 갖는 블레이드 템플릿 파일이 있다고 하자.

test.blade.php

{{ $name }}<br>
{{{ $name }}}

Laravel에서는 이 파일을 컴파일해서 php 문법 형태로 바꾸고, storages\views 폴더에 저장한다. 파일명이 어떤 규칙으로 만들어지는지는 모르지만, 시점에 따라 다르다.

app\storage\views\d4a296c34e6cf8d084309e4552dbdba0

<?php echo $name; ?><br>
<?php echo e($name); ?>

여기서 보면 이중괄호는 변수 그래도 출력을 하고, 삼중괄호는 e라는 함수를 호출해서 그 반환값을 출력한다. 그럼 e의 정체는 뭘까? e는 helpers.php에 정의되어 있는 함수이고, 소소는 다음과 같다.

vendor/laravel/framework/src/illuminate/Support/helpers.php

...
if ( ! function_exists('e'))
{
    /**
     * Escape HTML entities in a string.
     *
     * @param  string  $value
     * @return string
     */
    function e($value)
    {
        return htmlentities($value, ENT_QUOTES, 'UTF-8', false);
    }
}
...

소스를 보면, e라는 함수는 htmlentities의 축약형으로 보인다. 즉, 삼중괄호를 쓰면 해당 html entity가 존재하는 문자는 html entity로 변환이 돼서 출력된다.

위의 블레이드 템플릿에 의해서 출력된 결과는 다음과 같다. $name 변수에는 'hello' 문자열이 할당되어 있다고 가정하자.

<strong>'hello'</strong><br>
&lt;strong&gt;&#039;hello&#039;&lt;/strong&gt;

이를 브라우저로 보면 다음과 같이 보인다.

'hello'
<strong>'hello'</strong>

정리

정리를 하면, XSS 공격 등 사용자의 악의적인 접근을 막기 위해서는 기본적으로 삼중괄호({{{..}}})를 쓰는 게 맞고, 마크업을 그대로 출력해햐 아는 상황에서는 이중괄호({{..}})를 사용하면 된다.