XSS(Cross-Site Script)

​ 크로스 사이트 스크립트의 취약성은 해커가 사용자 브라우저를 컨트롤 할 수 있게 하는 해킹 기법 중 하나 입니다. 브라우저 안에 있는 민감한 개인정보, 계좌정보, 휴대전화번호 등이 해킹당할 수 있습니다. 모던 프레임워크에서는 XSS에 대응하는 방어소스가 구현되어있다고는 하지만 신뢰성이 떨어집니다. ​ XSS는 해커가 위험성있는 데이터를 사용자 브라우저 안에 주입시킬 수 있습니다. 그 주입된 데이터는 현재 페이지의 코드를 해석하고 완전한 제어권을 갖게될 수 있습니다. ​

<div id="messageContainer"></div>
<script>
    $("#messageContainer").append(myMessage);
</script>

​ HTML은 <script>태그를 안에 집어 넣기만 하면 일단 동작이 됩니다. 외부에서 <script>태그가 포함된 문자열을 주입 시키면 script 코드가 실행됩니다. 이러한 방식으로 사용자 브라우저의 민감성 정보를 가져올 수 있습니다. ​ XSS를 막기위한 가장 좋은 방법은 script가 주입되지 않도록 막는 것 입니다. 이것을 위한 방법중 하나는 상황에 맞는 출력 인코딩을 적용하는 것입니다. 인코딩을 하는 동안 위해성 있는 코드를 안정성 있는 코드로 변환할 수 있습니다. ​

XSS 공격법

script 태그 주입

위에서 언급한대로 script 태그 안에 Javascript 소스를 넣어 제어권을 얻는 것을 말합니다. script를 넣음으로써 현재 페이지에 대한 코드를 제어할 수 있게되며, 민감한 정보를 탈취할 수 있습니다. ​

링크 태그로 접근

<a href="javascript:console.log(`hello, xss`)">

링크 태그 안에 javascript를 주입하여 해당 이벤트가 발생 할 때, 함수를 실행시킬 수 있습니다. 이러한 방식으로 XSS공격을 할 수 있습니다.

이외 다양한 기법으로 자바스크립트 코드를 제어해서 사용자의 정보를 가져옵니다. 이러한 공격 방식을 XSS라고 합니다.

React는 자동 이스케이프를 적용합니다.

​ 일반적인 웹소스에서는 XSS에 취약할 수 있지만, React는 React API를 통해 새로운 요소를 생성할 때 React는 잠재적으로 XSS위 위험성을 인식합니다. 자동적으로 페이지의 마지막 부분에 XSS공격을 유발하지 않도록 막습니다. ​ React는 위험한 데이터가 올라가기 전에 인코딩하여 페이지에 접근하지 못하도록 합니다. 이러한 인코딩방식은 XSS 공격에 대한 기본적인 대응 방법입니다. ​ React에서 컴포넌트간 props를 넘겨줄 때, props는 보호된 상태로 넘겨줍니다. XSS공격으로 오브젝트 내 변수 및 속성을 변경시키려고 할때, React는 그것을 감지하고, input되는 것을 거부합니다. ​

let color = 'red; background-color: blue;'
return React.createElement("p", { style: { color: color }}, 'blue!' );

​ 위 코드는 React.createElement()를 사용해서 DOM을 생성하고 동시에 CSS를 변경하려고 하는 소스입니다. ​ 하지만, 위 코드는 에러가 발생합니다. props에 대한 오브젝트 변경되는 것을 보호하기 위해 렌더링된 후 createElement()에 의한 접근은 허용하지 않는다. ​

JSX 방어

​ React에서 부모 컴포넌트로 부터 받은 데이터를 자식 컴포넌트가 바인딩 할 때, 바인딩 되는 데이터가 XSS에 취향성에 노출 될 수 있습니다. 하지만, React에서는 기본적으로 넘겨주고 받는 데이터를 인코딩하여 위험성있는 데이터로 변환되는 것을 막습니다. ​

return ( <p>{ review }</p> );

​ 컴포넌트가 렌더링 될 때, review에 할당 된 데이터는 p 태그안에 존재한다. 오토 이스케이핑 기능에 의해 위험성 있는 코드로 변환되는 것을 막는다. 심지어 데이터를 변환시켰다 해도 React에서 리렌더링 되는 것을 막아 정보를 노출시키지 않는다.​ ​ ​ ​ ​