JavascriptでXSSの脆弱性対策を行いたい

質問

JavascriptのXSS対策としてinnerHTMLでHTMLのエスケープ処理コードを書いてみたのですが、正しいのか分かりませんアドバイスお願い致します。

※名前HTML
<div class="msg_partial">あと<strong>50</strong>文字</div>

※コメントHTML
<div class="msg_partial">あと<strong>500</strong>文字</div>

※該当コード

<h2>名前<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>

<h2>コメント<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>

※エスケープ処理を追加
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.27

AsarKingChang · ベストアンサー

<div class="submit_button_validation submit_button_validation1">残り<span></span>文字入力できます。</div>
<div class="submit_button_validation submit_button_validation2"><span></span>文字超過しています。</div>

このまま代入しちゃえばいいんですよ！。
submit_button_validation1だけを使って
innerHTML="残り<span>"+v+"</span>文字入力できます。";
の時と、
innerHTML="span>"+v+"</span>文字超過しています。";
の時を、ifで制御すればOKですよ。
vを「escapeHTML(文字列)」するかは、自由ですが。
手っ取り早いのは(v | 0)だけでもいいかも。
＃なぜなら、vは数字を前提としてるので、それ以外を
考慮する必要はないですから。
「escapeHTML(文字列)」これを使うのは、
外部から来た情報に対してです。
だから、ユーザーが入力したものは絶対に表示しない！
って言ったのです！！

もう、そろそろ、完成じゃないかな？

補足

アドバイスありがとうございます、ifで入力文字数が制限を超えているかいないかでHTML表示を分岐するように考えてみたのですが、
表示するHTML部分は空白でも問題ないのでしょうか？
HTML表示で文字が入力されるまで空の状態にしておいて、入力後に表示するということで window.onload = function() {} のコードを参考にいたしました。window.onload = function() {} は動かない原因になりうるため
window.addEventListener('DOMContentLoaded', function() {} を代用するように変更しております。
画像のアップロード機能が名前、メッセージの前になるので、参考サイトのどちらのコードを使えばよいのか分からず教えて頂けると助かります。

回答No.26でデバッガーでステップ実行をするようにアドバイス頂いたと思うのですが、今回はボタンの活性または非活性にする機能と文字数の表示分岐部分は分けて考えております。
(v | 0)というのがどのような意味があるのか分からないので教えて頂きたいです。

※参考サイト
https://took.jp/window-onload/

<div class="title-partial parts"> <!-- title-partial + parts -->
<h2>名前(name)<span class="required">※必須</span></h2>
<div class=parts>
<input class=submit_button type="text" type="text" name="name1" id="name" data-length=32 placeholder="未入力の場合は、匿名で表示されます" value="<?php echo $namae; ?>">
<div class="submit_button_validation submit_button_validation"></div>
</div>

<div class="body-partial parts"><!-- body-partial + parts -->
<h2>コメント(comment)<span class="required">※必須</span></h2>
<div class=parts>
<input class=submit_button type="text" name="name2" id="message" data-length=40 placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください"><?php echo $message; ?>
<div class="submit_button_validation submit_button_validation"></div>
</div>

<script>
function validation_submit(f) {
const submit = document.getElementById("submit_button");
/* 判定は逆なので、逆に渡す */
/*JavaScriptの要素を活性または非活性にする */
submit.disabled = f?false:true;
};

function validation_text(parts) {
/* このpartsグループの、input=textを抽出 */
/* HTML要素を取得 */
let text=parts.getElementsByClassName('submit_button')[0];
/* バリデーション警告パーツを抽出 */
let validation=parts.getElementsByClassName('submit_button_validation')[0];

validation.style.display = 'none';

/* 例えばのチェック */
window.addEventListener('DOMContentLoaded', function() {
let wao = document.getElementsByClassName('submit_button_validation');
const left = text.dataset.length-text.value.length;
if (left >= 0) {
/* ひとまずclassは複数配置できる形式なので、見つかった最初の1個目にアタッチ */
wao[0].innerHTML="残り<span>"+v+"</span>文字入力できます。";
text.value.length === 0;
} else {
/* そのまま、2個目にアタッチ */
wao[1].innerHTML="<span>"+v+"</span>文字超過しています。";
}
})
};

/* バリデーション条件判断部分 */
function validation() {
let parts = document.getElementsByClassName('parts');
let submit=true;
for (let i=0;i<parts.length;i++) {
if (validation_text(parts[i])!=true) {
submit=false;
}
}
validation_submit(submit);
};

/* DOM構築が終わってから呼び出される初期化関数 */
function init() {
// let text = document.getElementById('submit_button');
// text.oninput = e_text;

/* ↑これを、idじゃなくてclass対応に変更↓ */

/* class=parts内の class=submit_buttonに対して設定 */
let parts = document.getElementsByClassName('parts');
for (let i=0;i<parts.length;i++) {
parts[i].getElementsByClassName('submit_button')[0].oninput = validation;
}
validation();
};

window.onload = init;
</script>

※回答No.20でv1,v2,v3をまとめたい際に教えて頂いたコード
<script>
window.onload = function() {
let wao = document.getElementsByClassName('wao');
/* ひとまずclassは複数配置できる形式なので、見つかった最初の1個目にアタッチ */
wao[0].innerHTML="えい<span>や～</span>た～";
/* そのまま、2個目にアタッチ */
wao[1].innerHTML="はらほろひれはれ～";
}
</script>

回答No.16

AsarKingChang

> ※function () {}について
> https://qiita.com/kerupani129/items/b2c3619856b048c13394

私の方、どっちも書かないのでなんとも。
function 何か？(ローカル変数) {
this.変数1=ローカル変数;
this.変数2=ローカル変数;
this.変数3=0;
};
何か？.prototype.何か２=function(ローカル変数) {
this.変数1=this.変数2+ローカル変数;
};
みたいに宣言して、

外ならvar、中ならlet で
let abcd=new 何か？(ローカル変数);
のように初期化しておいて、
それをwindowオブジェクトに接続してます。
その後、varまたはletは、
windowオブジェクトから参照されてるので、
実体化部分は、ガべージャーに食わせる。
そういう意味では、varは余計に使わないですね。
>2.2. クラスやオブジェクトのメソッド定義を使う (object-shorthand)
これに近い。
ただこの書き方だと、コンストラクタがないので、
それ自体を関数オブジェクトとしてるだけかな。
（ただし、私が書いてる書き方、相当古く、
　JavaScript1.2位の世代かも＾＾）

なお、いろんな書き方がありますが、
どれが「正解」って事もないとは思いますよ。
作業する現場などで、「これをつかえ！」って言われるなら
それがその現場でのコミットとして正しいものになりますし。
また、メンテナンスがしやすく書いているのを、
どんなに今正しいと言われる書き方にして読めなくなったら、
それは、仕事としてはダメだったりします。
今回の質問の場合なら、XSSに対しての
機能を十分に含み、読みやすいか？そっちの方が
プログラムとしての点数は高いと思いますよ。

よく、「昔誰かが作ったソースです」
の後、「よくわからないが、動いてるので放置してます」
のまま、何年もセキュリティーホールがあろうがなかろうが
ほったらかし？って企業さんも多いと思います。
なぜなら、それに問題があるかも「よくわからないが」
って言ってる人たちの監視に何の意味もない！

もちろん最新の書き方を全員が読めるようにした上で
作業するのが一番望ましい！それは確かです！。
しかし今度は、それに期間をかけてる間に、
ビジネスとしてのチャンスを逃がす結果になったら？

ってことで、まず、
確実に動く状態をより早く確保すること
と同時に改善点や、今の書き方ならよりよくなる部分を探していく。
まずは、結果を出すことを最優先としたらいいかと！
私が書いたサンプルがあったとして、
「自分がどうしたかった」を平行ラインに並べるか？
（自分がやりたいものに、サンプルを結合していく考え）
それとも、
そのサンプルを「自分がどうしたかった」に近くするには？
つまり、直線ラインに並べるか？
（サンプルの上に自分がやりたいものをかぶせて変えていく考え）

って境界線がプログラムでは一番難しいと思います。
Gitなど、複数のコミットで成り立つ作業スタイルだと、
直線型に近いかと。
並行式だと、元のサンプルを書いた人が「ここ間違ってた～直しといたよ！」って時、「自分がどうしたかった」への再取り込みが
発生して無駄な時間が増えるでしょう。
ここら辺が本当、一番の壁ですよ。

補足

Q.windowオブジェクトから参照されてるので、
実体化部分は、ガべージャーに食わせる。
そういう意味では、varは余計に使わないですね。

A.回答ありがとうございます、どちらもletで対応すれば問題ないという事でしょうか？

Q.今回の質問の場合なら、XSSに対しての
機能を十分に含み、読みやすいか？そっちの方が
プログラムとしての点数は高いと思いますよ。

A.アドバイスありがとうございます、修正いただいたコードに該当する内容があったため不安に感じておりました。
function () {} は全て下記のような形にしたほうが良いと思われますでしょうか？

2.3. 関数宣言でなく関数式を使用する (func-style)
function による関数宣言は「巻き上げ」が起こり、可読性と保守性を損なうため、関数宣言でなく関数式を使用します。

const foo = () => {
// ...
};

Q.確実に動く状態をより早く確保すること
と同時に改善点や、今の書き方ならよりよくなる部分を探していく。
まずは、結果を出すことを最優先としたらいいかと！

A.アドバイスありがとうございます、教えて頂いたコードを元に理想の形に近付けていくように致します。

回答No.15

AsarKingChang

>※参考サイト
>https://pg.brain-studio.com/00/a-js-getbyclassname-multi.html
これ不要です。
こちらは、動く状態でサンプル書いてるので、見なくてもわかってますので。
質問者さんが書いたソースの方が重要です。

> <div class=parts>のクラス名をそれぞれ<div class="title-partial">と<div class="body-partial">に分けたいのですが、partsを全て.title-partial, .body-partialに変更するだけで良いのでしょうか？

><div class="title-partial">と<div class="body-partial">に分けたい
わける必要はありません。
「足せばいいんです」

<div class="title-partial parts">
</div>

<div class="body-partial parts">
</div>

body-partialは、CSSセレクタで、partsはJSセレクタとして使っているので、別にそれ以外を追加するのは自由です。
あと、クラス名に"-"はなるべく使わない方がいいですよ。
JSを混ぜる場合、マイナス記号に見えるためです。
なので、アンスコにしましょう！

それだけで動くとは思いますよ。

なお、CSSセレクタと、JSセレクタが同時に書きたくない場合は、
２段DIVにすればOK
<div class=CSS>
<div class=JS>　←JSのセレクタとして書いたが、上のCSSセレクタに合わせるため、結局こっちにもCSSが必要になって、無駄な作業が増える。
ただ、無意味でしょうけど。
仕事で使う場合、まれに必要になるので。

補足

A.アドバイスありがとうございます、名前とメッセージ部分を先にアンスコに変更いたしました。
マイナス記号に見えるからアンスコにされているのですね、覚えておきます。

<div class=parts>を追加することも考えたのですが、上から順にHTMLクラス構成を考えた為、
追加せずに対応することが可能であれば<div class=parts>を<div class="title-partial">と<div class="body-partial">に分けて実装したいと考えておりました。
function による関数宣言は「巻き上げ」が起こり、可読性と保守性を損なうため、関数宣言でなく関数式を使用した方がよいと参考サイトに書いてあるのですが、function()はすべてconstに書き換えたほうが良いでしょうか？

※function () {}について
https://qiita.com/kerupani129/items/b2c3619856b048c13394

回答No.14

AsarKingChang

> <div class=parts>のクラス名をそれぞれ<div class="title-partial">と<div class="body-partial">に分けたいのですが、partsを全て.title-partial, .body-partialに変更するだけで良いのでしょうか？

一応はそれでOK
問題は、何で変えたのか？の方だったりはします。
class="abcd"はCSSへのラベルであると同時にセレクタでもあるので

let parts = document.getElementsByClassName('title-partial');
for (let i=0;i<parts.length;i++) {
parts[i].getElementsByClassName('submit_button')[0].oninput = validation;
}
ここでの、継承がかなり大事で
.title-partial -> 　←こちらは入れ物に過ぎない
.submit_button　←こっち側がループ用
それと「同一階層」
.submit_button_validation1
.submit_button_validation2
.submit_button_validation3
が見つかる事ってのを、やれれば何個でも行けますよ。

なので、ループで拾えるようにクラスセレクタを配置すればOKです。
この場合CSSセレクタではなく、JSのセレクタとして使っているので。
Jqueryで言う所の、$('.abc)みたいなやつです（というか中身は同じだが）

あと、名前がSUBMITになってるのですが、これ入力パーツなので、
INPUT_何とかにした方がいいかと。混乱の元になります。
（別にこれ自体にルールはないけど、自分でパニックになってたら、
　意味ないのでね～)
<div class="submit_button_validation submit_button_validation1" style="display: block;">タイトルを入力してください。</div>
そもそも、「SUBMIT」じゃないし「BUTTON」でもない！
これは、INPUT用の、バリデーション「validation」なので～
って感じで、名前に意味を持たせた方がいいかもです～
見た感じそれだけで治ります+＠「追加しても勝手に動きますよ」

補足

A.アドバイスありがとうございます、HTMLクラス名の関係でpartsをすべて.title_partial, .body_partialに変更したいと考えていたのですが…
やはりpartsは別に書いた方が良いでしょうか？

※変更コード(single-input.php)
https://wandbox.org/permlink/R1MpNHA9I4TD3iYo

Q.あと、名前がSUBMITになってるのですが、これ入力パーツなので、
INPUT_何とかにした方がいいかと。混乱の元になります。
（別にこれ自体にルールはないけど、自分でパニックになってたら、
　意味ないのでね～)

A.アドバイスありがとうございます、SEOを意識してHTMLを書いていたので、出来る限り元の形にしたいのですが、v1,v2,v3をまとめて1つにすることは難しいでしょうか？
下記の形で表示させたいと考えております。
セキュリティを重視したい気持ちもあるのですが、サイトのデザイン等も考慮したい為、悩んでいます…

※名前HTML
<div class="msg_partial">あと<strong>50</strong>文字</div>

※コメントHTML
<div class="msg_partial">あと<strong>500</strong>文字</div>

※変更コード(single-input.php)
https://wandbox.org/permlink/DBHsrZCO545uPi0y

回答No.13

AsarKingChang

エラー出てますね。
/* DOM構築が終わってから呼び出される初期化関数 */
function init() {
// let text = document.getElementById('submit_button');
// text.oninput = e_text;

/* ↑これを、idじゃなくてclass対応に変更↓ */

/* class=parts内の class=uso_inputに対して設定 */
let parts = document.getElementsByClassName('title-partial');
for (let i = 0; i < parts.length; i++) {
parts[i].getElementsByClassName('submit_button')[0].oninput = validation;
}
validation();
}
;
これ、入力パーツのバリデーションですが、
'submit_button'を探していてさらに、見つからないので、
入力バリデーションの、リスナの設定が失敗しています。
現在も、パーツは
<input class="uso_input" type="text" name="name1" id="name" data-length="32" placeholder="未入力の場合は、匿名で表示されます" value="">
で表示しているので、 class="uso_input" この文字が、
getElementsByClassNameで指定するものなので、それが原因かな。

補足

A.回答ありがとうございます、元のコードに合わせて一部クラス名を変えていたのですがuso_inputと混ざってしまっておりました申し訳ありません。
全てsubmit_buttonに変更して確認したところコメントは字数がカウントされたのですが、名前の方が表示されていない状態です。

<div class=parts>のクラス名をそれぞれ<div class="title-partial">と<div class="body-partial">に分けたいのですが、partsを全て.title-partial, .body-partialに変更するだけで良いのでしょうか？

※参考サイト
https://pg.brain-studio.com/00/a-js-getbyclassname-multi.html

※現在のコード(single-input.php)
https://wandbox.org/permlink/oogmbOiJ6NHhFWV1

回答No.12

AsarKingChang

>問題が発生していて、コード入力の際にカウントが表示されずカウントもされていない状態になってしまっているのですが、何か原因となるコードはありますでしょうか？

>※該当コード(single-input.php)
>https://wandbox.org/permlink/BfWHABwCyxJG1FFL

これ、WordPressのシングルヒエラルキーですね。。
HTML部分がないので何とも。。
あと、テストの時は、WordPressをなしにして、
単体のPHPでやった方がいいですよ。
余計な文字が大量に入ると、デバッグやりにくいですから～。

ってことで、コード入力がどうの？の前に、
このソースはPHPなので、これに関しては
回答なしになっちゃいますね～。

ただ、一番最後の行が「<script>」なのは、
気になりますが。

ただ、
/* カメラ画像をファイルアップロード時に非表示にする */
const attach = document.querySelectorAll('.attach');
これらが、画面表示前に呼ばれたどうなるか？
って考えるとちょっと恐ろしいので、
onload以降にした方がいい気はしますね。
動いたり動かなかったりすることが、
あったのではないかと。
あと、onloadリスナーにまとめると、
ソースの上に書いても、DOM構築後にしか呼ばれないので、
確実にセレクタの取り込みは成功しますので。
それと、WordPressは、JQがあるので素直に
$(function(){ にしちゃうのも手ですが。
（ここは、直接は関係ない話ですが、あまりHTMLの後方に
　スクリプトソース書くのは、綺麗じゃないのでね～）

補足

回答ありがとうございます、やはりWordPressと混ぜると難しくなるということですね…
PHP単体でも試してみます、申し訳ありません。
イラストのQ&A掲示板を作成しております。
シングルヒエラルキーの意味がわからないのですが、Javascriptで表示の優先順位をCSSコードのように争っていてコードが一部効かなくなっているということでしょうか？
後の行が「<script>」となっているのはwandbox(GitHubの仕様上</script>で閉じる)とエラーになってしまうためです、説明が不足しておりました申し訳ありません。
PHPで問題が発生しているのでしょうか…？

※表示画面
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf/

※ページソース
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf/

Q.これらが、画面表示前に呼ばれたどうなるか？
って考えるとちょっと恐ろしいので、
onload以降にした方がいい気はしますね。
それと、WordPressは、JQがあるので素直に
$(function(){ にしちゃうのも手ですが。

A.アドバイスありがとうございます、変更するように考えてみます。

回答No.11

AsarKingChang

>問題が発生していて、コード入力の際にカウントが表示されずカウントもされていない状態になってしまっているのですが、何か原因となるコードはありますでしょうか？

後で見ておきますので、この板閉じないで置いてもらえたら～
たすかります～

補足

ありがとうございます。

回答No.10

AsarKingChang

>クッキーとセッションは違うもので、クッキーを保存する方法でなければ回避できるのではないかと考えていたのですが、それは間違いなのでしょうか？
クッキーを使ってセッションを作ってるので、
クッキーを保存しなければ、セッションキーが存在しないのでは？

WEB系のプロトコルの場合、「今通信してる相手」
が誰なのか？ってのはかなり難しいので。

例えば家の中に2人いたとして、
その二人が同時にサイトに入ると、
サーバーには「どちらも同じIP」に見えます。
さ～どうやって区別する？
ってとき、クッキーやセッションを使うのと、
クッキーはブラウザの中に保存しているが、
セッションの実データはサーバーの中にある。
しかし、その実データを選択するキーは
結局クッキー内の値でしかないですから。

そうじゃないと、ワンセッション
（リロードなどをしたら、消えてしまうやり方）
でしか、出来ないですもんね！
リロード（ブラウザから見たら他のURiへの移動もリロードと同じ）
で消えない物は何か？
って考えたら＾＾そりゃね！ってことでね。

そこでXSS攻撃で、そのサイトに通信している
相手が使っているセッションキーを抜いて
悪意がある人が「私がその人ですよ！」と
通信したら、サーバーはなんて返す？？
って問題につながるのでね。

補足

A.回答ありがとうございます、プログラムが区別する際にクッキーを使うということですね。
セッションキーを抜いて成り済ますことも可能なんですね、勉強になりました。

回答No.9

AsarKingChang

って事で。
>1,文字が超過している場合も表示させたいのですが、HTMLに追加するだけで可能でしょうか？

これは、前のバージョンからすでに出してます～

2,名前を50文字でコメントを500文字で制限したい場合にHTMLクラス名を同じもので実装することは可能でしょうか？

今回のサンプルで、同じクラス名で複数のフォームパーツで
動作するように拡張しときました～。
data-length=xxこれを書き換えてみて。
（ただし、タグの外にあるinner文字数は、変わらない）

あと、これ、全走査タイプなので、
例えば「100個」とか入力がある場合は、効率が悪い！
バリデーションは、今入力変化があった物だけにして、
最後に、「他は満たしてますか？」のみを判定させて
submit制御したほうが、無駄はないでしょね。
今気がついたけど、元々data-maxlengthってのに
長さ書いてたんですね。

おまけ、ちょっとしたジンクスではあるが、
this.dataset.submit_disabled = true;
これは、私はやや嫌い。これでどっぷりハマったことがあるので。
内部的に、初期のDOM構築の時の値と
後から書き換えた物で、2つの値が発生していて、
これで、ドハマりしたことがあるんだわ。
なので、この手のフラグは、JS内変数でこちらでは
格納させてます！
（いちいちテキスト解析させる方がストレスになるので、
　あまりいい事はないのでね）

んじゃ～！
元々は、
this.nextElementSibling.innerHTML = '<strong>' + escapeHTML(left) + '</strong>文字';
これを、どうにか？ってイメージだったんですが、
およそ？作りたいものの全要素は、そろったかな？

ってことで、またね～！
（あまり私だけが書いてる板好きじゃないので、
　これで終わります～）

補足

A.コード修正ありがとうございます、DOMが2つある場合解析が必要になるのですね勉強になりました。
問題が発生していて、コード入力の際にカウントが表示されずカウントもされていない状態になってしまっているのですが、何か原因となるコードはありますでしょうか？

※該当コード(single-input.php)
https://wandbox.org/permlink/BfWHABwCyxJG1FFL

回答No.8

AsarKingChang

<html>
<head>
<script>
function validation_submit(f) {
const submit = document.getElementById("uso_submit");
/* 判定は逆なので、逆に渡す */
submit.disabled = f?false:true;
};

function validation_text(parts) {
/* このpartsグループの、input=textを抽出 */
let text=parts.getElementsByClassName('uso_input')[0];
/* バリデーション警告パーツを抽出 */
let v1=parts.getElementsByClassName('uso_input_validation1')[0];
let v2=parts.getElementsByClassName('uso_input_validation2')[0];
let v3=parts.getElementsByClassName('uso_input_validation3')[0];

v1.style.display =
v2.style.display =
v3.style.display = 'none';

/* 例えばのチェック */

/* 最小チェック */
if (text.value.length==0) {
v1.style.display = 'block';
return false;
}
/* 最大チェック */
if (text.value.length>=text.dataset.length) {
v3.style.display = 'block';
return false;
}

/* それ以外 */
v2.getElementsByTagName('span')[0].innerText=text.dataset.length-text.value.length;
v2.style.display = 'block';
return true;
};

/* バリデーション条件判断部分 */
function validation() {
let parts = document.getElementsByClassName('parts');
let submit=true;
for (let i=0;i<parts.length;i++) {
if (validation_text(parts[i])!=true) {
submit=false;
}
}
validation_submit(submit);
};

/* DOM構築が終わってから呼び出される初期化関数 */
function init() {
// let text = document.getElementById('uso_input');
// text.oninput = e_text;

/* ↑これを、idじゃなくてclass対応に変更↓ */

/* class=parts内の class=uso_inputに対して設定 */
let parts = document.getElementsByClassName('parts');
for (let i=0;i<parts.length;i++) {
parts[i].getElementsByClassName('uso_input')[0].oninput = validation;
}
validation();
};

window.onload = init;
</script>

<style>

/* バリデーション警告文章は「赤」に設定 */
.uso_input_validation {
display:none;
color:red;
}

/* これで、.uso_input_validation内で使ったspanタグの中は常に「青」になる */
.uso_input_validation span {
color:blue;
}

</style>

</head>

<body>
<div>嘘フォーム</div>

<!-- parts 何個でも対応にしといたよ～ -->
<div class=parts>
<input class=uso_input type="text" name="name1" data-length=32>/32文字まで<br>
<div class="uso_input_validation uso_input_validation1">タイトルを入力してください。</div>
<div class="uso_input_validation uso_input_validation2">あと<span></span>文字入力できます。</div>
<div class="uso_input_validation uso_input_validation3">長すぎます。</div>
</div>

<div class=parts>
<input class=uso_input type="text" name="name2" data-length=40>/40文字まで<br>
<div class="uso_input_validation uso_input_validation1">本文を入力してください。</div>
<div class="uso_input_validation uso_input_validation2">あと<span></span>文字入力できます。</div>
<div class="uso_input_validation uso_input_validation3">長すぎます。</div>
</div>

<input id=uso_submit type="submit"><br>

条件にあわせてSubmitの使用権限を操作してます。
</body>

</html>

何個でも使えるように、拡張しといたよ～。
使い道あったら、どぞ！

回答No.7

AsarKingChang

>HTMLが書き換わるものは基本的に対策するべきなのか教えていただきたいです。
だって、この投稿のタイトルがXSSだからです！！

例えば悪意がある人が短いスクリプトと
FORMタグを生み出せる状況を与えたら、
まず有名なのは、「相手のブラウザ内のクッキー」を
取得できてしまう問題。
次に、全く関係のないサイトへの攻撃を
「他人のブラウザ」が行う！
＝つまり、証拠が残らない！
だって、攻撃を加えたのはあくまで
「他人のブラウザ」なので！
など、危険がいっぱいですよ～

なお、こちらただの酔っ払いの暇人ですがね～
（よくサイト作ってあげて、セキュリティー診断を受けるので、
　これらの概念＆攻撃方法は知ってますのでね～）

補足

説明ありがとうございます、なるほど間接的に攻撃していても分からないということですね。クッキーとセッションは違うもので、クッキーを保存する方法でなければ回避できるのではないかと考えていたのですが、それは間違いなのでしょうか？