データURI のフォーマットを使ってブラウザのアドレス欄に HTML を直接送り込んでみる

Posted at 2024-07-05

はじめに

今回の内容は、ふと思いついた内容を試してみたというものです。

この内容を思いついて試したきっかけは、過去に見かけたことがあった「ブラウザをメモ帳的なものにできる」というネタについて、詳細をあらためて見なおしたことになります。

ブラウザをメモ帳みたいにできる話について、少し補足します。

以前見かけていたのは、以下の内容をブラウザのアドレス欄に入力して実行すると、ブラウザをメモ帳的なものにできるというネタです。

data:text/html, <html contenteditable>

これを実際にやってみると、ページが表示される部分がメモ帳のようになります。
（以下の赤矢印の部分は、自分が後からテキストを入力したところです）

その話が書かれているサイトは以下で、上記の内容関する説明も書かれています。

説明が書かれているのは、以下の部分です。
それを元に仕組みを書くと、「データURI のフォーマットを使って、ブラウザに html のレンダリングを指示しており、なおかつその html の中で contenteditable属性を指定して、ページを編集可能な状態にしている」というもののようです。

この、「データURI のフォーマットを使って、ブラウザに html のレンダリングを指示する」という部分で、別の内容を実行させるとどうなるかが気になって、今回の内容を試しました。

上の例では、html のみを使ってましたが、JavaScript の処理を含むものが想定で通り動くかを試してみたくなりました。

データURIフォーマットを使用して、JavaScript を含む html をアドレス欄に入力してみます。

具体的には、以下の内容です。

data:text/html,<html><body><script>alert('Hello!');</script></body></html>

これを試すと、以下のようにアラートが表示されました。

上記は javascript: で始まる文字列を、以下のページに書いてある方法でブラウザのアドレス欄に入力して実行することもできます。

●Bookmarkletを作ろう(準備編） #JavaScript - Qiita
　https://qiita.com/kanaxx/items/63debe502aacd73c3cb8

ブックマークレットを作る時によく使う書き方だと思いますが、利用する文字列は、具体的には以下の内容です。

javascript:alert('Hello!');

これでも、同じようにアラートを表示できます。
（※ 文字列を単にアドレス欄に入力して実行してしまうとうまく動かず、上記の参考サイトにある手順でやるのが良いです）

次に、これも思いつきでやったものですが、ブックマークへの登録というのをやってみました。

上で使っていた、以下の文字列をブックマークに登録して、それを開いてみます。

data:text/html,<html><body><script>alert('Hello!');</script></body></html>

何かに活用できるかどうかもよくわからないですが、思いつきで試してみたというネタの話でした。