나다.
이번 글 에서는 타임리프의 utext 라는 문법에 대해 알아 볼 예정이다.
언뜻 보면 th:text와 비슷해 보이지 않는가?
생긴 빠꾸는 비슷하지만 정 반대의 기능을 한다.
먼저 th:utext 의 기능에 대해 알기 위해서는 HTML escape에 대해 알아야한다.
사진으로 보도록 하자.
먼저 컨트롤러에서 Attribute 하나를 던져본다.
@Slf4j
@Controller
public class TestController {
@GetMapping("/test")
public String testPage(Model model) {
model.addAttribute("hi", "hello! <b>world!</b>");
return "test/test";
}
}
// Attribute 안에 HTML 태그를 넣었다.자 이 Attribute를 그대로 받아서 랜더링 한다면 과연 "world!" 는 "world!" 로 출력 될까?
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p th:text="${hi}">이스케이프 테스트 하는 칸임.</p>
</body>
</html>한 번 받아보니
잘못 된 것이 아니라 정상적으로 해석 된 것이다.
즉, HTML escape란 결과를 코드로 인식 하는 것이 아닌 문자 그대로 인식하고 랜더링 하는 것을 이야기
하는 것이다.
타임리프의 관점으로 봤을 때
- (th:text를 보며) Attribute~ "뿌릴게~"
- 어? 이 새기 문장에 태그가 들어있네? ㅋㅋㅋ
- HTML 엔티티~ "넣을게~"
- 위의 사진과 같은 <(<) 와 같은 약속된 문법이 들어감.
HTML은 "<" 기호를 태그의 시작으로 해석한다.
하지만 지금 <p> 태그 안에 들어갈 "<b>world!</b>" 는 태그 안에 들어있는 하나의 문장이다.
그렇다면 "<" 또는 ">" 등의 기호를 문자로로 표현 할 수 있는 방법이 필요할 텐데
이것이 HTML 엔티티이다.
https://www.w3schools.com/html/html_entities.asp HTML 엔티티 표 손으로 적을 일은 사실 잘 없다. |
근데 저는 그냥 태그 작동하게 하고 싶은데요.
그래서 준비 한 것이 이번에 알아볼 th:utext / [(...)] 문법이다.
맞다. 생긴건 th:text / [[...]] 이것들과 한 끗 차이인데 기능은 정 반대의 기능을 가지고 있다.
다시 한번 Attribute를 던지고 이번에는 좀 다른 방식으로 받아보자.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p th:utext="${hi}">이스케이프 테스트 하는 칸임.</p>
</body>
</html>th:text 가 아닌 th:utext 로 결과를 받아본다.
th:utext 로 escape 기능을 꺼버리고 코드로 인식하게끔 만들었다.
개발자도구의 element에서 두 개의 차이를 보도록 하자.
어떤가? th:utext에서는 <b>태그를 하나의 태그로 인식하고 작동하지만
th:text에서는 <b>태그를 문장 속의 문자로 인식하고 랜더링하게 된다.
그래서 이거 언제 씀?
그거야 본인이 필요하다고 판단될 때 가져다 쓰면 된다.
다만, escape 기능의 사용 유무는 꽤나 민감한 사안이다.
예를 들어 유저가 접근 가능한 기능(댓글 또는 게시판 등)에서 escape 기능을 사용하지 않도록 설정하는 경우
유저 또한 태그를 마음대로 사용해 기능을 구현할 수 있는 상태가 된다.
만약 개발자(관리자)의 통제를 벗어난 유저가 저런 볼드체 몇개 집어넣거나 하는 짜잘한 기능이 아닌
악성스크립트(쿠키나 세션 탈취 등)를 가져다 꼽아버린다면?
정보 털린거 뽀록나고 고소 당하면 이 사람 와도 못 이긴다.
그러니 어지간하면 escape를 장착하도록 하자.
글에 틀린 점이 있을 수 있으나 그건 내가 허접이라 그런 것이니 양해를 부탁드린다.
그럼 좋은 하루 보내시길 :)
'Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] 변수 표현식이 뭔데요 (2) | 2022.12.14 |
|---|---|
| [Thymeleaf] 사용하고 싶다면 주입과 설정부터 (0) | 2022.12.13 |
| Thymeleaf(타임리프) 에 대해 알아보자. (0) | 2022.12.13 |