サーバ不要の自己複製base64ページ作った。

3864 ワード
フロントエンド base64 HTML5 JavaScript JavaScript テキストリンク

Base64

Base64は、データを64種類の印字可能な英数字のみを用いて、それ以外の文字を扱うことの出来ない通信環境にてマルチバイト文字やバイナリデータを扱うためのエンコード方式である。(Wikipediaより)

例えば

こんな画像
base64コマンドを使って

$ base64 hiyoko.jpg

/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAoACgDASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAAUGBAcD/8QALBAAAQMDAwMEAAcBAAAAAAAAAQIDBAAFEQYSITFBURMUFXEiI0JSYZGhwf/EABkBAAMBAQEAAAAAAAAAAAAAAAMEBQYAAv/EACERAAICAgICAwEAAAAAAAAAAAECAAMREgQhMVETQcHw/9oADAMBAAIRAxEAPwCYvnvZ0hMmyzI3rN7d6Nm0+RhR46GmlnssrUN2gOSwzEUtYEj8xLm1I6qTjjJHY8Zpu8h+Xb3TGSmLIBKdrqMoVnx3Bx/VeWlLFMi3N6St5Ts1/DbTKDlDScZUVEdSfPishv19fs1orz/dTqtpn6f06x7W1MJaUOd6sKWs+Sev/KeqXZ9TRDHuUVl5C04/GnkZ/nqK5nD0vCTcflp0cfIekWfU3FRCepA5x/macxpLUNSERxsSkYGTk0v8hVgVOfcA3EVs+/eZL670ONLvNvW9yOIS0nY/JClFKuwPOKK65HiRtTWH20zlIUFA4GQR35opoIbRuo8wScpahpaexN9jtVmtMYMw4jKf3LWkKWo+STU1qCFb496XPiRGUP7CnLY27vsdCa1PSynkHFJ7hJ9TJJqraqsmpEU49bK+2fM8PkW5DYwQPNL31NlWVDPPepG43I228raOQ2s7kn7req6JdSAk8cd+tQm76MsBdfEtrFdxDe2JUQgnkUVDx5yivIXgKOAaKJXaUGBA2cVLDsZXPTkn9VKZ1xQAcqFFFUXczwqgSRmz7ROdUJb7rvp5LiW28+j2znz0OP8Aaj3pkli0LuUdMh+F7lbGxtBK0JHIcUOgSaKKSFS5z7IjfZWNtCz/AJhR3RZayRuTgc47/R+6KKKHYgDkCdYxQgCf/9k=

こんな風に文字列で表現されるようになる。
上で生成された文字列の先頭にdata:image/jpg;base64,とつけるとDataURIとして扱える。

こんな感じ。

本題

画像だけでなくHTMLもbase64形式での表現が出来るので、

textareaなんかで自ページのソースコードを書き換える。→base64エンコードしてlocation.hrefで更新
というような事が可能。
↓実際に作った。
http://anochick.github.io/rat/


コレがデフォルトページ。適当に加工してみてからUpdate
ちなみに、日本語を使う場合は更にエンコードが必要この記事では紹介してない。

こうなる

data:text/html;base64,PGhlYWQ+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCI+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jb2RlLmpxdWVyeS5jb20vanF1ZXJ5LTIuMi4xLm1pbi5qcyI+PC9zY3JpcHQ+CiAgICA8c2NyaXB0PgogICAgICAkKGZ1bmN0aW9uKCl7CiAgICAgICAgJCgnI2h0bWwnKS52YWwoJCgnaHRtbCcpLmh0bWwoKSkKICAgICAgICAkKCcjcmVmcmVzaCcpLm9uKCdjbGljaycsZnVuY3Rpb24oKXsKICAgICAgICAgIGxvY2F0aW9uLmhyZWYgPSAnZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LCcrd2luZG93LmJ0b2EoJCgnI2h0bWwnKS52YWwoKSk7CiAgICAgICAgfSkKICAgICAgfSkKICAgIDwvc2NyaXB0Pgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgo8IS0tCmJvZHl7CmJhY2tncm91bmQtY29sb3I6I2VkYzsKfQotLT4KPC9zdHlsZT4KICA8L2hlYWQ+CgogIDxib2R5Pgo8aDE+SGVsbG8sV29ybGQhPC9oMT4KPG1hcnF1ZWU+d2VsY29tZSEgPC9tYXJxdWVlPgogICAgPHRleHRhcmVhIGlkPSJodG1sIj48L3RleHRhcmVhPgogICAgPGJ1dHRvbiBpZD0icmVmcmVzaCI+VXBkYXRlPC9idXR0b24+CiAgCjxwPkNvcHlyaWdodCA8YSBocmVmPSJodHRwczovL3R3aXR0ZXIuY29tL2Fub0NoaWNrIj5hbm9DaGljazwvYT4gcGl5b3BpeW8gKCk7PC9wPgo8L2JvZHk+

リンク先とか、画像とか全部base64表現にしたら１サイトまるまるサーバレスで出来上がるのではないか。

ちなみに、URL短縮サービスとか使って普通のURLとして扱えそうだけど軽く探した感じDataURIに対応しているサービスが見当たらなかった。