前端工程師要懂的資安問題不比後端少，甚至我覺得比後端來得多。老話一句：『資安心法：不要相信任何客戶端的驗證』。

一、什麼是 Clickjacking

請 Google://

二、如何防範 Clickjacking

目前最主流的解法就是在 HTTP Header 中設定「X-Frame-Options」。

X-Frame-Options 支援的選項為： - DENY - SAMEORIGIN - ALLOW-FROM

例如目前 Facebook 使用的是『X-Frame-Options: DENY』。

這個方法受限於瀏覽器的實作，目前僅支援： - Chrome 4.1.249.1042 (含) 以上版本、 - Firefox 3.6.9 (含) 以上版本、 - IE 8 (含) 以上版本、 - Opera 10.50 (含) 以上版本、 - Safari 4 (含) 以上版本。

額外需要特別說明的是，選項 ALLOW-FROM 在 Firefox 17 (含) 以前版本、IE 8 (含) 以前版本及 Safari 全版本是不支援的。也就是說 IE 6 / 7 / 8 及 Safari 全系列是不支援的。

因此，X-Frame-Options 無法全面解決這個問題。倘若你因為法規或是目標客群的關係，需要替他們解決 Clickjacking，就必須配合額外的解決方案。

三、Javascript 的額外解決方案

這裡指的「額外」意指務必與 X-Frame-Options 配合使用。

Javascript 的保護性不如 X-Frame-Options，但至少對舊瀏覽器而言，仍可進一步阻止一般駭客的攻擊。

但若參考的程式是舊範本，防護力是不夠的，例如：

<script>
if (top!=self) top.location.href=self.location.href
</script>

因為這段程式容易被繞過。目前實務上比較推薦下述程式 (記得自己拆分)：

<style>body {display: none; !important;}</style>
<script>
if (self == top) {
    document.body.style.display = "block";
} else {
    top.location = self.location;
}
</script>

可惜的是，雖然被繞過的技術門檻變高了，但仍無法應付資深駭客。

四、Advanced Clickjacking / Clickjacking + Man in the middle

不管是 X-Frame-Options 或 Javascript 防護，遇到 Man in the middle 全都沒戲唱。千萬別以為 HTTPs (SSL/TLS) 是萬靈丹，因為還是可能遇到：

  • SSL/TLS 本身的問題。
  • SSL/TLS 的誤用。
  • Man in the middle 不一定要直接面對 SSL/TLS，在某些情況下繞過它們就行了。

五、最佳實務？

我個人覺得一般網站使用 X-Frame-Options 或 X-Frame-Options + Javascript 防護即可。但若服務夠大，且面臨到與金錢(銀行、電商等)、軍規、或個資等議題有關時，我的建議還是要盡力避免 Advanced Clickjacking。

至於如何達到最佳實務？很多業界的作法或產品都可以借鏡。不過要注意的是，雖然他們都說可解，但實際上 99% 都沒有效。