Clickjacking adalah serangan berbahaya yang menyebabkan pengguna tertipu sehingga mengklik link atau elemen UI di situs yang tampak seperti situs tepercaya dan sudah dikenal. Hal ini biasanya dilakukan dengan menyematkan sebagian atau seluruh situs tepercaya ke dalam situs berbahaya menggunakan <iframe>.
Header X-Frame-Options (XFO) dan perintah frame-ancestors di header Content-Security-Policy (CSP) dapat mengurangi serangan clickjacking dengan mengontrol cara situs disematkan dalam <iframe>.
Cara audit Lighthouse gagal
Audit akan lulus jika header XFO ditetapkan dengan SAMEORIGIN atau DENY, atau perintah frame-ancestors ditetapkan di header CSP. Audit akan gagal jika tidak satu pun kebijakan kontrol frame ini dikonfigurasi.
Cara menetapkan kebijakan kontrol frame untuk mengurangi clickjacking
Kebijakan kontrol frame perlu ditetapkan pada header HTTP permintaan dokumen awal. Header X-Frame-Options dan perintah frame-ancestors di Content-Security-Policy tidak akan berfungsi jika ditetapkan pada elemen <meta>.
Header XFO
Menetapkan DENY atau SAMEORIGIN untuk header XFO akan mengurangi serangan clickjacking:
X-Frame-Options: SAMEORIGIN
X-Frame-Options: DENY
Perintah SAMEORIGIN mengizinkan halaman ditampilkan hanya jika semua frame ancestor memiliki origin yang sama dengan halaman itu sendiri. Sebaliknya, perintah DENY mencegah halaman ditampilkan dalam frame, terlepas dari asal frame induk.
Header CSP
Perintah frame-ancestors dalam header CSP menentukan situs yang dapat menyematkan halaman tertentu di <frame>, <iframe>, <object>, atau <embed>. Serupa dengan XFO, perintah frame-ancestors CSP dapat digunakan untuk mengurangi serangan clickjacking dengan menyetelnya ke self atau none:
Content-Security-Policy: frame-ancestors 'self';
Content-Security-Policy: frame-ancestors 'none';
Namun, perintah frame-ancestors lebih fleksibel daripada XFO karena dapat menetapkan sumber induk tertentu yang dapat menyematkan halaman:
Content-Security-Policy: frame-ancestors 'self' https://example.com;