[Pug] 동적으로 html tag 렌더링하기

React app을 express에서 server side rendering하는 과정에서 string으로 변환한 app을 pug에 삽입하는 방법을 잘 몰라 해맸다.

String Interpolation, Escaped

기본적으로 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: &lt;span&gt;escape!&lt;/span&gt;</p>

String Interpolation, Unescaped

하지만 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>

태그가 잘 삽입된 것을 확인할 수 있다.

Plain Text

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}

참고 및 출처

• [Pug Docs] String Interpolation, Unescaped - 바로가기
• [Pug Docs] Piped Text - 바로가기
• [Pug Docs] Block in a Tag - 바로가기
• 교차 사이트 스크립팅 공격 방어 (웹 개발하면서 처리해야할 보안, 최소한의 방어, 정보보안 中) - 바로가기