nmtysh.log

Tech系のネタや日々の独り言などを書いています。

inputフォーム要素が配列の場合にブラウザバックするとデータが壊れた

nameが配列になっている("data[]"など)inputフォームはpost後にブラウザバックすると、ブラウザが余計な気を効かせて(autocomplete?)、データが壊れることありました。

サーバー側で空欄の要素を除外して配列に入れ直している場合に、サーバー側のレスポンスでは入れ直した後のデータになっているのに、ブラウザ側がフォーム内容を上書きしてしまい意図しない状態になりました。

<!-- POST内容 -->
<input type="text" name="data[1]" value="1" />
<input type="text" name="data[2]" value="" />
<input type="text" name="data[3]" value="3" />

↓ ブラウザバック(ページキャッシュ無効なのでサーバーから再取得

<!-- サーバーからのレスポンス内容 -->
<input type="text" name="data[1]" value="1" />
<input type="text" name="data[2]" value="3" />
<input type="text" name="data[3]" value="" />

↓ ブラウザのレンダリング

<!-- 表示内容 -->
<input type="text" name="data[1]" value="1" />
<input type="text" name="data[2]" value="" /> <!-- 2番目が空欄になる -->
<input type="text" name="data[3]" value="3" /> <!-- 空欄であるべき3番目に古いデータが表示される -->

この状態でページをリロードすると正しいデータで表示されますが、POSTしてしまうとおかしい状態でサーバーに送信されてしまいます。

Cache-Controlでno-cache,no-store,must-revalidateを設定しているのにこのような挙動だったので、ブラウザのCache?を疑いつつ、試しにdata[(連番)]からdata[(ランダムな値)]にしてみたら(今回のフォームではkeyの値自体は重要じゃなかったので)、意図した挙動になりました。