JS 로 HTML DOM 생성시 ' 나 " 등 들어있으면 어떻게 처리해야 하나요??

Question

JS 로 HTML DOM 생성시 ' 나 " 등 들어있으면 어떻게 처리해야 하나요??

예를들면 아래와 같이 body 안에 임의로 생성한 html 을 추가하고 싶습니다.

다만 아래처럼 중간에 " 나 ' 이 들어가있거나

특히나 어떠한 function 을 저 안에서 실행해야 하는 경우 아래 처럼 String Type 파라미터를 넣어야 하는 경우

계속 깨져서 몹시 불편합니다.

1. 아래와 같이 다양한 ' 나 " 등이 포함되는 경우 편하게 처리 가능한 방법이 있을까요??

2. 이러한 방식으로 동적 생성시 XSS 공격 등 보안상 혹은 기능상 이슈가 생길 여지가 있을까요??

>> 있다면 처리 방법도 같이 부탁 드립니다.

3. 추가적으로 이러한 동적 생성을 쉽게 하거나 좋은 방법이 있는지도 궁금합니다.

Ex)

html = "<div onclick="somting_fuc('1',2,'aa','cc')">"

$('body').append(html);

Answer 1

1. 아래와 같이 다양한 ' 나 " 등이 포함되는 경우 편하게 처리 가능한 방법이 있을까요??

- ES5 이전

jQuery(function($) { let html = "<div onclick=\"console.log('1',2,'aa','cc')\">click</div>"; $('body').append(html); });

- ECMA 2015 버전

jQuery(function($) { let html = `<div onclick="console.log('1',2,'aa','cc')">click</div>`; $('body').append(html); });

2. 이러한 방식으로 동적 생성시 XSS 공격 등 보안상 혹은 기능상 이슈가 생길 여지가 있을까요??

XSS는 공격자가 스크립트를 넣는 기법이라 무관합니다.

3. 추가적으로 이러한 동적 생성을 쉽게 하거나 좋은 방법이 있는지도 궁금합니다.

vue를 사용해 보는 것도 좋은 방법일 듯 합니다.