<input type=image>で送信すると、X,Y座標が送信されるので、調べたら闇だった

複数に分割されたログインID入力が・・・

タイムズカープラスのログインを、ブラウザが学習しない。 Opera(Presto)だと複数にわかれたIDを学習してたのに、Opera(blink)になってから学習しないので、もう面倒だから拡張機能で対応しようとした。

フォームの値をJavaScriptで送信しようとしてハマったのでメモ。

スクリーンショット 2014-12-05 14.38.08

form.submit でログイン失敗する

HTTPのリクエストヘッダを見ていると input に存在しない値を送信している模様。

tpLoginForm:doLoginForTp.x:132
tpLoginForm:doLoginForTp.y:14

どこから出てきた、この値は。と調べてて見つけた。

input type ="image" はクリック位置を送信する模様

知らなかった。X,Y座標を送信するんですね。type=imageなんて滅多に使わないからなぁ。

<form>
<input type="image" src="foo.jpg"/>
</form>

この場合、クリックした位置が送信されます。

ちなみに、Enterキーを押して送信した時は (x,y) = (0,0)が送信されます。

ちなみに、form.submit()をしたときは送信されません。（←怖い！

ちなみに、input=textなど他の要素上でEnter送信した時も送信されません（←怖い！

XY を送信させない方法

HTMLを作成時にX,Yを送信させない方法は、button要素を使うことです

<button><img src="foo.jpg"/></button>

または、type=submit の背景画像を使うべきでしょうね。

<input type=submit>

input[type=submit]{
 background-image:url("submit_btn.png");
 background-repeat:no-repeat;
 background-color:#000000;
 border:none;
 width:160px;
 height:90px;
 cursor: pointer;
}

また、onclickでform.submit()をしてもいいとは思いますけど・・・面倒増える

何のために type=image は存在するのか

送信・キャンセルなど、複数のボタン画像をまとめるためだと思います

<form>
<input type=submit name="sort" value="価格順で並べる">
<input type=submit name="sort" value="登録日で並べる">
</form>

などとして、複数復数の送信ボタンを作れるのは、あまりにも有名。

おなじことを、画像で、しかも１枚の画像でやろうとするときに必要なんじゃないですかね

クリック位置から、画像の何処を押されたか検出して・・・どっちのボタンが押されたか調べる。とか？

何のために存在するのでしょうか、ご存知でしたら教えて下さい！

captcha にも使える

これってCaptchaに使えますね

X をクリックしてください

とかやればいいんだから、超簡単にCaptcha実装できそうですね。

画像識別OpenCVと組み合わえて

顔認識の候補をいくつも出しておいて正解をクリックするプログラムを、さくっと作れそうで便利だなこれ。

逆に言えば、ボット検出に使えそうですよねぇ

クリック位置を検出して送信して、その値をシッカリチェックしておけば、ボット検出に使えそうで便利。

ばかみたいに、登録してくるユーザーやボットでログインしてくるユーザーの対策に一役買いそう。

ImageでX,Yチェックされてるの、これしらなきゃ、JavaScriptで制御してもログイン成功しないので。

擬似的にマウスクリックを送信する方法

ボット対策にtype=imageが使われても、それでも大丈夫なように対策を考えておいた

a = document.querySelector("input[type=image]")
var mouse_event = document.createEvent("MouseEvents");
mouse_event.initMouseEvent("click", true,  true, window , 0, 0, 0, $(a).position().left,$(a).position().top , false, false, false, false, 0, null); )
a.dispatchEvent(mouse_event)

jQuery.postionが入ってるのは、同等のDOM APIが存在しないから・・・ほしい。

ただ、この場合でも document の左上からの距離を出すのがjQuery.position() 以外でやろうとすると、面倒なんですよねぇ。

initMouseEvent は闇。

そもそもタイムズカープラスは、X,Yチェックをなんでやってんの？

そもそもタイムズカープラスのSeasar2はなんで、X,Yチェックなんてやってるんでしょうか。

X,Y = (-1, -1 )とか送信したらエラーになるし

かといって、jQuery.positionやoffsetで画像の位置を取得してるわけでもないし。

なんだろう、プログラマの闇を感じる

追記

クリッカブル・マップは分かるんですよ。 HTMLタグ/イメージタグ/画像内に複数リンクを設定する - TAG index Webサイト

でもなぜ、form.submit() でX,Yを送る必要があるのかと。。。。 <map onclick="my_form.submit()"> 使えば出来るし、、formのinputでコレが仕様に盛り込まれたのはきっと理由があったんだろうけど、どういう利用想定を考えたのだろうか。。。

追記

複数復数の誤字直しました