Tất cả thông tin do IBM cung cấp trên trang này và trong các tài liệu được liên kết đều được cung cấp 'nguyên trạng' kể từ thời điểm xuất bản và IBM có quyền thay đổi hoặc cập nhật nội dung này mà không cần thông báo vào bất kỳ lúc nào

Phòng thí nghiệm này chứa lỗ hổng tập lệnh chéo trang dựa trên DOM trong chức năng blog tìm kiếm. Nó sử dụng phép gán

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

0, thay đổi nội dung HTML của phần tử

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

1, sử dụng dữ liệu từ

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

2

Để giải quyết vấn đề này, hãy thực hiện tấn công cross-site scripting gọi hàm

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

3

Dung dịch

1. Nhập nội dung sau vào hộp tìm kiếm

   // This WILL run
   div.innerHTML = '';
   
   // This will, too
   div.innerHTML = '';
   

   4
2. Nhấp vào "Tìm kiếm"

Giá trị của thuộc tính

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

5 không hợp lệ và gây ra lỗi. Điều này kích hoạt trình xử lý sự kiện

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

6, sau đó gọi hàm

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

7. Do đó, tải trọng được thực thi bất cứ khi nào trình duyệt của người dùng cố tải trang có chứa bài đăng độc hại của bạn

QUAN TRỌNG. một số thông tin trong bài viết này đã lỗi thời. Vui lòng đọc bài viết cập nhật này để thay thế

Tôi thường sử dụng

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

0 để đưa HTML vào một phần tử bằng vanilla JavaScript

Hôm qua, một trong những sinh viên của tôi đã hỏi tôi về sự nguy hiểm của cross-site scripting (XSS) khi sử dụng thuộc tính này. Anh ấy đã được thông báo rằng nó không an toàn và không bao giờ sử dụng nó

Hôm nay, hãy giải nén nó và tìm hiểu cách ngăn chặn các cuộc tấn công XSS với

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

0

Làm thế nào nó hoạt động

Ý tưởng đằng sau một cuộc tấn công XSS với

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

0 là mã độc sẽ được đưa vào trang web của bạn và sau đó thực thi. Điều này là có thể vì

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

0 hiển thị đánh dấu hoàn chỉnh chứ không chỉ văn bản

Tuy nhiên, có một biện pháp bảo vệ tích hợp sẵn. Chỉ thêm một phần tử

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

2 sẽ không khiến bạn bị tấn công, bởi vì phần DOM mà bạn đang đưa vào đã được phân tích cú pháp và chạy

// This won't execute
var div = document.querySelector('#some-div');
div.innerHTML = '';

Tuy nhiên, JavaScript chạy sau đó sẽ

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

Khi nào đây là một vấn đề

Nếu bạn đưa phần đánh dấu của riêng mình vào một trang, thì không có gì đáng lo ngại. Mối nguy hiểm đến từ việc đưa đánh dấu của người dùng và bên thứ ba vào DOM

Nếu bạn đang thêm nội dung vào một trang mà bạn không viết, bạn nên dọn dẹp nội dung đó để bảo vệ bản thân khỏi các cuộc tấn công XSS

Hãy xem cách

Một giải pháp thay thế an toàn cho // This WILL run div.innerHTML = ''; // This will, too div.innerHTML = ''; 0

Một cách tiếp cận siêu dễ dàng. sử dụng

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

1 thay vì

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

0. Điều này chỉ nhận và đưa nội dung văn bản, không đánh dấu, từ và vào một nút DOM

// Renders a string with escaped characters
// This would show up in the DOM as  instead of as an image element
div.textContent = '';

Thuộc tính

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

1 hoạt động trong tất cả các trình duyệt hiện đại và IE9 trở lên

Vệ sinh nội dung trước khi thêm nó vào DOM

Thuộc tính

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

1 rất tuyệt nếu bạn chỉ thêm văn bản, nhưng nếu bạn đang thêm một số nội dung của bên thứ ba như một phần của một số đánh dấu bổ sung, thì bạn vẫn muốn sử dụng

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

0

Để làm cho nó an toàn, bạn sẽ cần làm sạch nội dung (nghĩa là xóa đánh dấu không được phép) trước khi chèn nội dung đó

Nếu mã của bên thứ ba không được phép chứa bất kỳ đánh dấu nào, bạn có thể sử dụng phương pháp trợ giúp để xóa đánh dấu khỏi mã

/*!
 * Sanitize and encode all HTML in a user-submitted string
 * (c) 2018 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String} str  The user-submitted string
 * @return {String} str  The sanitized string
 */
var sanitizeHTML = function (str) {
	var temp = document.createElement('div');
	temp.textContent = str;
	return temp.innerHTML;
};

Điều này hoạt động bằng cách tạo một

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

6 tạm thời và thêm nội dung bằng

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

1 để thoát khỏi bất kỳ ký tự nào. Sau đó, nó trả về chúng bằng cách sử dụng

// This WILL run
div.innerHTML = '';

// This will, too
div.innerHTML = '';

0 để ngăn các ký tự đã thoát đó chuyển đổi trở lại thành đánh dấu không thoát

// Renders 
<img src=x onerror="alert('XSS Attack')">
div.innerHTML = '
' + sanitizeHTML('') + '
';

Nếu nội dung của bên thứ ba được phép chứa đánh dấu, thư viện trợ giúp như DOMPurify sẽ xóa mọi đánh dấu không nằm trong danh sách trắng an toàn trước khi đưa nội dung đó vào