HTMLでの<input pattern属性>での住所入力

Question

HTMLで入力フォームを作成しています。
下記のような住所を入力する場合に、pattern属性で、
ある入力規則を指定しようとしています。

例)
東京都杉並区下高井戸ＡＢＣ町1-1 ビル・マンションA101

住所なので
全角ひらがな、全角英数、全角カナ、半角カナ、半角英数
が入力できて、XSS対策として特殊記号(<>""%)は入力できない
ように指定したいです。そんな万能な指定ができるのでしょうか？

入力フォームサンプル
https://jsfiddle.net/4ruubrsd/2/

下記の場合は全角のみという入力規則でしょうか...

<input type="text" pattern="[^\x20-\x7E]*">

調べてもさっぱりわからなかったので
教えていただけきたいと思います。

よろしくお願いします。

Comments

[m.ts10806]

htmlだけですか？入力内容を受け取るサーバー側の言語（PHPなど）はないですか？

[x_x]

特殊記号というのは具体的には何のことでしょうか？

[otokichi_]

mts10806さん PHPで飛ばすかどうかはまだ未定です。その場合はエスケープなどします。

[otokichi_]

x_x 明記しました。XSS対策としての入力規則は<>や" ' % ぐらいで良いでしょうか...他にもあれば教えてください。

[m.ts10806]

やはり受け入れる記号も明示したほうが良さそうです。住所にもハイフン（場合によりイコールとかあるかも？）は出てくるわけですし。

Answer 1

代表的なパターンについてまとめてくれている人がいました（もしかしたら参照済みかもしれませんが）。

• HTML5におけるinput要素のpattern、type属性のおさらい

完全に万能な仕組みは無理と思いますので、ブラックリスト方式かホワイトリスト方式かどちらかに寄ることになるでしょう。
個人的にはホワイトリスト方式の方を採用すべきと思います。カバーしきれない可能性もありますし。指定が冗長になればなるほど想定通りにいかなくなります。
つまり「受け入れたいもののみの指定とする」ことですね。

しかしながら「XSS対策」となると結局は「入力した情報を画面に表示するとき」の対応をすることとなりますので、一度入力は受け入れておいて、出力時にサーバー側の言語でエスケープ対応するのが通例と思います。
いずれにしてもHTMLは改ざんは簡単にできてそのまま送信可能ですので、苦労して作ったパターンは悪意あるユーザーには簡単に破られます。
いずれにしてもサーバー側の言語でのバリデーションは必須と思います。

Comments

[otokichi_]

これ見た覚えがあります。
全角ひらがな、全角英数、全角カナ、半角カナ、半角英数を入力可能にする場合は、いろいろ組み合わせる必要があるんでしょうか。試した結果あまりうまくいきませんでした。。。PHP側ではエスケープします。

[m.ts10806]

すぐに試せるわけではないですが、結局は正規表現なので如何様にも可能と思います。
記号でも受け入れる記号のみ入れておくとかになりますね。
正規表現チェッカーを公開しているサイトを利用すると良いでしょう（私も記憶しているわけではないので毎回色々試しています）

[m.ts10806]

マンション名に除外したい記号入ってたりするケースは？とか全て網羅するには限界があるので
電話番号や郵便番号など明らかに制限できるもの以外はあくまで受け入れるだけ受け入れて表示時にエスケープするのが吉かと思います。

Answer 2

「\x20」「\x7E」は文字データを16進数の値で表したものです。
それぞれどの文字に該当するかは下記サイトを参照のこと。

ASCII文字コード - IT用語辞典 e-Words

↑実態は「全角文字ならOK」というパターンになります。

全角ひらがな、全角英数、全角カナ、半角カナ、半角英数
が入力できて

↑ということは、実際は「記号文字NG」ということになるんじゃないすかね？

pattern="[^\x21-\x2C\x2E\x2F\x3A-\x40\x5B-\x60\x7B-\x7E]*"

↑こんな感じかな？

Answer 3

制御文字をはじく場合。

<input type="text" pattern="[^\x00-\x1f\x7f]*" />

ほかにもあるなら追加していけばいいのではないでしょうか。

<input type="text" pattern="[^\x00-\x1f\x7f&lt;&gt;&quot;%]*" />