10

以下のHTMLがあります。

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <script>
    //var s = "<!--<script>";
  </script>
  <h1>hello</h1>
</body>
</html>

ここで、"<!--<script>"は単なるJavaScript文字列なので、scriptタグの外側には影響を及ぼさない…と思っていたのですが、実際には

http://codepen.io/anon/pen/rVWeqz

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <script>
    //var s = "<!--<script>";
  </script>
  <h1>hello</h1>
</body>
</html>

のように、本来表示されるはずの「hello」が表示されません。
(<!--や<script>が単体の場合には再現せず、必ずコメント開始からscriptタグに続く必要があるようです)

私の確認したすべてのブラウザ(IE11, Chrome, Firefox)で同じ挙動をしたので、これがHTMLの仕様なのだと思いますが、具体的にはどのような仕様なのでしょう?

--以下追記 2015/05/25 23:56--

いただいた回答に合わせて、追加の疑問点が明確化されたので追記します。

(1) 通常、scriptタグの内部ではHTMLタグは無視されるはずでは? たとえば以下のHTMLで、hiの部分は画面上には表示されません

<body>
<script>
  <p>hi</p>
  var s = "bye";
</script>
<h1>hello</h1>
</body>

http://codepen.io/anon/pen/xGROKJ

<body>
<script>
  <p>hi</p>
  var s = "bye";
</script>
<h1>hello</h1>
</body>

(2) <!--と<script>の組み合わせの場合のみ発生するのはなぜか

「<!--」単体の場合や、<!--<p>といった組み合わせの場合、以降が表示されなくなる現象は発生しません。

2
  • (1) <! ... > は、SGML由来のものでHTMLのタグではないです。
    – BLUEPIXY
    Commented 2015年5月25日 15:21
  • なるほど。SGMLをキーワードに検索したところ、以下のページが見つかりました。 bakera.jp/yomoyama/commentdecl SGMLの注釈宣言はHTMLタグではないので、その解釈は通常のHTMLタグとは異なる…といった内容ですね。 実際、scriptタグの内部で注釈宣言で囲った行は、JavaScriptとして実行されないようです(行コメントだと実行される)。 ちょっとまだ理解が追いついてないですが、注釈宣言はHTMLタグではないというのは覚えておこうと思います。
    – ryo
    Commented 2015年5月25日 16:26

2 件の回答 2

12

<!--<script>が単なるJavaScript文字列である為には、その文字列が<script>ブロックの内側にあるとHTMLパーサが認識している必要があります。

示されているコードはインデントのおかげでJavaScriptであるように見えるだけで、単純なテキストとして上から解釈した時、</script>がどこと対になっているのか判断できません。

これについてはW3Cの中で投稿者のコードとほぼ同じ例を用いた詳しい説明があります。
各ブラウザは不正なscriptタグについて、この例を忠実に再現しているように見えます。

http://www.w3.org/TR/html5/scripting-1.html

4.11.1.2 Restrictions for contents of script elements

When a script element contains script documentation, there are further
restrictions on the contents of the element, as described in the section below.

Code Example:

The following script illustrates this issue. Suppose you have a script that
contains a string, as in:

var example = 'Consider this string: <!-- <script>';
console.log(example);

If one were to put this string directly in a script block, it would violate the
restrictions above:

<script>
  var example = 'Consider this string: <!-- <script>';
  console.log(example);
</script>

The bigger problem, though, and the reason why it would violate those
restrictions, is that actually the script would get parsed weirdly: the script
block above is not terminated. That is, what looks like a </script> end tag
in this snippet is actually still part of the script block. The script doesn't
execute (since it's not terminated); if it somehow were to execute, as it might
if the markup looked as follows, it would fail because the script (highlighted
here) is not valid JavaScript:

<script>
  var example = 'Consider this string: <!-- <script>';
  console.log(example);
</script>
<!-- despite appearances, this is actually part of the script still! -->
<script>
 ... // this is the same script block still...
</script>

What is going on here is that for legacy reasons, <!-- and <script strings
in script elements in HTML need to be balanced in order for the parser to
consider closing the block.

By escaping the problematic strings as mentioned at the top of this section,
the problem is avoided entirely:

<script>
  var example = 'Consider this string: <\!-- <\script>';
  console.log(example);
</script>
<!-- this is just a comment between script blocks -->
<script>
 ... // this is a new script block
</script>

It is possible for these sequences to naturally occur in script expressions, as
in the following examples:

if (x<!--y) { ... }
if ( player<script ) { ... }

In such cases the characters cannot be escaped, but the expressions can be
rewritten so that the sequences don't occur, as in:

if (x < !--y) { ... }
if (!--y > x) { ... }
if (!(--y) > x) { ... }
if (player < script) { ... }
if (script > player) { ... }

Doing this also avoids a different pitfall as well: for related historical
reasons, the string <!-- in JavaScript is actually treated as a line comment
start, just like //.

1

HTMLの上位規格であるSGMLでの注釈宣言と呼ばれるものです。
<! ... > をマーク宣言と言って、この中で2つハイフンで始まり2つのハイフンで終わる部分が注釈として解釈され無視されます。
<!--<script> は、コメントが始まっているがコメントの終わりのハイフン2つがないので、以降の部分がコメントとして無視されてしまっています。(なのでscriptでなくても何でも良い)
だから、
例えば、
//var s = "<!--<script-->"; のようにすれば正しく解釈されて<h1>hello</h1>の部分が表示されるようになるはずです。

4
  • ありがとうございます。<--の後にはscriptタグが来る必要があるようです。全てのタグを確認したわけではないですが、少なくともpタグでは再現しませんでした。
    – ryo
    Commented 2015年5月25日 15:00
  • @ryo よく確認せずにすみませんでした。確かに他のタグの場合再現しませんね。
    – BLUEPIXY
    Commented 2015年5月25日 15:19
  • 理由を説明できてないので投稿を削除しようかと思いましたがとりあえず残しておきます。
    – BLUEPIXY
    Commented 2015年5月25日 15:24
  • 推測になりますけど、おそらくXHTMLでのスクリプト本文の書き方との兼ね合いでそうなるんじゃないかと思います。
    – BLUEPIXY
    Commented 2015年5月25日 15:39

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。