リンクを直接クリックするのは本当に悪なのか？

## 🎄 Qiita Advent Calendar 2024 🎄

この記事は，[Qiita Advent Calendar 2024](https://qiita.com/advent-calendar/2024) の [ひとりアドベントカレンダー by Hietan](https://qiita.com/advent-calendar/2024/hietan) というカレンダーの１日目の記事です．

https://qiita.com/advent-calendar/2024/hietan

アウトプット力の強化を目的に，25日分すべて１人で書ききるというチャレンジをしています．是非他の記事もご覧ください．

## はじめに

先日，X (旧Twitter) にてこのような投稿を見かけました．

https://x.com/fkmintn/status/1733171457390494159
 
> リンクをなぜコピペするんだ？クリックしたほうが早いじゃん！

という意見なのですが，コメントやコミュニティノートでは

> リンクのクリックは危険！

という意見が多くみられました．

なんとなく理解できるような，理解できないような...
だってリンクはリンクだし，コピペしてもクリックしても同じリンクだし...

ということでコピペとクリックでどう変わるのか，検証してみました．

## リンクはリンクじゃなかった！

調べてみた結果，目に見えるURLと，実際に遷移するURLを別物にする手法があることがわかりました．私が検索・検証して見つけた２つのパターンを紹介しようと思います．

:::note warn
本記事を閲覧する環境によって動作が異なる場合があります．
:::

### 1. リンクのテキストを画像として埋め込む

テキストと誤認させる画像をリンク付きで埋め込んでリンクの遷移先は別ページというパターンです．

例えば，`https://qiita.com/` と **書かれただけの画像** を準備します．

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1206897/0f5f4551-3c5b-a6f4-d94a-4574b603eb0f.png" alt="リンクの画像" width=50%>

青文字にしたり下線を付けるといかにもクリックできそうですね．

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1206897/73cdfa7c-0c13-f6ea-f100-3742a934c31e.png" alt="リンクの画像" width=50%>

あとは，この画像をリンクとして設定すれば完了です．
例えば HTML なら以下の通りです．

```html
<a href="https://google.com/">
  <img src="link.png" />
</a>
```

これだけです．

実際にやってみましょう．
以下のリンクをクリックしてみてください．

:::note warn
新しいタブでページが開きます
:::

> ↓　このリンクをクリック

<a href="https://google.com" target="_blank">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1206897/73cdfa7c-0c13-f6ea-f100-3742a934c31e.png" alt="リンクの画像" width=50%>
</a>

> ↑　このリンクをクリック

Qiitaのリンクのはずなのに，Googleが開きました．
今回は画像であることが一目瞭然ですが，透過画像を使用したり大きさを調整したりすると，本当に見分けがつかないですね．

### 2. href属性と表示されるテキストをずらす

今度はテキストで同じことをやってみます．
早速実例ですが，HTMLで以下のコードを実装します．

```html
<a href="https://google.com/">https://qiita.com/</a>
```

これだけです．

実際にやってみましょう．
以下のリンクをクリックしてみてください．

:::note warn
新しいタブでページが開きます
:::

> ↓　このリンクをクリック

<a href="https://google.com/" target="_blank">https//qiita.com</a>

> ↑　このリンクをクリック

同じくQiitaのリンクのはずなのに，Googleが開きました．
今回はきちんとテキストなので，見た目では全く見分けがつきません．

これの遷移先が偽のログイン画面だったら...
想像するだけで怖いですね．

## コピペの場合は？

先ほどの例では，リンクをクリックする例を示しました．
コピペの場合はどうなるのでしょうか？

### 1. リンクのテキストを画像として埋め込む 場合

先ほどと同じものを用意しました．
今度はコピーしてブラウザの検索欄に貼り付けてみてください．

> ↓　このリンクをコピー＆ペースト

<a href="https://google.com" target="_blank">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1206897/73cdfa7c-0c13-f6ea-f100-3742a934c31e.png" alt="リンクの画像" width=50%>
</a>

> ↑　このリンクをコピー＆ペースト

`リンクの画像` と表示されました．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1206897/44834cf4-50f5-7732-74a8-7e0246eaebe0.png)

これは画像のalt属性です．
コピー＆ペーストすることで，別サイトに移動させられることはなくなりました．

### 2. href属性と表示されるテキストをずらす 場合

同じようにコピーしてブラウザの検索欄に貼り付けてみましょう．

> ↓　このリンクをコピー＆ペースト

<a href="https://google.com/" target="_blank">https//qiita.com</a>

> ↑　このリンクをコピー＆ペースト

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1206897/c987bc51-a817-2ea2-48c7-de92fe99ef5f.png)

Qiitaのリンクが入力されました．
これで見た通りのリンクに遷移することができそうです．

このように，コピー＆ペーストを利用することで，想定していないリンクに遷移するリスクを減らすことができます．

## 対策法

偽物のリンクに遷移されないようにどのような対応が必要でしょうか？

### コピー＆ペーストを利用する

先述の通り，コピペを利用することで想定していないリンクに遷移することがなくなりました．
これはコピペするときに **href属性ではなく見た目上の値がコピー** されるためです．

### 遷移先のURLを確認する

遷移先のURLを確認することで偽サイトを踏む可能性を減らすことができます．
ただし先述のとおり，遷移前のページに表示された，**見た目上のURL** は信用できません．

例えば，Chromeの場合，リンクをホバーすると画面左下に遷移先のURLが表示されます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1206897/7ae5c1c9-82ef-36b2-52e8-701a310da2dd.png)

この値は実際の遷移先URLのため，ここを確認することで偽サイトを踏む可能性を減らせそうです．

## おわりに

ここまで記事をご覧いただきありがとうございました．
自分自身もこの記事を書いていて，偽リンクを踏ませる手段がいかに巧妙か，その恐ろしさを身をもって体感しました．
自分の個人情報を守るためにも，リンクのクリックはより一層慎重になり，遷移先での個人情報の入力は気を付けなければなりません．

## 参考

- 独立行政法人 情報処理推進機構，『URLリンクへのアクセスに注意』，https://www.ipa.go.jp/security/anshin/attention/2021/mgdayori20210831.html ，2021年8月31日

---

この記事は，[Qiita Advent Calendar 2024](https://qiita.com/advent-calendar/2024) の [ひとりアドベントカレンダー by Hietan](https://qiita.com/advent-calendar/2024/hietan) というカレンダーの１日目の記事です．

https://qiita.com/advent-calendar/2024/hietan

アウトプット力の強化を目的に，25日分すべて１人で書ききるというチャレンジをしています．是非他の記事もご覧ください．