TIL - day26

마크다운 뷰어

유틸리티 빈을 정의

@Component
public class CommonUtil {

    public String markdown(String markdown) {
        Parser parser = Parser.builder().build();
        Node document = parser.parse(markdown);
        HtmlRenderer renderer = HtmlRenderer.builder().build();
        return renderer.render(document);
    }
}

뷰에서 빈을 사용하기

<div class="card-text" th:utext="${@commonUtil.markdown(question.content)}">내용</div>

th:utext

텍스트를 이스케이프하지 않고 그대로 노출
XSS 공격의 위험이 있으므로 이를 방지하는 라이브러리를 이용해야한다.

securityConfig로 xss방지

http
                .authorizeHttpRequests().requestMatchers(new AntPathRequestMatcher("/**")).permitAll()
                .and()
                .headers()
                .xssProtection()
                .and()
                .contentSecurityPolicy("script-src 'self'")
                .and()
                //....

---

부트스트랩 그리드

부트스트랩은 12그리드를 사용한다.

col-6 : 너비의 6/12를 사용하겠다
row : col을 사용하려면 행이 먼저 지정돼야한다.

<div class="row my-3">
        <div class="col-6">
            <a th:href="@{/question/create}" class="btn btn-primary">질문 등록하기</a>
        </div>
        <div class="col-6">
            <div class="input-group">
                <input type="text" id="search_kw" class="form_control" th:value="${kw}">
                <button class="btn btn-outline-secondary" type="button" id="btn_search">찾기</button>
            </div>
        </div>
  ...
  

---