Vệ sinh mã JavaScript

nhập * dưới dạng vệ sinh từ 'sanitize-html'; . vệ sinh. IOptions = { allowTags. vệ sinh. mặc định. cho phépTags. concat('h1', 'h2', 'img'), allowAttributes. { 'một'. vệ sinh. mặc định. allowAttributes['a']. concat('rel'), 'img'. ['src', 'height', 'width', 'alt'] }, transformTags. { 'một'. vệ sinh. SimpleTransform('a', { 'rel'. 'nofollow' }), 'img'. (tên thẻ. chuỗi, thuộc tính. vệ sinh. Thuộc tính) => { let img = { tagName, attribs }; . attribs['alt'] = 'đã biến đổi' ; . chức năng (khung. vệ sinh. iFrame) { khung trả lại. thẻ === 'a' &&. khung. chữ. cắt ();

Trong vài ngày qua, chúng tôi đã xem xét cách 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 đó

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 Profilea>p>

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

<p><img src=x">p>
<p><a>View My Profilea>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 Profilea>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(``, '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 Profilea>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 Profilea>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 Profilea>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 Profilea>p>

9. Nếu

let parser = new DOMParser();
let doc = parser.parseFromString(``, '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(``, '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(``, '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(``, '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(``, '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(``, '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ề một phần tử

let parser = new DOMParser();
let doc = parser.parseFromString(``, '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(``, '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(``, '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(``, '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(``, '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(``, '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 

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

// Sanitize it
removeScripts(html);

let parser = new DOMParser();
let doc = parser.parseFromString(``, '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);

/*!
 * 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...
}

let parser = new DOMParser();
let doc = parser.parseFromString(``, '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);

/*!
 * 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();

}

/*!
 * 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...
}

/*!
 * 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();

}

/*!
 * 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();

}

/*!
 * 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();

}

/*!
 * 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...
}

/**
 * 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);
	}
}

/*!
 * 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();

}

/*!
 * 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();

}

/*!
 * 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...
}

/*!
 * 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();

}

/**
 * Remove 
Tiếp theo, chúng tôi muốn tìm kiếm 
/**
 * Remove ';. 
phần tử var = tài liệu. . 
 
/** * @param {string} text * @return {string} */ function sanitizeHTML(text) { var element = document. . 
 
var sanitizedHTML = $('
')..
 
Làm cách nào để khử trùng đầu vào trong JavaScript?
Để làm sạch dữ liệu đầu vào của người dùng, bạn vẫn có thể sử dụng trình xác thực. js như tôi đã trình bày ở trên. Trình xác thực. js được hỗ trợ với cả mã phía máy khách và mã phía sau
Mã vệ sinh là gì?
Khử trùng HTML là quá trình kiểm tra tài liệu HTML và tạo tài liệu HTML mới chỉ giữ lại bất kỳ thẻ nào được chỉ định là “an toàn” và mong muốn. HTML sanitization can be used to protect against cross-site scripting (XSS) attacks by sanitizing any HTML code submitted by a user.

Đọc tiếp