JSX와 XSS공격

JSX의 특징

• REACT에서 UI를 렌더할 때 사용한다.
• 문자열 리터럴이 사용 가능하다.
• JSX Element를 자식으로 넘겨줄 수 있다.
• React DOM에서 렌더링하기 이전에 이스케이프가 일어나 XXS 공격을 방지 가능하다.
• 컴포넌트의 재사용으로 유지보수가 용이하다.

JSX의 문법의 변환

return (
    <div>
      <h2>JSX Start</h2>
      <Expenses expenses={expenses}/>
    </div>
  );

위의 HTML 코드처럼 보이는 JSX 문법을 자동으로 JavaScript 코드로 변환된다.

JSX 문법을 사용하지 않는 경우는 다음과 같다.

  return React.createElement(
    'div',
    {},
    React.createElement('h2',{},"JSX Start"),
    React.createElement(Expenses, {expenses: expenses})
  );

React.createElement(component, props, ...children) JSX에서 태그나 컴포넌트를 만들었을 때, 실제로 변환되는 코드

XSS(Cross Site Scripting)

크로스 사이트 스크립팅 공격은 블로그나 게시판 같은 서비스에서 주로 일어나며 여러 사람들이 보는 글에 스크립트를 주입해서 사용자의 정보(쿠키, 세션)를 탈취하거나 비정상적인 기능을 수행하게 한다.

예)

보통 이 문제를 해결하기 위해서 이스케이프를 사용한다.

이스케이프란?

<은 &lt;
>은 &gt;
"은 &quot;

HTML에서 '<,>'을 태그의 시작으로 인식하기 때문에 뒷부분이 에러가 나서 제대로 렌더링이 되지 않는다. 이런 상황들을 고려해 원래의 기능에서 벗어난 문자열로 문자를 변환하여 의도대로 구문 분석하게 한다.

즉, JSX에서는 DOM이 렌더링 되기 이전에 이스케이프가 일어나므로 XXS 공격에 안전하다.

const title = "Study"
//XXS 공격에 안전합니다.
const element = <h2>{title}</h2>

참고자료

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

https://ko.reactjs.org/docs/jsx-in-depth.html

JSX 이해하기 – React