[Vue.js] v-html을 사용하지 마세요.

개요

특히, 사용자가 작성해서 제공하는 콘텐츠(ex. 커뮤니티 게시물)에는 사용자가 작성한 글을 그대로 보여주는 목적으로 v-html을 사용하면 안 됩니다. 사용자가 html 작업으로, 게시글을 읽는 사용자에게 공격을 할 수 있기 때문이죠..;;

 

 

사용자를 믿으면 안 됩니다.

 

 

그래서, v-html 대신, v-text를 주로 사용하고 있습니다.

 

문제점

어떻게 하면, 개행이 들어간 Javascript 스트링 데이터를 화면에 개행이 표시되게 보여줄 수 있을까.

 

사용자가 작성한 글에 개행이 있다면, 작성자 의도대로 화면에 개행까지 들어간 양식 그대로를 보여줘야 합니다.

보통 사용자가 작성한 글을 그대로 서버에서 받아오면, 다음처럼 되어 있습니다.

"\njohn\n\n2022년ㄹㄹ믿ㅈ랴ㅓㅁ지댜러ㅣㅁ;쟈더리;먀젇리;ㅁ쟈ㅓㄷ리ㅑㅈ더ㄹㅈㄷㄹㅁㅈㄹㄹ믿ㅈ랴ㅓㅁ지댜러ㅣ..."

 

이 스트링 데이터를 v-text에 넣는다고, 개행이 살아나지 않습니다.

개행이 엄성요.

 

해결방법

개행을 살리려면, css 코드로 처리할 수 있습니다.

white-space: pre-line;

적용 후.