セキュリティ4 択難易度 標準

最も優先すべき指摘は？

const q = new URLSearchParams(location.search).get('q');document.querySelector('#result').innerHTML =  `「${q}」の検索結果`;

正答

1. q が無いとき「null」と表示されるので、空文字に置き換えるべき
2. querySelector より getElementById のほうが速いので書き換えるべき
3. innerHTML は描画が遅いので、検索結果の表示には向いていない
4. q をそのまま HTML として入れており XSS になる。textContent で入れる

解説

q は URL から誰でも自由に指定できる値で、それを innerHTML に入れると、q に書いたタグがそのまま HTML として解釈される。細工した URL を踏ませれば、そのページの中で任意のスクリプトを動かされ、画面の書き換えや情報の持ち出しにつながる（XSS）。textContent に入れれば、< や > も文字として表示される。HTML を組み立てる必要があるときは、出力する時点でエスケープする。null の表示は見た目の問題、getElementById との速度差や innerHTML の速さはごく小さく、脆弱性より優先する指摘ではない。

参考: cheatsheetseries.owasp.org

xssinnerhtmljavascript