参考サイトを見るとHTMLElement.innerHTMLは脆弱性があるようで対策が必要なようですが、コードをどのように変更すればよいか分かりません…
アドバイスお願い致します。
※参考サイト
https://gihyo.jp/dev/serial/01/javascript-securi …
<script>
function lengthCheck() {
const left = this.dataset.maxlength - this.value.length;
if (left >= 0) {
this.nextElementSibling.innerHTML = 'あと<strong>' + left + '</strong>文字';
this.dataset.submit_disabled = this.value.length === 0;
} else {
this.nextElementSibling.innerHTML = '<strong>' + -left + '</strong>文字超過しています';
this.dataset.submit_disabled = true;
}
let disabled = false;
for (let i = 0; i < length_input.length; i++) {
if (length_input[i].dataset.submit_disabled === "true") {
disabled = true;
}
}
submit_button.disabled = disabled;
}
/* カメラ画像をファイルアップロード時に非表示にする */
const attach = document.querySelectorAll('.attach');
const del = document.querySelectorAll('.attachdel');
const clear = document.querySelectorAll('.attachclear');
const viewer = document.querySelectorAll('.viewer');
const changeImg = document.querySelectorAll('.changeImg'); // 入力されたら消す画像
for (let i = 0; i < attach.length; i++) {
attach[i].addEventListener('change', () => {
if (attach[i].files[0].size > 15 * 1024 * 1024) {
alert('ファイルサイズが 15MBバイトを超えています');
return;
}
del[i].value = "";
viewer[i].innerHTML = "";
if (attach[i].files.length !== 0) {
const reader = new FileReader();
reader.readAsDataURL(attach[i].files[0]);
}
});
clear[i].addEventListener('click', () => {
attach[i].value = "";
del[i].value = "1";
viewer[i].innerHTML = "";
changeImg[i].classList.remove('hideItems');
});
}
</script>
No.2ベストアンサー
- 回答日時:
innerHTML を使う場合は、
たとえ問題のない値しか使わないと分かっていたとしても、
HTMLのエスケープ処理を行いましょう。
後の改修にて脆弱性が生まれる余地をなくすためです。
ブラウザの標準機能にエスケープ関数が無いので独自に用意しましょう
例)
function escapeHTML(値) {
_ var a = document.createElement('span');
_ a.textContent = 値;
_ return a.innerHTML;
}
要素.innerHTML = '<strong>' + escapeHTML(文字列) + '</strong>';
参考)
安全なウェブサイトの作り方 - クロスサイト・スクリプティング
https://www.ipa.go.jp/security/vuln/websecurity/ …
根本的解決
5-(i) ウェブページに出力する全ての要素に対して、エスケープ処理を施す。
アドバイスありがとうございます、Ogre7077さんのコードを元に調べながらコードを書いてみたのですが正しいのか分かりません、アドバイスお願い致します。
名前もコメントも同じクラス(msg_partial)内に文字数を数字で出力しているのですが、クラスはそれぞれ別である必要はありますでしょうか?
※名前
<input class="length_input" data-maxlength="<?php echo MAX_LENGTH::NAME; ?>" id="name" value="<?php echo $namae; ?>">
<div class="msg_partial"></div>
※コメント
<textarea class="length_input" data-maxlength="<?php echo MAX_LENGTH::MESSAGE; ?>" id="message"><?php echo $message; ?></textarea>
<div class="msg_partial"></div>
※修正コード
function lengthCheck() {
const left = this.dataset.maxlength - this.value.length;
if (left >= 0) {
const a = document.querySelectorAll('msg_partial');
return a.innerHTML;
this.nextElementSibling.innerHTML = '<strong>' + escapeHTML(left) + '</strong>文字';
this.dataset.submit_disabled = this.value.length === 0;
} else {
const b = document.querySelectorAll('msg_partial');
return b.innerHTML;
this.nextElementSibling.innerHTML = '<strong>' + escapeHTML(-left) + '</strong>文字超過';
this.dataset.submit_disabled = true;
}
No.1
- 回答日時:
こんばんは
>HTMLElement.innerHTMLは脆弱性があるようで対策が必要なようですが、~
サイトに説明があるように、脆弱性はinnerHTMLに設定する内容が(完全には)制御できない内容である場合です。
ご提示の内容がスクリプト部分だけでなので、特に、lengthCheck関数はどのように呼び出されているのかも不明で、this値がどうなっているのか不明なので、はっきりとはしませんけれど・・
innerHTMLが使われているのは、
>this.nextElementSibling.innerHTML = '<strong>' + -left + '</strong>文字超過しています'; --①
>viewer[i].innerHTML = ""; --②
の部分だけと思います。
②はクリアしているだけなので、問題にはなりません。
①は、変数leftが数値であることが保証されているように思われますので問題ないのでは?
どうしてもinnerHTMLを避けたいのであれば、
Document.createTextNode
を利用してテキスト化した要素をappendするように変更すれば、HTMLタグなどはエスケープされ、文字列化されますので安全でしょう。
https://developer.mozilla.org/ja/docs/Web/API/Do …
A.アドバイスありがとうございます、値が制御されていない場合必要ということでしょうか?メッセージは500文字、名前は50文字という数値をthis.dataset.maxlengthに当てはめております。
②は問題ないんですね勉強になりました。Document.createTextNodeを使用する方法も考えてみます。
<div class="title-partial">
<h2>名前(name)<span class="required">※必須</span></h2>
<input class="length_input" data-maxlength="<?php echo MAX_LENGTH::NAME; ?>" type="text" name="namae" id="name" placeholder="未入力の場合は、匿名で表示されます" value="<?php echo $namae; ?>">
<div class="msg_partial"></div>
</div>
<div class="body-partial">
<h2>コメント(comment)<span class="required">※必須</span></h2>
<textarea class="length_input" data-maxlength="<?php echo MAX_LENGTH::MESSAGE; ?>" name="message" id="message" placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください"><?php echo $message; ?></textarea>
<div class="msg_partial"></div>
</div>
class MAX_LENGTH
{
public const NAME = 50;
public const MESSAGE = 500;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript JavascriptでXSSの脆弱性への対策を行いたい 2 2023/08/31 22:28
- JavaScript JavascriptでDom XSSの脆弱性対策を行いたい 2 2023/09/24 21:20
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript javascript ループがうごかない 2 2021/10/25 16:19
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
テキストフィールド未入力の場...
-
ボタン押下しテキストエリアに...
-
javaScriptの変数をJavaの変数...
-
追加ボタンを押した際に ok ボ...
-
VBScriptで子画面へ配列のデー...
-
ボタンをクリックして文字を置...
-
クリックさせたいが、click()が...
-
ボタンかリンクをクリックする...
-
if構文
-
JavaScript Form OPTION value
-
vbsでフォーム入力ができません
-
小窓が残像を残して移動
-
ひとつのボタンでタイマーを動...
-
innerHTML内では改行は禁止?
-
BackSpaceしたい(QNo.2734284の...
-
プルダウンで選択したページに...
-
formのfileの値をhiddenでも持...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
iOSのみダブルタップが必要
-
onclickが動作しない
-
追加ボタンを押した際に ok ボ...
-
ボタンかリンクをクリックする...
-
innerHTML内では改行は禁止?
-
クリックさせたいが、click()が...
-
javaScriptの変数をJavaの変数...
-
formのfileの値をhiddenでも持...
-
JavascriptでDOM-based XSSの発...
-
クリックでテーブル内の背景色...
-
VB.NETで<Input>タグ、<text...
-
開いた子ウィンドウにあるボタ...
-
jQueryで設定したイベントハン...
-
javascriptで作成されたテーブ...
-
HTMLのテキストボックスへのド...
-
テキストフィールド未入力の場...
-
JavaScriptのfileオブジェクト...
-
JSのボタンを複数う使うには
-
オンクリックで現在時刻の取得→...
おすすめ情報