JavaScript疑似プロトコルとは:「javascript:」

JavaScriptプロトコル

javascript:」で始まるプロトコルです。
プロトコルであるため、「http:」や「file:」と同じ位置づけの機能です。

ただし、デファクトスタンダード(事実上の標準)な機能であり、有効なURIスキームではありません。そのため、IANA(インターネット資源のグローバルな管理する組織)は「javascript:」をURIとして管理していません。

そのため、「javascript疑似プロトコル」と言うのが一般的です。

Uniform Resource Identifier (URI) Schemes

主な使用用途

アドレスバーからJavaScriptを使用する

ブラウザのアドレスバーにjavascript疑似プロトコルを入力すると、表示中のページでJavaScriptを実行できます。

javascript:alert('Hello World')
javascript:/* 処理 */

※最新のブラウザは、アドレスバーにjavascript疑似プロトコルをコピーすると先頭の「javascript:」が自動的に削除されます。セキュリティ対策の一環だと考えられます。
 「javascript:」を直接の手入力することで回避できます。
※Firefox63からアドレスバーでのJavaScript実行は無効化されました。

ブックマークからJavaScriptを使用する

ブラウザのブックマーク(お気に入り)機能のURL欄にjavascript疑似プロトコルを設定することで、ブックマークを選択したタイミングで表示中のページにJavaScriptを挿入することができます。このことをブックマークレットと言います。

<a href>でJavaScript実行する

javascript疑似プロトコルを利用してa要素のhref属性でスクリプトを実行します。

<a href="javascript:alert('Hello World')">click</a>
<a href="javascript:/* 処理 */;void(0);">click</a>
<a href="javascript:void((function(){/* 処理 */})())">click</a>

※応答(最後の処理)でundefinedを返すように設計してください。
 undefined以外を応答すると、ブラウザは応答内容を表示します。

備考(href属性の無効化)

a要素は、それだけではリンクとして機能しません。a要素にhref属性がある場合、リンクとして機能します。リンクは、クリック後にリンク先ページに移動してしまいます。ですが、リンクをクリックしても動作のみを行い、ページ移動はしないでほしいことがあります。リンクをボタンとして利用したいことがあります。

<a href="javascript:void(0)">

<a href="javascript:void(0)">click</a>

void(0)は、undefinedを返します。a要素のhref属性は、undefinedが指定された場合何もしません。これにより、リンク機能自体を無効化することができます。

javascript:undefindとしない理由
 undefindは、グローバル変数であるため、書き換えが可能なためです。
 void(0)は、undefinedが保証されるため、一般的に使用されます。
 void演算子は、他の使用方法もありますが、一般的にvoid(0)が使用されます。

クリックイベントのキャンセル

クリックイベントをキャンセルすることで親要素(クリックされたのは、子のテキストノード)であるa要素へのイベント伝搬を阻止し、リンク機能を無効化できます。

クリックイベントのキャンセルは、「onclickreturn false;」するか「event.preventDefault()」でキャンセルすることができます。

備考(href属性のリンク先)

表示中のページへのリンク<a href="">click</a>
表示中のページ先頭へのリンク<a href="#">click</a>

備考(CSP問題)

コンテンツセキュリティポリシー (CSP) は、クロスサイトスクリプティング (XSS) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤーです。これらの攻撃はデータの窃取からサイトの改ざん、マルウェアの拡散に至るまで、様々な目的に用いられます。

https://developer.mozilla.org/ja/docs/Web/HTTP/CSP

CSP対策を施したウェブページでは、外部からのスクリプト実行を制限できるようになります。これにより、ウェブページは、ブックマークレットからのJavaScriptの注入を受け付けなくなります。

CSP問題を回避する

CSP問題を回避する方法は、ブラウザ拡張機能を使用することです。

ブックマークレットは、ページにスクリプトを注入します。そのため、ページスクリプトの権限で動作します。

ですが、ブラウザ拡張機能は、バックグラウンドスクリプト又は、コンテンツスクリプトの権限でスクリプトを実行することができます。このため、ブラウザ拡張機能であれば、CSP問題を回避できます。

ブラウザ拡張機能には、ユーザスクリプトを実行できる拡張機能が存在します。ユーザスクリプトは、ウェブページの読み込み時に実行されるスクリプトでブックマークレットと同様に使用できます。ただし、ユーザスクリプトでは実行タイミングを「ブックマーク選択時」とすることができません。

資料

参考