inputタグのname属性が300文字以上になるのは良くないことでしょうか？

Question

inputタグのname属性の文字数が多くなる理由

inputタグに複数のdata属性を設定しています。そのdata属性には、そのinputタグのvalueをhtmlで出力する際のルール(赤文字で出力する等)が動的に入ります。POSTの際にそのinputタグの全てのdata属性の中身をname属性に詰め込む仕様にすることで、
・keyにhtmlで出力する際のルールを全て詰め込む
・valueにhtmlで出力する文字列を詰め込む
という状態でデータベースに保存し、それをhtmlに出力する際は、keyの中身をチェックして何色で出力するか等を条件分岐した上でvalueを出力しています。
だんだん出力する際のルール(文字の大きさ、背景色、その他)が多くなり、気づけばname属性の文字数が300文字を超えていました。

//html(name属性の値は、data属性の中身が自動的に反映されるようになっています)
<input type="text" name="color=red,size=18px" data-color="red" data-size="18px" value="山田">

//php
key名に「color=red」が含まれていたら、valueを赤文字で出力というふうに条件分岐しています。

レンタルサーバー側のファイアウォール(WAF)にひっかかる

name属性の文字数が300文字を超えたとき、利用しているCONOHAレンタルサーバーのWAFにひっかかりました。バッファオーバーフロー攻撃試行の可能性と勘違いされたようです。

知りたいこと

WAFにひっかかったとき、私は焦りました。以下のことが気になったからです。
「name属性に、出力のルールを詰め込むようなやり方は、問題があるやり方（もしくは邪道なやり方）なのか」ということです。

inputの値(value)とは別に、そのvalueを出力する際のルールもphp側で受け取りたいと考えたとき、name属性に含める以外に方法を思いつかなかったのですが、このやり方はリスクがあるのでしょうか。
その場合、こういうときベテランの方はどのような方法を取っているのでしょうか。

ご存じの方がいらっしゃいましたら、どうかご教授頂けましたら幸甚に存じます。
何卒、よろしくお願い申し上げます。

Answer 1

属性にはそれぞれ役割があります。

要素の名前。例えば、送信されたフォームでサーバーがフィールドを識別するために使用する。

あくまで「名前」なのでそんな何百字も必要になることはないという前提があります。
「この要素と紐づく」のであれば、name属性でルール作れば良いのでは。

<input type="text" name="hoge" value="山田">
<input type="hidden" name="hoge_color" value="red">
<input type="hidden" name="hoge_size" value="18px">

Comments

[yayak]

回答頂きありがとうございます。なるほど、やはり数百文字になるのは異常ですよね。
ご教示頂いた方法につきましては、データベースに保存するところまではできそうなのですが、出力の際の紐付け方がわからないため、もう少し考えてみようと思います。。

[m.ts10806]

ルールを考えたら良いです。
私は「テキストのname+_+指定したい情報をnameとする」を提示しました。そういうルールを「作った」わけです。
自分が実装しやすいルールを作ると良いですよ。

[yayak]

「自分が実装しやすいルールを作る・考える」という部分をもっと鍛えていきたいと思います。
大変勉強になりました。心より感謝申し上げます。有難うございます。

Answer 2

こんな処理だと問題ですか？

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('form').addEventListener('formdata',e=>{
    e.target.querySelectorAll('input').forEach(x=>{
      Object.entries({...x.dataset}).forEach(y=>{
        e.formData.append(`${x.name}-${y[0]}`,y[1]);;
      });
    });
  });
});
</script>
<form>
<input type="text" name="hoge" data-color="red" data-size="18px" value="山田">
<input type="text" name="fuga" data-color="blue" data-size="12px" value="鈴木">
<input type="submit" value="send">
</form>

nameを工夫できるならこうするとサーバー側でデータが取り出しやすいかもしれません

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('form').addEventListener('formdata',(e)=>{
    e.target.querySelectorAll('[name$="[value]"]').forEach(x=>{
      Object.entries({...x.dataset}).forEach(y=>{
        const name=x.name.replace(/[value]$/,'')+`[${y[0]}]`;
        e.formData.append(name,y[1]);;
      });
    });
  });
});
</script>
<form>
<input type="text" name="hoge[value]" data-color="red" data-size="18px" value="山田">
<input type="text" name="fuga[value]" data-color="blue" data-size="12px" value="鈴木">
<input type="submit" value="send">
</form>

Comments

[yayak]

コードまでご提示いただき大変恐縮です。ありがとうございます。
javascriptの知識がまだ中途半端な状態のためコードの内容がうっすらとしかわからず(...や、x、yを初めて見ました)本当に大変お恥ずかしいのですが、上記のコードの方法を実践するとnameの文字数が抑えらるということでしょうか？
頂いたコードを今日中にじっくり読み解いてみます＞＜；

[yambejp]

>nameの文字数が抑えらる
nameに詰め込まない仕組みにしてあるつもりです

なお、サーバー側がphpなら
<?PHP
print_r($_GET);
?>
を先頭にいれて確認してみてください

[yayak]

うとくて申し訳ございません。もっと勉強して精進いたします。<?PHP
print_r($_GET);
?>
も、時間が取れ次第すぐに試してみようと思います。時間をかけてコードに込められた意味を1つ1つ理解していこうと思います。アイディア、さらにコードまでご提示いただきましたこと、心より感謝申し上げます。

[yayak]

実践してみました！こんなことができるのですね・・・！
この方法でやろうと思います、すごい勉強になりました！
本当に有難うございます。心より感謝申し上げます。