DOM のサンプルプログラム

2021年1月31日2021年3月1日

DOM(Document Object Model)はドキュメントをプログラムから操作･利用可能な仕組みです。つまり JavaScript で HTML を操作出来ます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOMテスト</title>
</head>
<body>
    <p id="dom_change01">ここのテキストが5秒後に切り替わります。</p>
    <script>
        setTimeout(function(){
            domc01 = document.getElementById("dom_change01").firstChild;
            domc01.data = '<B>DOOOOOOOOM!!!!!</B>';
        },5000);
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOMテスト</title>
</head>
<body>
    <script>
        function domclickButton(){
            document.getElementById("dom_change02").innerHTML="<B>DOOOOOOOOM!!!!!</B>";
        }
    </script>
    <input type="button" value="押してください" onclick="domclickButton()">
    <p id="dom_change02">ここのテキストが切り替わります。</p>
</body>
</html>

上記のように、data プロパティに値を設定する方法だと値はプレーンテキストとして扱われます。

innerHTML プロパティに値を設定する場合プレーンテキストではなく HTML として解釈・展開されるので表現力があります。逆に言うと、意図しない HTML が展開された場合、意図しないスクリプトの実行に繋がる恐れがあります。

このような、DOM を通じた HTML 操作の結果として、意図しないスクリプトが実行されることや、それを許す脆弱性を指して Dom Based XSS と言います。