innerHTMLのセキュリティ問題について

Question

以下1番目のようなコードがあり、悪意のあるユーザーが入力するユーザ名などにスクリプトなどが埋め込まれていた場合、ブラウザは何の疑いもなくそのスクリプトを実行してしまうので
セキュリティ上問題なのは、よくわかるのですが

２番目のコードについてはボタンをクリックして要素の再構築をしている部分で悪意があるユーザーがtext-msg.innerHTMLの部分にscriptを入れてしまうので、サニタイズが必要になると授業で習ったのですがいまいちよくわかりません。

どうやってユーザー入力もない部分のtext-msg.innerHTML = "タグの中身を変更しました！"という内部コードをいじれるのでしょうか？

const { username, password } = await api.getUser();
const userInfo = document.createElement('div');
userInfo.innerHTML = `${username}, ${password}`;

<div id="text-msg"> 変更前</div>
<input type="button" value="Click" onclick="myfunc()">

 <script>
      const myfunc = function(){
 
        const text_msg = document.getElementById("text-msg");
        text_msg.innerHTML = "タグの中身を変更しました！";

      }
 </script>

Comments

[hentaiman]

どこ情報？

[Lhankor_Mhy]

api.getUser() はどういうふるまいをするのですか？

[m.ts10806]

デベロッパーツールで調べてみては。

[m.ts10806]

変数名にハイフンは使えないので２番目はそもそも動かないのでは。

[退会済みユーザー]

すみません、_になってませんでした

Answer 1

サニタイズが必要になると授業で習ったのですがいまいちよくわかりません。

２つ目の例は固定文字列を代入しているので何の危険もありません。文字列が < や & を含んでないことも明らかなのでサニタイズも必要ありません。授業の講師が言ったことを間違って解釈しているか、講師が間違ったことを言っています。

参考までに、innerHTML で挿入した <script> は実行されません。イベントハンドラ属性やjavascript: URLなどでコードを実行することはできるのでやはり注意は必要ですが。

Comments

[退会済みユーザー]

ご回答ありがとうございます！
そうですよねぇ....HTML5 では innerHTML で挿入された <script> タグは実行されないですよね...

ただ
const image = "<img src='x' onerror='alert(1)'>";
el.innerHTML = image;
は実行されるからとごまかされました...

Answer 2

そもそも論ですが、後者のコードは文法的に成立しません。

// マイナスでトークンが切れて引き算になるけど、ここで引き算を入れるのはおかしいので文法エラー
const text-msg