Base64エンコード・デコード
文字列をBase64に変換するか、元に戻します。ブラウザ自身のbtoaはLatin-1しか受け取らず、それ以外では例外を投げるので、先にUTF-8へ直しています — おかげで日本語も絵文字もそのまま往復します。
入れたものは端末から出ません。 ブラウザの中だけで処理し、どこにも送らず保存もしません。
Base64 は暗号化ではありません
3バイトを6ビットずつ四つに分け、A–Z・a–z・0–9・+・/ の64文字に対応させる表記法です。鍵が無いので誰でも元に戻せ、隠す目的で使ってはいけません。使う場面は「文字しか通らない経路」にバイトを載せたいときです。メールの添付、JSON の中の二進データ、data: URL として埋め込んだ画像、HTTP 基本認証の ユーザー名:パスワード がそれにあたります。
`=` の詰め物と URL 安全な変種
4文字がひとまとまりなので、長さが4の倍数になるよう末尾を = で詰めます。URL 安全な変種は +・/ を -・_ に置き換え、この詰め物を外します。戻すときはどちらの形でも受け付けます。-・_ を元に戻し、足りない = を数えて補ってから復号します。ですから詰め物の外れた JWT の断片もそのまま貼れます。76文字ごとに改行するメール方式の Base64 も読めます。空白と改行は無視して読むからです。
日本語が行き来する道筋
ブラウザの btoa はバイトを文字として受け取る関数なので、ラテン1の外の文字を渡すと例外を投げます。ここでは先に UTF-8 に変換します。たとえば「あ」は E3 81 82 の3バイトになり、4文字 44GC として出てきます。戻すときも UTF-8 として読むため、Shift_JIS で作った値を入れるとエラーではなく文字化けが出ます。画像のような二進データも同じように読めない文字に戻るので、この道具は文字にだけ使ってください。
戻すのに失敗する入力
前後の空白は取り除いて読みますが、それ以外は六十四文字と -・_・= だけでなければなりません。data:image/png;base64, のような前置きを付けたまま入れると : と , で引っかかるので、コンマの後ろだけを入れてください。引用符で囲んだ値も同じ理由で失敗します。失敗すると、戻した文の代わりに Base64 ではなさそうだという表示が出ます。読めたのにバイトが UTF-8 でない場合は、エラーではなく文字化けが出ます。
長さは前もって数えられます
3バイトが4文字になるので、結果の長さはバイト数を3で割って切り上げ、4倍したものです。日本語の一文字は UTF-8 でちょうど3バイトなので、日本語だけの文は4文字ずつきれいに割れて = が付きません。한글 は 7ZWc6riA の8文字です。URL 安全な形は詰め物を外すので、同じ文でも最大2文字短くなります。
よくある質問
URL安全版とは何ですか
Base64が生む + と / は、URLやファイル名の中では別の意味を持ちます。URL安全版はそれらを - と _ に置き換え、末尾の = も落とします。JWTはこの形式です。デコードはどちらの形でも、指定なしに受け取ります。
デコードすると文字化けします
その値が別の道具から来たものなら、その道具がUTF-8以外の符号化を使った可能性があります。ここでのエンコードもデコードもUTF-8です。
URL用のBase64は違うと聞きました
+ と / はURLの中で別の意味を持つので、URL安全版はそれらを - と _ に替え、末尾の = も落とすことが多いものです。相手が期待するほうに合わせてください。
Base64にすると大きくなるのはなぜですか
3バイトが4文字になるので、およそ三分の一 増えます。画像をBase64でHTMLに埋め込むと通信は一つ減りますが文書が膨らむので、割に合うのは小さなアイコンくらいです。
`data:` の URL をまるごと入れたら失敗しました。
data:image/png;base64, までは URL の前置きであって Base64 ではありません。コンマの後ろから入れてください。ただし、その後ろが画像なら、戻しても読めない文字しか出ません。このツールは文字を戻すものなので、絵として見るなら URL をそのままブラウザのアドレス欄に入れるほうが早いです。
貼り付けたものはサーバへ送られますか
送られません。すべてブラウザの中で動き、送信も保存もしません。だからこそ、ふつうならウェブページに貼り付けない社内の設定ファイルや本番のクエリにも使えます。通信を切ったままでも動きます。