Page tree

그러면 위의 할일 정보 뷰를 블레이드로 변경해 보겠습니다. 라우트 설정은 변경하지 않아도 되며 뷰 파일만 새로 만들면 됩니다.

task/view.blade.php
<!doctype html>
<html lang="ko">
 <head>
     <meta charset="UTF-8">
     <title>Ok</title>
 </head>
 <body>
     <h1>할일 정보</h1>
     <p> 작 업: {{ $task['name'] }} </p>
     <p> 기 한: {{ $task['due_date'] }} </p>
 </body>
</html>

기존의 PHP 변수를 출력하는 기능인 <?= $var ?> 대신 블레이드의 함수인 {{  $var }}로 변경하면 동일한 기능을 수행할 수 있습니다. 

resources/view 폴더에 동일한 위치에 view.php 와 view.blade.php 가 있을 경우 라라벨은 우선적으로 블레이드 템플릿 파일을 사용합니다.


블레이드의 기본 출력 기능은 간결하고 사용이 쉽지만 추가로 보안 측면에서도 큰 장점이 있습니다. 할일을 공개할 수 있도록 하고 여기에 사용자의 의견을 받도록 하고 뷰에 표시하는 기능을 추가하기로 했다고 가정해 보겠습니다.


사용자의 의견 항목(comment)에 아래와 같은 데이타가 들어 왔다고 가정하여 라우트 파일을 수정하고 이 데이타를 바로 뷰로 전달합니다.

routes.php
Route::get('task/alert', function() {
    $task= ['name' => '라라벨 예제 작성', 
			'due_date' => '2015-06-01 11:22:33', 
			'comment' => '<script>alert("Welcome");</script>'];
   
	return view('task.alert')->with('task', $task);
});


이제 resources/views/task/alert.blade.php 파일을 만들고 comment 라는 항목을 추가로 보여 주도록 수정합니다. 

resources/views/task/alert.blade.php
<!doctype html>
<html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Ok</title>
 </head>
 <body>
     <h1>할일 정보</h1>
     <p> 작 업: {{ $task['name'] }}</p>
     <p> 기 한: {{ $task['due_date'] }}</p>
     <p> comment: <?= $task['comment'] ?></p>
 </body>
</html>

추가된 comment 항목은 변수를 출력하는 php 태그인  <?= ?> 를 사용하고 있습니다. 이제 브라우저로 연결해 보면 다음과 같이 사용자의 입력이 자바 스크립트로 처리되어 경고창이 뜨는 것을 확인할 수 있습니다.

css 공격 예제

사용자에게 받은 입력값을 검증 없이 사용할 경우 공격자가 악의적인 동작을 하는 자바스크립트를 끼워 넣을 수 있습니다. 만약 애플리케이션이 이를 제대로 처리하지 않으면 이 페이지에 연결하는 사용자는 이 악의적인 자바스트립트를 실행하게 되고 이로 인해 해당 페이지에 연결한 사용자는 정보 유출이나 해킹을 당할 수 있습니다. 이런 공격 방법을 사이트 간 스크립팅(CSS ; Cross-Site Scripting) 라고 하며 웹 애플리케이션 개발한다면 꼭 막아야 하는 흔한 공격 방식입니다. 

CSS는 Cascading Style Sheets 와 혼동되므로 XSS 라고 쓰는 경우도 많습니다.


이제 comment 항목을 블레이드의 템플릿 문법에 맞게 {{ }} 로 수정해 보겠습니다. 

<p> comment:   {{ $task['comment'] }} </p>

브라우저로 연결하면 자바 스크립트가 실행되지 않고 문자열로 표시되는 것을 알 수 있습니다.

XSS 차단을 위한 컨텐츠 수정

웹 페이지 소스를 보면 다음과 같이 < 문자는 &lt; 로 " 는 &quot;  로 > 는 &lt; 로 변경되었음을 알 수 있습니다. 이렇게 사용자의 입력을 받아서 HTML 에 출력할 경우 새너타이징(Sanitizing) 이라고 하는 처리를 꼭 해줘야 합니다. 새너타이징은 '소독하다' 라는 의미로 HTML의 원래 구조를 바꾸거나 파괴하는 문자열을 제거하거나 해롭지 않은 문자열로 변환하여 안전하게 만드는 과정을 의미합니다.  

입력값 소독


블레이드의 기본 변수 출력 함수인 {{ }} 를 사용하여 사용자의 입력값을 처리하면 라라벨은 입력값을 PHP 의 htmlentities 함수에 전달하여 위험한 문자를 소독하여 주므로 XSS 공격을 막아낼 수 있습니다.

라라벨 4.2 에서 문자를 소독하려면 대괄호를 세 개({{{ }}}) 사용해야 했고 {{ }} 는 사용자의 입력을 그대로 출력하는 것이었으나 5.0 에서는 {{ }} 과 { } 모두 사용자의 입력 문자를 소독하도록 변경되었습니다.

만약 문자를 소독하지 않고 그대로 출력할 경우 {!! $ var !!} 형식을 사용하면 되며 이는 Form 이나 Html 을 출력하는 라라벨 함수를 호출할 경우에 사용하면 됩니다.

 

블레이드에서 변수 출력을 정리하면 아래의 표와 같습니다.

블레이드 문법PHP 문법용도
{{ $var }}<?php echo htmlentities($var); ?>새너타이징된 문자 출력
{{{ $var }}}<?php echo htmlentities($var); ?>새너타이징된 문자 출력
{!! $var !!}<?php echo $var; ?>원래 문자 출력
블레이드 변수 출력 정리

라라벨은 헬퍼 함수중 문자열을 소독하는 e() 함수를 제공하고 있으며 블레이드에서 {{ $var }} 구문을 발견하면 라라벨의 e() 헬퍼 함수로 변환합니다.

 

Ref