clickjacking —— 如何在讓你在不知不覺中，點到我的讚賞鍵？

本文演示的攻擊方式僅適用於讚賞鍵，難以適用於 matters 的拍手。

讚賞鍵如何嵌入網頁？

讚賞鍵是使用 iframe 嵌入網頁裡面，簡單而言就是把一個網頁整個放進當前頁面的某個區塊裡面。

讚賞鍵怎麼知道讚是給誰的？給哪篇文章的？

iframe 中最重要的屬性是 src，也就是要嵌入的網頁網址，而讚賞鍵的網址結構如下：

https://button.like.co/in/embed/{liker id}/button?type=wp&referrer={文章網址}

clickjacking（點擊劫持） 如何運作？

正常情況下，用戶會在明確看到讚賞鍵的情況下進行點擊。但透過 CSS（用於設定網頁樣式的語言），可以把 iframe 的不透明度調到 0，從而讓讚賞鍵對用戶隱形。

接下來，只要再把讚賞鍵放在用戶可能會點擊的位置，例如：影片播放、關閉提示、點擊遊戲，就可以使用戶在不知不覺中點擊到讚賞鍵了。

實際演示

在這個範例中，先切換到「Result」頁面，然後點擊畫面中的紅色圓圈，實際上就會點擊到我的讚賞鍵。

勾選「現出原形」，可以看到讚賞鍵實際就位於紅色圓圈的位置，只是透過調整不透明度將其隱藏起來而已。

如何修復？

要防止 clickjacking ，可以透過設定 x-frame-options 來防止網頁被嵌入他人的頁面中。但這樣一來，讚賞鍵就不能自然的成為原本文章網頁中的一部分了，而是要另開一個新的頁面前去點擊，頗為影響使用者體驗。

其他問題

讚賞鍵所對應的文章是由 referrer 參數決定，所以可以透過更改 referrer，來突破每篇文章只能按 5 次讚的限制。例如：一個頁面放兩個不同 referrer 的讚賞鍵，或是乾脆放個刷新鍵來切換 referrer。

另外，也可以結合 clickjacking，自動在背景定時切換 referrer，讓用戶的每一下點擊都不被「浪費」。