React app을 express에서 server side rendering하는 과정에서 string으로 변환한 app을 pug에 삽입하는 방법을 잘 몰라 해맸다.
기본적으로 Pug는 String Interpolation에서 escape을 지원한다. 특수문자를 escape 처리해주기 때문에 이로 인한 잘못된 출력을 방지하고 XSS(교차 사이트 스크립팅) 공격 등을 방어할 수 있다.
- var title = "On Dogs: Man's Best Friend";
- var author = "enlore";
- var theGreat = "<span>escape!</span>";
h1= title
p Written with love by #{author}
p This will be safe: #{theGreat}
렌더링 결과
<h1>On Dogs: Man's Best Friend</h1>
<p>Written with love by enlore</p>
<p>This will be safe: <span>escape!</span></p>
하지만 ReactDOMServer.renderToString()
으로 생성한 html tag들을 html 문서에 그대로 출력하기 위해서는 escape되서는 안된다. 이 때는 Unescaped String Interpolation을 사용해야 한다.
- var riskyBusiness = "<em>Some of the girls are wearing my mother's clothing.</em>";
.quote
p Joel: !{riskyBusiness}
렌더링 결과
<div class="quote">
<p>Joel: <em>Some of the girls are wearing my mother's clothing.</em></p>
</div>
태그가 잘 삽입된 것을 확인할 수 있다.
Pug는 python처럼 indentation을 통해 parent element와 child element를 구분하는데, rendering하는 과정에서는 element 간의 모든 indentation과 whitespace을 제거하기 때문에 다음과 같이 작성하면 !{props}
때문에 unexpected text 에러가 발생한다.
//- Error: unexpected text
body
div#root !{App}
!{props}
이 때는 Piped Text나 Block in a Tag를 사용해서 작성해주면 된다.
//- Piped Text
body
div#root !{App}
| !{props}
//- Block in a Tag
body
div#root !{App}
.
!{props}