JavaScript - Tấn công Clickjacking

Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ cùng nhau khám phá thế giới đầy thú vị của bảo mật web, cụ thể là một chiêu trò nhỏ nhưng nguy hiểm叫做 Clickjacking. Đừng lo lắng nếu bạn là người mới bắt đầu lập trình - tôi sẽ hướng dẫn bạn từng bước qua chủ đề này, giống như tôi đã làm cho hàng trăm học sinh trong những năm dạy học của mình. Vậy, chúng ta hãy bắt đầu nhé!

JavaScript - Clickjacking Attack

Tấn công Clickjacking

Hãy tưởng tượng bạn đang chuẩn bị nhấp vào một video về mèo cute, nhưng thay vào đó, bạn vô tình đặt hàng 100 con vịt cao su. Đó chính là điều mà một cuộc tấn công clickjacking làm - nó lừa bạn nhấp vào điều bạn không có ý định.

Clickjacking, còn được gọi là UI redressing, là một kỹ thuật độc hại được kẻ tấn công sử dụng để lừa người dùng nhấp vào điều khác với những gì họ nghĩ mình đang nhấp vào. Điều này có thể dẫn đến các hành động không mong muốn, đánh cắp dữ liệu, hoặc thậm chí cài đặt phần mềm độc hại.

Tấn công clickjacking hoạt động như thế nào?

Bây giờ, hãy phân tích cách mà cuộc tấn công này thực sự hoạt động:

Kẻ tấn công tạo một trang web có vẻ vô hại.
Họ chèn một trang web mục tiêu (trang web họ muốn bạn tương tác) vào một iframe vô hình.
Trang web của kẻ tấn công được thiết kế để che phủ hoàn hảo các nút hoặc liên kết của trang web mục tiêu.
Khi bạn nghĩ rằng bạn đang nhấp vào trang của kẻ tấn công, bạn thực sự đang tương tác với trang web mục tiêu ẩn.

Đó giống như một chiêu trò của phù thủy, nhưng với các trang web!

Ví dụ

Hãy cùng xem một số ví dụ mã để hiểu rõ hơn về khái niệm này. Đừng lo lắng nếu bạn chưa hiểu ngay lập tức - chúng ta sẽ phân tích kỹ!

Ví dụ 1: Clickjacking cơ bản

<html>
<head>
<title>Win a Prize!</title>
<style>
#target_website {
position:relative;
width:128px;
height:128px;
opacity:0.00001;
z-index:2;
}
#decoy_website {
position:absolute;
width:300px;
height:400px;
z-index:1;
}
</style>
</head>
<body>
<div id="decoy_website">
<h1>Nhấp vào đây để nhận giải thưởng!</h1>
<button>Claim Prize</button>
</div>
<iframe id="target_website" src="https://example.com/delete-account"></iframe>
</body>
</html>

Trong ví dụ này:

Chúng ta tạo một trang web giả promise một giải thưởng.
Chúng ta chèn trang web mục tiêu (example.com/delete-account) vào một iframe vô hình.
Iframe được đặt chồng lên nút "Claim Prize".
Khi người dùng nhấp vào nút, họ thực sự đang nhấp vào nút xóa tài khoản trên trang web mục tiêu!

Ví dụ 2: Clickjacking với Kéo và Thả

<html>
<head>
<title>Photo Editor</title>
<style>
#target_website {
position:absolute;
width:300px;
height:400px;
opacity:0.00001;
z-index:2;
}
#decoy_website {
width:300px;
height:400px;
z-index:1;
}
</style>
</head>
<body>
<div id="decoy_website">
<h1>Kéo hình ảnh để chỉnh sửa</h1>
<img src="cute_cat.jpg" draggable="true" ondragstart="drag(event)">
</div>
<iframe id="target_website" src="https://example.com/share-private-data"></iframe>
<script>
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
</script>
</body>
</html>

Trong ví dụ này phức tạp hơn:

Chúng ta tạo một giao diện giả của phần mềm chỉnh sửa ảnh.
Trang web mục tiêu (có thể chia sẻ dữ liệu riêng tư) được chèn vào một iframe vô hình.
Khi người dùng cố gắng kéo và thả hình ảnh, họ có thể không biếtingly tương tác với trang web mục tiêu, có thể chia sẻ thông tin cá nhân.

Các sự cố Clickjacking trong thế giới thực

Clickjacking không chỉ là một mối đe dọa lý thuyết. Nó đã được sử dụng trong các cuộc tấn công thực tế:

Năm 2008, một con sâu clickjacking lan truyền qua Facebook, làm cho người dùng vô hình trung nhấp vào nút "Like" trên một số trang.
Năm 2012, một nhà nghiên cứu đã chứng minh một cuộc tấn công clickjacking trên thị trường ứng dụng của Google Android, có thể lừa người dùng mua ứng dụng mà không biết.
Năm 2017, một lỗ hổng clickjacking được phát hiện trong Microsoft Outlook Web App, có thể cho phép kẻ tấn công đọc email của nạn nhân.

Những sự cố này cho thấy tầm quan trọng của việc hiểu và phòng ngừa các cuộc tấn công clickjacking.

Biện pháp phòng ngừa

Bây giờ chúng ta đã biết về các nguy cơ, hãy xem cách chúng ta có thể bảo vệ chống lại clickjacking:

Phương pháp	Mô tả	Ví dụ
X-Frame-Options	HTTP header ngăn chặn một trang từ việc hiển thị trong một iframe	`X-Frame-Options: DENY`
Content Security Policy	Cho phép kiểm soát chi tiết hơn về nguồn nào có thể chèn nội dung của bạn	`Content-Security-Policy: frame-ancestors 'self'`
Frame Breaking Scripts	JavaScript phá vỡ khỏi iframe	`if (top != self) top.location = self.location;`
SameSite Cookies	Ngăn chặn cookies được gửi trong các yêu cầu cross-site	`Set-Cookie: session=123; SameSite=Strict`

Hãy xem một ví dụ đơn giản về script phá vỡ iframe:

<html>
<head>
<style>html{display:none;}</style>
<script>
if (self == top) {
document.documentElement.style.display = 'block';
} else {
top.location = self.location;
}
</script>
</head>
<body>
<h1>Nội dung được bảo vệ</h1>
<p>Trang này được bảo vệ khỏi clickjacking!</p>
</body>
</html>

Script này làm như sau:

Đầu tiên ẩn toàn bộ trang.
Kiểm tra xem trang có phải là cửa sổ顶层 hay không.
Nếu có, hiển thị nội dung.
Nếu không (tức là nó trong một iframe), phá vỡ khỏi iframe.

Nhớ rằng, bảo mật web giống như một trò chơi mèo và chuột. Khi có phương pháp tấn công mới xuất hiện, chúng ta phải liên tục cập nhật các biện pháp phòng thủ. Hãy luôn tò mò, tiếp tục học hỏi và luôn ưu tiên bảo mật trong hành trình phát triển web của bạn!

Tôi hy vọng hướng dẫn này đã giúp bạn hiểu rõ hơn về các cuộc tấn công clickjacking. Nhớ rằng, với quyền lực lập trình lớn cũng đi kèm với trách nhiệm lớn. Sử dụng kỹ năng của bạn một cách thông minh và chúc bạn lập trình vui vẻ!

Credits: Image by storyset

Hướng Dẫn Trước:

JavaScript - IndexedDB

Hướng Dẫn Tiếp Theo:

JavaScript - Currying