iOSのLINEの内臓ブラウザが、POSTフォームのtarget=_blankで挙動が狂う件

6390 ワード
HTML iOS Line HTML テキストリンク

概要

iOSのLINEブラウザの挙動がおかしくてはまりました。

現象

環境：iOSのLINEとYahooの内臓ブラウザ（ほかにもあるかもしれない。）
条件：POSTメソッドのformタグで、target="_blank"が指定されている
結果：formのaction先には遷移するが、formのパラメータはすべて抜け落ちる

再現

1. コード

html01.html
<html>
    <head>
        <meta charset="UTF-8" />
        <style type="text/css">
            div {
                border: 1px solid black;
                margin-top:10px;
            }
        </style>
    </head>
    <body>
        <div>
            targetなしPOSTフォーム
            <form action="./php01.php" method="POST">
                <input name="name" type="text" value="kumanobori" />
                <input name="type" type="text" value="kuma" />
                <input type="submit" />
            </form>
        </div>

        <div>
            targetありPOSTフォーム
            <form action="./php01.php" method="POST" target="_blank">
                <input name="name" type="text" value="kumanobori" />
                <input name="type" type="text" value="kuma" />
                <input type="submit" />
            </form>
        </div>
    </body>
</html>
php01.php
<?php
echo 'REQUEST_URI: ' . $_SERVER['REQUEST_URI'] . '<br />';
echo 'POST:' . mb_ereg_replace("\r|\n", '', print_r($_POST, true)) . '<br />';

2. html表示

3. 正常な結果（iOSのLine内臓ブラウザのtargetありの場合以外）

4. 異常な結果（iOSのLine内臓ブラウザのtargetありの場合）

回避策

User-Agentで判定して、 target="_blank" の出力有無を制御しました。

その他

試した環境（以下は全部セーフ）

iOS slack内臓
iOS chrome
iOS Safari
android Yahoo内臓
android LINE内臓
android chrome

上記コード以外で試した条件（以下は全部セーフ）

GETメソッドのformの target="_blank"
aタグの target="_blank"

ポエム

LINEブラウザの挙動がおかしいってことで調査したのですが、こんな使い古したオプションで挙動が狂うとは思わず、思い切りはまりました。。。

2021.09.10 追記
スマホのLINE内臓ブラウザだと「新しいウィンドウ」という概念がないわけで、そこに事情があるんだろうなという気はしなくもないです。
でもandroid版はちゃんとしてるしー。（新しいウィンドウは開かないけど、ちゃんと遷移する）
で、Yahooアプリに至っては内臓ブラウザがマルチタブ対応してるからそこに事情を斟酌する余地すらないしー。