Vệ sinh trong Javascript là gì?

Question

Trong vài ngày qua, chúng tôi đã xem xét cách thức hoạt động của các cuộc tấn công tập lệnh chéo trang và cách đưa văn bản thuần túy hoặc chuỗi HTML được mã hóa vào có thể giúp bạn an toàn hơn. Chúng tôi cũng đã xem xét một số nhược điểm của cả hai kỹ thuật đó

Nội dung chính Show

Vệ sinh là gì?
Cách vệ sinh chuỗi HTML bằng vanilla JS
Tạo một thư viện vệ sinh
Loại bỏ các phần tử let parser = new DOMParser(); let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html'); // doc.body is a real HTML element with the malicious image // No alert is thrown, though, because the elements exist outside the DOM console.log(doc.body); 8
Loại bỏ các thuộc tính độc hại
Sử dụng nó
Chức năng của vệ sinh là gì?
Vệ sinh một tập tin có nghĩa là gì?
Làm cách nào để khử trùng một đối tượng trong JavaScript?
Làm sạch một URL có nghĩa là gì?

Hôm nay, chúng ta sẽ xem xét một cách tiếp cận cuối cùng. vệ sinh. Nào cùng đào vào bên trong

Vệ sinh là gì?

Sanitizing là quá trình xóa bất kỳ thuộc tính, thuộc tính và giá trị nào không có trong danh sách cho phép hoặc bị cấm rõ ràng trong danh sách không cho phép

Ví dụ: nếu HTML được hiển thị từ chuỗi HTML của chúng tôi trông như thế này…

<p><img src=x" onerror="alert('XSS Attack')"></p>
<p><a href="javascript:alert('Another XSS Attack')">View My Profile</a></p>

Phiên bản vệ sinh có thể trông như thế này

<p><img src=x"></p>
<p><a>View My Profile</a></p>

Khi được thêm vào giao diện người dùng, một số mục có thể bị hỏng nhưng nội dung độc hại sẽ không được hiển thị

Cách vệ sinh chuỗi HTML bằng vanilla JS

Phương thức

<p><img src=x"></p>
<p><a>View My Profile</a></p>

5 chuyển đổi một chuỗi HTML thành HTML thực mà không hiển thị nó trong DOM thực. Kết quả là, mọi mã độc hại sẽ không được thực thi (và sẽ không được thực thi cho đến khi các phần tử HTML đó được đưa vào giao diện người dùng)

let parser = new DOMParser();
let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html');

// doc.body is a real HTML element with the malicious image
// No alert is thrown, though, because the elements exist outside the DOM
console.log(doc.body);

Các thư viện Sanitizer sử dụng phương pháp

<p><img src=x"></p>
<p><a>View My Profile</a></p>

5 để tạo các phần tử HTML từ chuỗi HTML của bạn, sau đó lặp qua từng phần tử và xóa mọi thuộc tính, thuộc tính và giá trị không có trong danh sách cho phép hoặc bị cấm rõ ràng trong danh sách không cho phép

Bạn có thể chuyển toàn bộ chuỗi HTML của mình vào một thư viện khử trùng và nó sẽ trả về một chuỗi đã khử trùng mà bạn có thể sử dụng với thuộc tính chuỗi HTML hoặc các phần tử đã khử trùng mà bạn có thể đưa vào DOM bằng một phương thức như

<p><img src=x"></p>
<p><a>View My Profile</a></p>

7

DOMPurify là một thư viện đầu ngành sử dụng danh sách cho phép và có khả năng cấu hình cao

Tôi khuyên bạn nên nó. Nhưng hôm nay, chúng ta cũng sẽ xem xét cách xây dựng phiên bản ít cấu hình hơn của riêng mình

Tạo một thư viện vệ sinh

Trước tiên, hãy tạo một hàm bao bọc cho thư viện của chúng ta có tên là

<p><img src=x"></p>
<p><a>View My Profile</a></p>

8. Chúng tôi sẽ chấp nhận chuỗi để khử trùng làm đối số

Chúng tôi có thể trả về một chuỗi đã được khử trùng HOẶC chính các nút đã được khử trùng. Hãy cung cấp cho người dùng khả năng quyết định cái họ muốn bằng đối số thứ hai,

<p><img src=x"></p>
<p><a>View My Profile</a></p>

9. Nếu

let parser = new DOMParser();
let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html');

// doc.body is a real HTML element with the malicious image
// No alert is thrown, though, because the elements exist outside the DOM
console.log(doc.body);

0, chúng tôi sẽ trả về các nút thay vì một chuỗi

/*!
 * Sanitize an HTML string
 * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String}          str   The HTML string to sanitize
 * @param  {Boolean}         nodes If true, returns HTML nodes instead of a string
 * @return {String|NodeList}       The sanitized string or nodes
 */
function cleanHTML (str, nodes) {
	// Do stuff here...
}

Điều đầu tiên chúng tôi muốn làm là chuyển đổi HTML

let parser = new DOMParser();
let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html');

// doc.body is a real HTML element with the malicious image
// No alert is thrown, though, because the elements exist outside the DOM
console.log(doc.body);

1 của chúng tôi thành các nút HTML thực tế

Hãy tạo một hàm trợ giúp,

let parser = new DOMParser();
let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html');

// doc.body is a real HTML element with the malicious image
// No alert is thrown, though, because the elements exist outside the DOM
console.log(doc.body);

2, để làm điều đó cho chúng ta. Trong đó, chúng ta sẽ sử dụng phương thức khởi tạo

let parser = new DOMParser();
let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html');

// doc.body is a real HTML element with the malicious image
// No alert is thrown, though, because the elements exist outside the DOM
console.log(doc.body);

3 và phương thức

let parser = new DOMParser();
let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html');

// doc.body is a real HTML element with the malicious image
// No alert is thrown, though, because the elements exist outside the DOM
console.log(doc.body);

4, đồng thời trả về

let parser = new DOMParser();
let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html');

// doc.body is a real HTML element with the malicious image
// No alert is thrown, though, because the elements exist outside the DOM
console.log(doc.body);

5. Nếu một phần tử không tồn tại vì lý do nào đó, chúng tôi sẽ trả về phần tử

let parser = new DOMParser();
let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html');

// doc.body is a real HTML element with the malicious image
// No alert is thrown, though, because the elements exist outside the DOM
console.log(doc.body);

6 mới để thay thế

Chúng tôi sẽ chạy nó ngay lập tức và gán giá trị trả về cho biến

let parser = new DOMParser();
let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html');

// doc.body is a real HTML element with the malicious image
// No alert is thrown, though, because the elements exist outside the DOM
console.log(doc.body);

7

/*!
 * Sanitize an HTML string
 * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String}          str   The HTML string to sanitize
 * @param  {Boolean}         nodes If true, returns HTML nodes instead of a string
 * @return {String|NodeList}       The sanitized string or nodes
 */
function cleanHTML (str, nodes) {

	/**
	 * Convert the string to an HTML document
	 * @return {Node} An HTML document
	 */
	function stringToHTML () {
		let parser = new DOMParser();
		let doc = parser.parseFromString(str, 'text/html');
		return doc.body || document.createElement('body');
	}

	// Convert the string to HTML
	let html = stringToHTML();

}

Bây giờ, chúng tôi đã sẵn sàng để vệ sinh nó

Loại bỏ các phần tử let parser = new DOMParser(); let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html'); // doc.body is a real HTML element with the malicious image // No alert is thrown, though, because the elements exist outside the DOM console.log(doc.body); 8

Đầu tiên, chúng tôi muốn xóa tất cả các phần tử

let parser = new DOMParser();
let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html');

// doc.body is a real HTML element with the malicious image
// No alert is thrown, though, because the elements exist outside the DOM
console.log(doc.body);

8 khỏi HTML của chúng tôi. Hãy tạo một hàm

/*!
 * Sanitize an HTML string
 * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String}          str   The HTML string to sanitize
 * @param  {Boolean}         nodes If true, returns HTML nodes instead of a string
 * @return {String|NodeList}       The sanitized string or nodes
 */
function cleanHTML (str, nodes) {
	// Do stuff here...
}

0 chấp nhận nút

let parser = new DOMParser();
let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html');

// doc.body is a real HTML element with the malicious image
// No alert is thrown, though, because the elements exist outside the DOM
console.log(doc.body);

7 làm đối số

Chúng ta sẽ sử dụng phương pháp

/*!
 * Sanitize an HTML string
 * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String}          str   The HTML string to sanitize
 * @param  {Boolean}         nodes If true, returns HTML nodes instead of a string
 * @return {String|NodeList}       The sanitized string or nodes
 */
function cleanHTML (str, nodes) {
	// Do stuff here...
}

2 để tìm tất cả các phần tử của

let parser = new DOMParser();
let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html');

// doc.body is a real HTML element with the malicious image
// No alert is thrown, though, because the elements exist outside the DOM
console.log(doc.body);

8. Sau đó, chúng tôi sẽ sử dụng vòng lặp

/*!
 * Sanitize an HTML string
 * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String}          str   The HTML string to sanitize
 * @param  {Boolean}         nodes If true, returns HTML nodes instead of a string
 * @return {String|NodeList}       The sanitized string or nodes
 */
function cleanHTML (str, nodes) {
	// Do stuff here...
}

4 để lặp qua từng vòng lặp và sử dụng phương thức

/*!
 * Sanitize an HTML string
 * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String}          str   The HTML string to sanitize
 * @param  {Boolean}         nodes If true, returns HTML nodes instead of a string
 * @return {String|NodeList}       The sanitized string or nodes
 */
function cleanHTML (str, nodes) {
	// Do stuff here...
}

5 để xóa vòng lặp đó khỏi DOM

/**
 * Remove <script> elements
 * @param  {Node} html The HTML
 */
function removeScripts (html) {
	let scripts = html.querySelectorAll('script');
	for (let script of scripts) {
		script.remove();
	}
}

Sau đó, chúng tôi sẽ chuyển

let parser = new DOMParser();
let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html');

// doc.body is a real HTML element with the malicious image
// No alert is thrown, though, because the elements exist outside the DOM
console.log(doc.body);

7 đã chuyển đổi của mình vào đó

// Convert the string to HTML
let html = stringToHTML();

// Sanitize it
removeScripts(html);

Loại bỏ các thuộc tính độc hại

Bây giờ, chúng tôi đã sẵn sàng xóa các thuộc tính độc hại khỏi

let parser = new DOMParser();
let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html');

// doc.body is a real HTML element with the malicious image
// No alert is thrown, though, because the elements exist outside the DOM
console.log(doc.body);

7 của mình

Hãy tạo một hàm

/*!
 * Sanitize an HTML string
 * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String}          str   The HTML string to sanitize
 * @param  {Boolean}         nodes If true, returns HTML nodes instead of a string
 * @return {String|NodeList}       The sanitized string or nodes
 */
function cleanHTML (str, nodes) {
	// Do stuff here...
}

8 chấp nhận phần tử

let parser = new DOMParser();
let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html');

// doc.body is a real HTML element with the malicious image
// No alert is thrown, though, because the elements exist outside the DOM
console.log(doc.body);

7 làm tham số. Trong đó, chúng ta sẽ sử dụng thuộc tính

/*!
 * Sanitize an HTML string
 * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String}          str   The HTML string to sanitize
 * @param  {Boolean}         nodes If true, returns HTML nodes instead of a string
 * @return {String|NodeList}       The sanitized string or nodes
 */
function cleanHTML (str, nodes) {

	/**
	 * Convert the string to an HTML document
	 * @return {Node} An HTML document
	 */
	function stringToHTML () {
		let parser = new DOMParser();
		let doc = parser.parseFromString(str, 'text/html');
		return doc.body || document.createElement('body');
	}

	// Convert the string to HTML
	let html = stringToHTML();

}

0 để lấy tất cả các phần tử con trong một phần tử

Chúng ta có thể sử dụng vòng lặp

/*!
 * Sanitize an HTML string
 * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String}          str   The HTML string to sanitize
 * @param  {Boolean}         nodes If true, returns HTML nodes instead of a string
 * @return {String|NodeList}       The sanitized string or nodes
 */
function cleanHTML (str, nodes) {
	// Do stuff here...
}

4 để lặp qua từng cái. Chúng tôi sẽ chuyển nó vào hàm

/*!
 * Sanitize an HTML string
 * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String}          str   The HTML string to sanitize
 * @param  {Boolean}         nodes If true, returns HTML nodes instead of a string
 * @return {String|NodeList}       The sanitized string or nodes
 */
function cleanHTML (str, nodes) {

	/**
	 * Convert the string to an HTML document
	 * @return {Node} An HTML document
	 */
	function stringToHTML () {
		let parser = new DOMParser();
		let doc = parser.parseFromString(str, 'text/html');
		return doc.body || document.createElement('body');
	}

	// Convert the string to HTML
	let html = stringToHTML();

}

2 để xóa mọi thuộc tính độc hại

Nếu bản thân

/*!
 * Sanitize an HTML string
 * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String}          str   The HTML string to sanitize
 * @param  {Boolean}         nodes If true, returns HTML nodes instead of a string
 * @return {String|NodeList}       The sanitized string or nodes
 */
function cleanHTML (str, nodes) {

	/**
	 * Convert the string to an HTML document
	 * @return {Node} An HTML document
	 */
	function stringToHTML () {
		let parser = new DOMParser();
		let doc = parser.parseFromString(str, 'text/html');
		return doc.body || document.createElement('body');
	}

	// Convert the string to HTML
	let html = stringToHTML();

}

3 có các phần tử con, chúng tôi cũng muốn khử trùng các phần tử đó. Chúng tôi sẽ đệ quy chuyển ____17_______3 trở lại ________8 chức năng

/**
 * Remove dangerous stuff from the HTML document's nodes
 * @param  {Node} html The HTML document
 */
function clean (html) {
	let nodes = html.children;
	for (let node of nodes) {
		removeAttributes(node);
		clean(node);
	}
}

Trong hàm

/*!
 * Sanitize an HTML string
 * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String}          str   The HTML string to sanitize
 * @param  {Boolean}         nodes If true, returns HTML nodes instead of a string
 * @return {String|NodeList}       The sanitized string or nodes
 */
function cleanHTML (str, nodes) {

	/**
	 * Convert the string to an HTML document
	 * @return {Node} An HTML document
	 */
	function stringToHTML () {
		let parser = new DOMParser();
		let doc = parser.parseFromString(str, 'text/html');
		return doc.body || document.createElement('body');
	}

	// Convert the string to HTML
	let html = stringToHTML();

}

2, chúng ta sẽ lấy tất cả các thuộc tính của một phần tử với thuộc tính

/*!
 * Sanitize an HTML string
 * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String}          str   The HTML string to sanitize
 * @param  {Boolean}         nodes If true, returns HTML nodes instead of a string
 * @return {String|NodeList}       The sanitized string or nodes
 */
function cleanHTML (str, nodes) {

	/**
	 * Convert the string to an HTML document
	 * @return {Node} An HTML document
	 */
	function stringToHTML () {
		let parser = new DOMParser();
		let doc = parser.parseFromString(str, 'text/html');
		return doc.body || document.createElement('body');
	}

	// Convert the string to HTML
	let html = stringToHTML();

}

7

Chúng ta sẽ lặp qua từng cái bằng một vòng lặp

/*!
 * Sanitize an HTML string
 * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String}          str   The HTML string to sanitize
 * @param  {Boolean}         nodes If true, returns HTML nodes instead of a string
 * @return {String|NodeList}       The sanitized string or nodes
 */
function cleanHTML (str, nodes) {
	// Do stuff here...
}

4, sử dụng phép hủy đối tượng để lấy

/*!
 * Sanitize an HTML string
 * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String}          str   The HTML string to sanitize
 * @param  {Boolean}         nodes If true, returns HTML nodes instead of a string
 * @return {String|NodeList}       The sanitized string or nodes
 */
function cleanHTML (str, nodes) {

	/**
	 * Convert the string to an HTML document
	 * @return {Node} An HTML document
	 */
	function stringToHTML () {
		let parser = new DOMParser();
		let doc = parser.parseFromString(str, 'text/html');
		return doc.body || document.createElement('body');
	}

	// Convert the string to HTML
	let html = stringToHTML();

}

9 và

/**
 * Remove <script> elements
 * @param  {Node} html The HTML
 */
function removeScripts (html) {
	let scripts = html.querySelectorAll('script');
	for (let script of scripts) {
		script.remove();
	}
}

0 của thuộc tính

Trong vòng lặp, chúng tôi sẽ kiểm tra xem thuộc tính

/**
 * Remove <script> elements
 * @param  {Node} html The HTML
 */
function removeScripts (html) {
	let scripts = html.querySelectorAll('script');
	for (let script of scripts) {
		script.remove();
	}
}

1 có sử dụng hàm trợ giúp không. Nếu không, chúng ta sẽ sử dụng toán tử

/**
 * Remove <script> elements
 * @param  {Node} html The HTML
 */
function removeScripts (html) {
	let scripts = html.querySelectorAll('script');
	for (let script of scripts) {
		script.remove();
	}
}

2 để chuyển sang mục tiếp theo. Nếu không, chúng tôi sẽ sử dụng phương pháp

/**
 * Remove <script> elements
 * @param  {Node} html The HTML
 */
function removeScripts (html) {
	let scripts = html.querySelectorAll('script');
	for (let script of scripts) {
		script.remove();
	}
}

3 để xóa nó

/**
 * Remove potentially dangerous attributes from an element
 * @param  {Node} elem The element
 */
function removeAttributes (elem) {

	// Loop through each attribute
	// If it's dangerous, remove it
	let atts = elem.attributes;
	for (let {name, value} of atts) {
		if (!isPossiblyDangerous(name, value)) continue;
		elem.removeAttribute(name);
	}

}

Để kiểm tra xem thuộc tính của chúng ta có nguy hiểm hay không, trước tiên chúng ta sẽ xem liệu thuộc tính đó có bắt đầu bằng

/**
 * Remove <script> elements
 * @param  {Node} html The HTML
 */
function removeScripts (html) {
	let scripts = html.querySelectorAll('script');
	for (let script of scripts) {
		script.remove();
	}
}

4 hay không, vì các sự kiện

/**
 * Remove <script> elements
 * @param  {Node} html The HTML
 */
function removeScripts (html) {
	let scripts = html.querySelectorAll('script');
	for (let script of scripts) {
		script.remove();
	}
}

5 chạy tập lệnh

Chúng ta có thể làm điều đó với phương pháp

/**
 * Remove <script> elements
 * @param  {Node} html The HTML
 */
function removeScripts (html) {
	let scripts = html.querySelectorAll('script');
	for (let script of scripts) {
		script.remove();
	}
}

6. Chúng tôi sẽ trả lại

let parser = new DOMParser();
let doc = parser.parseFromString(`<img src="x" onerror="alert('XSS attacks!')">`, 'text/html');

// doc.body is a real HTML element with the malicious image
// No alert is thrown, though, because the elements exist outside the DOM
console.log(doc.body);

0 nếu có

/**
 * Check if the attribute is potentially dangerous
 * @param  {String}  name  The attribute name
 * @param  {String}  value The attribute value
 * @return {Boolean}       If true, the attribute is potentially dangerous
 */
function isPossiblyDangerous (name, value) {
	if (name.startsWith('on')) return true;
}

Tiếp theo, chúng tôi muốn tìm kiếm

/**
 * Remove <script> elements
 * @param  {Node} html The HTML
 */
function removeScripts (html) {
	let scripts = html.querySelectorAll('script');
	for (let script of scripts) {
		script.remove();
	}
}

8 và

/**
 * Remove <script> elements
 * @param  {Node} html The HTML
 */
function removeScripts (html) {
	let scripts = html.querySelectorAll('script');
	for (let script of scripts) {
		script.remove();
	}
}

9 khi thuộc tính là

// Convert the string to HTML
let html = stringToHTML();

// Sanitize it
removeScripts(html);

0,

// Convert the string to HTML
let html = stringToHTML();

// Sanitize it
removeScripts(html);

1 hoặc

// Convert the string to HTML
let html = stringToHTML();

// Sanitize it
removeScripts(html);

2 (một thuộc tính không được dùng trên SVG)

Trước tiên, chúng tôi sẽ đặt các tên thuộc tính đó vào một mảng và sử dụng phương thức

// Convert the string to HTML
let html = stringToHTML();

// Sanitize it
removeScripts(html);

3 để xem liệu

/*!
 * Sanitize an HTML string
 * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String}          str   The HTML string to sanitize
 * @param  {Boolean}         nodes If true, returns HTML nodes instead of a string
 * @return {String|NodeList}       The sanitized string or nodes
 */
function cleanHTML (str, nodes) {

	/**
	 * Convert the string to an HTML document
	 * @return {Node} An HTML document
	 */
	function stringToHTML () {
		let parser = new DOMParser();
		let doc = parser.parseFromString(str, 'text/html');
		return doc.body || document.createElement('body');
	}

	// Convert the string to HTML
	let html = stringToHTML();

}

9 có phải là một trong số chúng không. Nếu có, chúng ta có thể sử dụng phương pháp

// Convert the string to HTML
let html = stringToHTML();

// Sanitize it
removeScripts(html);

5 để kiểm tra

/**
 * Remove <script> elements
 * @param  {Node} html The HTML
 */
function removeScripts (html) {
	let scripts = html.querySelectorAll('script');
	for (let script of scripts) {
		script.remove();
	}
}

8 và

/**
 * Remove <script> elements
 * @param  {Node} html The HTML
 */
function removeScripts (html) {
	let scripts = html.querySelectorAll('script');
	for (let script of scripts) {
		script.remove();
	}
}

9 trong

/**
 * Remove <script> elements
 * @param  {Node} html The HTML
 */
function removeScripts (html) {
	let scripts = html.querySelectorAll('script');
	for (let script of scripts) {
		script.remove();
	}
}

0

<p><img src=x"></p>
<p><a>View My Profile</a></p>

0

Nhưng tin tặc sử dụng tất cả các loại thủ thuật viết hoa và khoảng trắng để tránh những thứ như vậy, vì vậy chúng tôi cần chuẩn hóa chuỗi của mình

Chúng ta có thể sử dụng phương thức

// Convert the string to HTML
let html = stringToHTML();

// Sanitize it
removeScripts(html);

9 để xóa tất cả khoảng trắng khỏi chuỗi của mình và phương thức

/**
 * Remove dangerous stuff from the HTML document's nodes
 * @param  {Node} html The HTML document
 */
function clean (html) {
	let nodes = html.children;
	for (let node of nodes) {
		removeAttributes(node);
		clean(node);
	}
}

0 để chuyển đổi nó thành chữ thường. Chúng ta sẽ gán chuỗi đã chuẩn hóa cho biến

/**
 * Remove dangerous stuff from the HTML document's nodes
 * @param  {Node} html The HTML document
 */
function clean (html) {
	let nodes = html.children;
	for (let node of nodes) {
		removeAttributes(node);
		clean(node);
	}
}

1 và sử dụng chuỗi đó thay thế

<p><img src=x"></p>
<p><a>View My Profile</a></p>

1

Bây giờ, chúng tôi có một chất khử trùng hoàn chỉnh

Sử dụng nó

Giả sử chúng ta có một chuỗi bên thứ ba như thế này

<p><img src=x"></p>
<p><a>View My Profile</a></p>

2

Chúng ta có thể đưa nó vào DOM như thế này

<p><img src=x"></p>
<p><a>View My Profile</a></p>

3

Ngoài ra, chúng ta có thể sử dụng toán tử trải rộng và phương thức

/**
 * Remove dangerous stuff from the HTML document's nodes
 * @param  {Node} html The HTML document
 */
function clean (html) {
	let nodes = html.children;
	for (let node of nodes) {
		removeAttributes(node);
		clean(node);
	}
}

2 với các nút thay thế

<p><img src=x"></p>
<p><a>View My Profile</a></p>

4

Đây là một bản demo. Bạn cũng có thể tải xuống tập lệnh đã hoàn thành trên Bộ công cụ Vanilla JS

Nếu bạn muốn thứ gì đó mạnh mẽ hơn, thì DOMPurify là thư viện đầu ngành sử dụng danh sách cho phép và có khả năng cấu hình cao

Chức năng của vệ sinh là gì?

Khử trùng có nghĩa là bạn đang giảm số lượng vi trùng xuống mức an toàn . Mức độ được coi là an toàn phụ thuộc vào các tiêu chuẩn hoặc yêu cầu về sức khỏe cộng đồng tại nơi làm việc, trường học, v.v. Ví dụ, có các quy trình vệ sinh cho nhà hàng và các cơ sở khác chuẩn bị thức ăn.

Vệ sinh một tập tin có nghĩa là gì?

Làm sạch tài liệu là quá trình đảm bảo rằng chỉ những thông tin dự định mới có thể được truy cập từ tài liệu . Ngoài việc đảm bảo văn bản tài liệu không tiết lộ công khai bất cứ điều gì không nên, việc làm sạch tài liệu bao gồm xóa siêu dữ liệu tài liệu có thể gây rủi ro về quyền riêng tư hoặc bảo mật.

Làm cách nào để khử trùng một đối tượng trong JavaScript?

phương thức sanitizeFor() . Phương thức này lấy đầu vào là một chuỗi HTML để làm sạch và bối cảnh (thẻ) trong đó nó được làm sạch và trả về một đối tượng nút đã làm sạch cho thẻ đã chỉ định.

Làm sạch một URL có nghĩa là gì?

Khử trùng HTML là chiến lược được OWASP đề xuất để ngăn chặn các lỗ hổng XSS trong ứng dụng web . Khử trùng HTML cung cấp một cơ chế bảo mật để xóa nội dung không an toàn (và có khả năng độc hại) khỏi các chuỗi HTML thô không đáng tin cậy trước khi hiển thị chúng cho người dùng.

programming javascript