javascript - 자바스크립트란 - 주요 렌더링 경로




브라우저는 어떻게 스크립트 태그를 정확히 파싱합니까? (3)

HTML이 아닌 것으로 표시하지 않는 한 태그 내용은 HTML입니다. HTML에서 <word> 는 태그로 취해지고, <&lt; 이 동작을 피하려면 또는 <script> 의 내용을 텍스트 노드로 만들고 싶습니다. 이 공식을 사용하십시오 :

<script type="text/javascript">
//<![CDATA[
  // your code, with < and & and "", woohoo!
//]]>
</script>

<![CDATA[ ... ]]> 는 마크 업없이 문서의 일부를 순수 텍스트로 윤곽을 나타냅니다. 자바 스크립트가 혼란스러워지지 않도록 슬래시가 있습니다. 첫 번째 세트의 슬래시는 CDATA 외부에 있지만 HTML에 안전하므로 아무런 문제가 없습니다.

편집 : 그냥 파싱에 대한 질문은 HTML을 작성하지 않는 것을 깨달았다. 죄송합니다.

나는 HTML 구문 분석으로 병리학 적 사건을 겪었다. 저는 항상 <script> 태그가 첫 번째 닫기 </script> 태그까지 실행될 것이라고 생각했습니다. 그러나 이것이 항상 그런 것은 아닙니다 .

유효합니다 :

<script><!--
alert('<script></script>');
--></script>

그리고 이것은 유효합니다.

<script><!--
alert('<script></script>');
</script>

그러나 이것은 아닙니다 :

<script><!--
alert('</script>');
--></script>

그리고 이것도 마찬가지입니다.

<script>
alert('<script></script>');
</script>

이 동작은 Firefox와 Chrome에서 일관됩니다. 따라서 믿기 어려울 정도로 브라우저는 스크립트 태그 내부의 HTML 주석 내부에 공개 + 닫기 스크립트 태그를 허용하는 것으로 보입니다. 그래서 질문은 브라우저가 실제로 스크립트 태그를 어떻게 파싱합니까? 이것은 Nokogiri가 사용하고있는 HTML 파싱 라이브러리가 명백한 (그러나 올바르지 않은) until-the-first-closing-tag 규칙을 가정하고이 엣지 경우를 처리하지 않았기 때문에 중요합니다. 나는 다른 대부분의 도서관도 그것을 처리하지 않을 것이라고 상상한다.


가설에 따르면 태그가 먼저 구문 분석되고 주석이 나중에 구문 분석되면 HTML 구문 분석기가 결과를 제공합니다.

(필자는 이것이 반드시 필요한 경우에 불과하다는 것을 의미하지는 않습니다.)

첫 번째 경우

<script><!--
alert('<script></script>');
--></script>

다른 <script></script> 안에는 <script></script> 있습니다. 파서는 먼저 태그의 이름을 무시하고 태그의 적절한 개폐를 검사합니다. 그런 다음 주석을 구문 분석합니다.

<script><!--
--></script>

그래서 이것은 유효합니다.

2 번째의 경우

<script><!--
alert('<script></script>');
</script>

다른 <script></script> 안에는 <script></script> 있습니다. 그런 다음 주석을 구문 분석합니다.

<script><!--

주석은 문서 ​​끝까지 확장됩니다. 이것은 엄격하게 유효하지는 않지만 브라우저가 올바르게 처리합니다.

제 3의 경우

<script><!--
alert('</script>');
--></script>

<script></script> 집합 내에 하나의 종료 태그가 있습니다. </script> 를 주석으로 분석하기 전에 무효화됩니다.

넷째 경우

<script>
alert('<script></script>');
</script>

다른 <script></script> 안에는 <script></script> 가 있으며 주석은 없습니다. 첫 번째 패스는 유효하지만 태그가 실제로 무엇인지 확인합니다. 하나의 <script> 태그를 다른 태그 안에 포함 할 수 없으므로 대소 문자가 무효화됩니다.


Tim 과 Jukka가 제공 한 링크를 보면서 다음과 같은 답을 얻었습니다.

  • 여는 <script> 태그 이후에 파서는 data1 상태로 간다.
  • 데이터 1 상태에서 <!-- 이 발생하면 데이터 2 상태로 전환합니다
  • 어느 상태에서든 --> 가 발생하면 data1 상태로 전환합니다.
  • data2 상태에서 <script[\s/>] 가 발생하면 data3 상태로 전환합니다
  • data3 상태에서 </script[\s/>] 가 발생하면 data2 상태로 전환합니다
  • 다른 상태에서 </script[\s/>] 가 발생하면 구문 분석을 중지합니다






html-parsing