【Chrome】隠しFormの送信が出来なくなった

Chromeで隠しFormオブジェクトの送信が出来なくなった

概要

JavaScriptで画面上に存在してないフォームを生成してsubmitしたら面白いんじゃないか？

と思い立って、内向けのシステムに以下のような記述をやって、動作させていました。

var form = $("<form></form>");
form.attr({
    "action": "http://localhost/#",
    "method": "post",
    "accept-charset": "UTF-8",
    "enctype": "application/x-www-form-urlencoded"
});

form.append("<input type='hidden' name='hoge' value='hage'>");
form.submit();

具体的には、jsのファイル内部でしか存在しないformオブジェクトを作成し、それをHTMLに書き出さないままpostすることで、HTML上にあるpostのフォームと同じ意味のことを、HTML内にはフォームが存在してなくても行うという感じです。

ちなみに完全に内向けのサービスなので、利用ブラウザはChromeのみです。

ところが・・・

最近、利用者から上記のスクリプトで書いたページで送信が出来なくなっていると連絡が入りました。
確認すると、どうやら最近のアップデートで、こういうことをやろうとするとChromeのコンソールで以下のWarningエラーが発生し、動作できないようになっているようでした。

Form submission canceled because the form is not connected

解決

解決というよりは場当たり的な方法ですが、以下のようにしたら動作しました。

var form = $("<form></form>");
form.attr({
    "action": "http://localhost/#",
    "method": "post",
    "accept-charset": "UTF-8",
    "enctype": "application/x-www-form-urlencoded"
});

form.append("<input type='hidden' name='hoge' value='hage'>");
$("body").append(form);
form.submit();

submitした時点で画面遷移してフォームが消えるのであんまり変わらない気がしますが、少なくともbody内にformがあればいいようです。
最初からページ内にform作って、idでも割り振っておいて内部にappendやsubmitしたほうが良いと思います

備考

ちなみに今回の件とは完全に関係ないですが、httpsページで上記の操作を行ってhttpページへ送信するとこっちのWarningエラーも同時に出ます

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

以上です。