8

javascript(coffeescript)を使い、ajaxで取得したhtmlコードをinnerHTMLでDOM要素に突っ込んでいます。 このとき、htmlコードの中にscriptタグを入れていてもjavascriptが実行されないのですが、

  1. 実行されないのは標準の挙動でしょうか?それともブラウザが気を利かせていての挙動でしょうか?
  2. セキュリティを考慮した上で意図したスクリプトだけ実行させるにはどうすればいいでしょうか?

以前にハマったんだけどうやむやにしてたら今日またハマって、たぶん時間かけて調べてもまた結局わからずじまいになりそうなうえにこれ理解してないのまずい気がするので、どうか怒らないで教えてください。

3 件の回答 3

12
  1. 実行されないのは標準の挙動 (仕様通り) です。

    実行条件は 4.11.1 The script element に記載されていますが、script 要素の srcasync などの属性の有無や、script 要素の生成方法など、様々な条件を網羅して記述されているため、きちんと読むのは正直結構しんどいです。

    ただ、innerHTML を使ったケースでは「実行されない」という結果については、ちょうど Note に記述されています:

    Note: When inserted using the document.write() method, script elements execute (typically synchronously), but when inserted using innerHTML and outerHTML attributes, they do not execute at all.

    なお、実行はされずとも script 要素はきちんと DOM ツリー上に作られています。

  2. 意図したスクリプトを実行するためには、element.innerHTML のようなHTML文字列をパースして自動的に DOM 要素を作るインタフェースは用いずに、@kleaf さんの回答 のように document.createElementdocument.createTextNode (または node.textContent )で script 要素を構築するのが間違いないかと思います。これならば実行されないという条件に入らないので。

    逆に、意図せずスクリプトが実行されないようにするためには、やはり innerHTML ではなく document.createTextNode を使って、入力値から DOM 要素を作らせない (テキストしか作らせない) ようにすればいいです。そうではなく、入力値から安全に DOM 要素を生成するという要件であれば、スクリプト文字出力時のエスケープ処理を行う必要があります。

2
  • DOMツリー上に作られているのは確認していて、それがかえってわからない原因になっていました。 意図せずに実行されない方法、意図的に実行する方法、ともによくわかりました。あとは自分で調べたり実験したりいろいろできそうです。 ありがとうございました。 Commented 2014年12月29日 2:32
  • @Ichiro Hari より高度な制御方法の例としては jQuery の .html() の実装とか参考になります。このメソッドは単なる element.innerHTML とは異なり、.html('<div><script>alert();</script></div>') のようにして渡された <script> タグ内のスクリプトを実行できます。 その大まかな仕組みとしては、一先ず引数文字列をから innerHTML を用いて DOM 要素を作ってから改めてこの DOM 要素中を走査し、script 要素があった場合はそのテキストノードを eval する、ということをしています。
    – keik
    Commented 2014年12月29日 8:10
2
  1. innerHTMLscriptタグを入れても動かない原因は、ブラウザが一度その中身をDOMとして解釈を試みるからです。scriptタグはうまく解釈されないため、おそらく取り除かれるのでしょう。

  2. については色々な方法があるでしょうが、例えば以下のようにすると動きます。(もしかするとFirefox以外のブラウザでは動かないかもしれません。)

    var name = "<img src=x onerror=alert(1)>";
    el.innerHTML = name; 
    

    cf. Element.innerHTML - Web API Interfaces | MDN

尚、英語版にも似たような質問がありましたので、一応貼っておきます。

javascript - Can scripts be inserted with innerHTML? - Stack Overflow

2
  • 1
    Chrome,IEでも動作することが確認できました:)
    – hinaloe
    Commented 2014年12月28日 17:21
  • なるほどonerrorとかで実行する手がありましたね。それは気づきませんでした。 Commented 2014年12月29日 2:35
1

2 に関して、以下の様なコードは実行可能でした。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function append(code){
            var script = document.createElement('script');
            script.innerText =code ;
            script.textContent = code;
            document.body.appendChild(script);
        }
    </script>
</head>
<body>
<button onclick="append('alert(10);');">xxx</button>
</body>
</html>

セキュリティを考えるのであれば、コードを受け付けるよりもjsonなど値だけ受け取る形がいいと思います。

1
  • やっぱりそうですよね。HTMLの中にscriptが入っていて、それを明示的に実行したいという構造そのものに無理があるんですよね。 Commented 2014年12月29日 2:34

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

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