seummin_ 공부 노트

JSON 3

문제

문제해석

</를 입력하면 <\/로 치환되며 이전의 JSON 문제들과 같이 ", \ 와 같은 문자들 앞에 백슬래쉬가 붙는다.

console.log("입력한 문자열")이 들어가게 되며

#을 기준으로 같은 스크립트가 하나 추가되게 된다.

풀이

HTML파서는 문자들을 읽으면서 어떠한 상태에 있는지 파악한다.

일반적으로 읽는 문자들은 Data state상태로 인식하게 되며

<script>와 같은 문자를 읽게 되었을 때 script data state로 파서의 상태가 바뀌게 되어 자바스크립트를 읽을 수 있게 된다.

https://www.w3.org/TR/html50/syntax.html

위의 페이지에서 <script>태그에서 하나하나씩 따라가다보면 script data double escaped state란 것을 볼 수 있다.

Data state에서의 상태 변화

data state + <script>    ->   Script data state

Script data state + <!--    ->    Script data escaped state

Script data escaped state + <script>  ->   Script data double escaped state

Script data double escaped state 상태 일때

- </script>   ->   script data escaped state

- -->   ->   script data state

Script data escaped state 상태 일때

- </script>   ->   data state

- -->   ->   script data state

Script data state, Script data escaped state, Script data double escaped state 는 모두 자바스크립트로 문자를 해석하게 된다.

이를 이용해서 문제를 해결하게 되면

Input에 <!--<script>를 입력하여 script data double escaped 상태에로 바꾼 후 원래 있던 </script>를 만나

Script escaped state 상태로 변하게 된다.

다시말해서 </script>로 닫혔음에도 불구하고 아직 뒤에 오는 문자열이 자바스크립트로 해석되는 것을 의미한다.

#을 입력하여 뒤에 <script>가 추가되어 다시 Script data double escaped state 상태가 되며 원하는 값을 입력 할 수 있게된다. 

#뒤에 input으로 

<script>console.log("<!--<script>")</script><script>console.log("    입력될 문자열 에서

빨간색 부분은 console.log로 출력

<는 비교연산자의 역할

보라색부분은 정규표현식으로 입력할 문자열에서 마무리 지어 주면서 alert를 추가하면된다.

Input : <!--<script>#)/+alert(1)//-->

그냥생각

HTML파서로서 읽는 것

js파서로서 읽는 것을 이해하는게 아직은 힘든 것 같다.

-->앞에 왜 //를 붙여야하지..