JAVASCRIPTのatobで日本語(UTF８)でbase64_encodeされた文字列をデコードすると文字化けする問題を回避するコードをご紹介いたします。
PHPでbase64_encodeされた日本語をJAVASCRIPTのatobで複合化すると文字化けする
ワードプレスでAJAXなどでbase64エンコードされた文字列をやり取りすることがあるかと存じます。
ただ、この文字列をJAVASCRIPTのatob等のbase64関連の関数と組み合わせて使用する場合は注意が必要です。
例としまして下記のようなコードを実行して出力すると文字化けしてしまう場合がございます。
<script>
var string = "<?php echo base64_encode("日本語");?>";
document.open();
document.write(atob(string));
document.close();
</script>
これは、JAVASCRIPTとPHPのbase64関連の関数でのマルチバイト文字の取り扱いが違うからです。
この為JAVASCRIPT側で日本語をbase64デコードする特殊な関数を定義してそれを使用します。
<script>
function b64DecodeJP(str) {
return decodeURIComponent(atob(str).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
}
var string = "<?php echo base64_encode("日本語");?>";
document.open();
document.write(b64DecodeJP(string));
document.close();
</script>
これで日本語も文字化けせずにbase64デコードできるようになりました。
参考
Using Javascript’s atob to decode base64 doesn’t properly decode utf-8 strings
WordPress ワードプレスのテーマやプラグインの修正やコーディングのご依頼・ご相談はWPドクターまでお気軽にお送りください
