JavaScriptを使ってページ移動機能を作ることで、リンクではない文字や画像をリンクのように動作させる方法
最後に、JavaScriptを使って隠しリンクを作る方法をご紹介いたします。HTMLの機能を使って作るリンクではないため、前ページでご紹介したリンクの一覧作成アドオンなどを使ってもリストアップされません。HTMLソースでhref属性の存在などを探しても見つけられないので、そこそこ見つけにくい隠しリンクになるでしょう。■JavaScriptを使って、リンクではない文字をリンクのように動作させる表示例:
ここにJavaScriptで作った隠しリンクがあります。
上記の「隠しリンク」の文字をクリックすると隠しページへ移動できます。HTMLのリンク関連要素は使っていないので、文字の配色は通常の文字と同じですし、マウスポインタを載せてもポインタの形状は変化しませんし、ステータスバー等にもリンク先URLは表示されません。■この隠しリンクの作り方(A):
まず、HTMLソースを以下のように記述しておきます。
ここにJavaScriptで作った <span onclick="ShowSecretPage();">隠しリンク</span> があります。ここでは、span要素内に含めた文字がリンクになります。画像を隠しリンクにしたい場合は「隠しリンク」という文字の代わりに画像(img要素)を書いて下さい。span要素にはonclick属性を加えて、ShowSecretPageという関数を実行しています。この関数の中身は、以下のようにJavaScriptで記述します。
<script type="text/javascript"> function ShowSecretPage() { window.location.href = 'hidepage.html'; } </script>ここでは、「hidepage.html」がリンク先URL(隠しページ)です。
上記のソースでは、JavaScriptでShowSecretPage関数を作って、hrefプロパティにURLを代入しています(ここでは「hidepage.html」というファイル名しか書いていませんが「http://」などから始まるURLを書いても構いません)。この関数が実行されると、ここで記述したURLに移動します。
※関数名は自由に変更して下さい。関数名が「ShowSecretPage」だと、ソースを見られた際に分かりやすすぎるかもしれません。関数名を変更した際は、HTML側のonclick属性値に記述する関数名も併せて変更するのを忘れないようご注意下さい。
上記のJavaScriptソースはHTMLソース内に記述しても構いませんが、それだとHTMLソースを見るだけでリンク先がどこなのか分かりやすくなってしまいます。より探しにくくするには、独立したJavaScriptファイルに記述しておいて、そのJavaScriptファイルをHTMLから読み込む方が良いでしょう。その方法は下記の通りです。
■この隠しリンクの作り方(B):
まず、以下の3行を例えば「sample.js」というファイル名で保存します。
function ShowSecretPage() { window.location.href = 'hidepage.html'; }次に、HTMLソースのどこかに、以下の1行を追加します。
<script type="text/javascript" src="sample.js"></script>これで、HTMLから sample.js ファイルに書かれたJavaScriptソースが読み込めます(HTMLファイルとJavaScriptファイルが同じ場所にアップロードされている場合)。あとは、作り方(A)と同様に隠しリンクを作ります。
ここにJavaScriptで作った <span onclick="ShowSecretPage();">隠しリンク</span> があります。このようにしておけば、HTMLソースを読んだだけでは隠しリンクのリンク先は分かりません。
この隠しリンクの見つけ方・攻略法
HTMLのa要素やarea要素などのリンク関連要素は使っていないため、前ページでご紹介したリンク一覧生成アドオンなどでは見つけられません。ただ、ソース(HTMLだけでなくJavaScriptも含む)のどこかにリンク先URLを表す文字列が記述されていることは間違いないので、「http」や「.html」などのリンク先URLに含まれていそうな文字列で検索してみると見つけられるかもしれません。ただし、URLは必ずしも「http」で始まったり「.html」で終わったりしているわけではありませんから、これで絶対に見つけられるわけではありません。
もし、JavaScriptで作られている可能性を考えるなら、「location.href」などのキーワードでソース内を検索すると見つけやすいでしょう。
隠しリンクの作り方と見つけ方
今回は、ちょっとした遊びとして隠しリンクを作る方法と、その見つけ方を4種類ご紹介いたしました。なお、リンク自体は隠さないもののパスワードを入力しないと閲覧できなくする方法など、下記の関連記事もぜひご参照下さい。【関連記事】