文字コードの異なるフォームへのPOST（UTF8 to Shift_JIS）

文字コードの異なるページへのPOSTって悩ましいですよね。
具体的には、こちらのサイトがUTF-8で作られていて、相手先がShift_JISだったりする場合。

そもそも相手サイトにPOSTしなきゃいけない理由とは

SPAMサイトじゃあるまいし、普通は自サイト以外へのPOSTってあんまり考えられないかも知れません。

でも、実際はあるんです。例えばECサイトが良い例。

「ご購入ありがとうございました。決済手続きは次の画面でお願いします。」

みたいなの。

いまどきそんなの古いよーという方もいらっしゃるかも知れませんが、きっとそれは大手の通販サイトを使用されていることが多いからでしょう。ショッピングモールにさえ出店しない、個人商店レベルのサイトではこんなのいっぱいあります。

中の人いわく、「個人経営のショップサイトでクレジットカード番号を入力するのは怖いというお客様がいらっしゃる」とか。なるほど、お客様の気持ちもわかる気がします。

実際は個人商店レベルのお店がクレジットカード番号を保管していることなんてほとんどなくて、裏側で通信（API方式）して番号をクレジットカード会社へ送っているだけだったり、そもそもそのカード番号入力フォーム自体がクレジットカード会社からの通信で埋め込まれたもの（Ajax通信式）だったりします。

しかしそんなのお客様にはわかりませんし、個人商店のデザインのままカード番号入力画面が見えたら、それはもう個人商店に番号を晒すのだ、と思われても仕方ないのかなと思います。

そんなわけで、個人商店レベルのネットショップだと、

「ご購入ありがとうございました。決済手続きは次の画面でお願いします。」

と出てカード会社のWebサイトへ飛ぶと安心するお客様がいらっしゃるのだそうです。

カード会社ならいろんな文字コードに対応してるやろ

それがそうでもなかったり。

特に名前は挙げませんが、サービス開始から10年以上経つのにShift_JISにしか対応していないカード決済の代行会社とか普通にあります。

そんなときに使うのがこの記述。

<form action="https://example.com" method="post" accept-charset="shift_jis">

accept-charset="shift_jis" を入れておけば送信元がUTF-8だったとしてもコード変換して送信してくれます。………………ブラウザが。

そう、ブラウザ次第なのがちょっと問題。

IEだとaccept-charsetを聞いてくれない

ChromeやFireFoxだと問題なく動作してくれるのですが、IEさんがaccept-charsetを聞いてくれません。

どうしたもんかなぁと悩んでいたのですが、ググってみたら既に解決されている先駆者が。

■IEでも動作するようにJavaScriptでcharsetを変更する例

<input type="submit" value="送信" onclick="document.charset='shift_jis';">

submitするときにcharsetを変えることなんて出来たんですねー。

このおかげでうちの環境ではIE,Chrome,FireFoxで問題なく、UTF-8のページからShift_JISページへFORMデータをPOSTすることが出来ました。

ちなみに、そこで処理が完了する場合はこれだけで構わないのですが、UTF-8のページに戻ってくる場合はcharsetも戻しておかないと今度はUTF-8のページが文字化けします。

なので、現在のdocument.charsetを保存しておいて、submitしてから元に戻すようなJavaScriptを組む必要があります。

こんな感じ。

■UTF-8からShift_JISへのPOST例

<script>
function submitSJIS(f) {
	var charset_save = document.charset;
	document.charset='shift_jis';
	document.getElementById('f1').submit();
	document.charset = charset_save;
}
</script>
<form id="f1" action="https://example.com" method="post" accept-charset="shift_jis">
<input type="submit" value="送信" onclick="submitSJIS();">
</form>

まとめ

• 異なる文字コードのページへPOSTするときはaccept-charset="shift_jis"を使う
• 但し、IEも考慮するならJSでdocument.charset='shift_jis';をする
• 更に戻ってくるケースも想定するならdocument.charsetを変数に保存しておいてPOST後に戻す

この知識が必要になる機会は少ないかも知れませんが、だからこそここにメモっておこうと思いました。