DOMParser: phương thức parseFromString()

Cú pháp

parseFromString(input, mimeType)

Tham số

input

Một phiên bản TrustedHTML hoặc một chuỗi xác định HTML cần phân tích cú pháp. Đánh dấu phải chứa tài liệu HTML, XML, XHTML, hoặc SVG.

mimeType

Một chuỗi xác định xem bộ phân tích cú pháp XML hay HTML được sử dụng để phân tích cú pháp chuỗi.

Các giá trị được phép là:

• text/html
• text/xml
• application/xml
• application/xhtml+xml
• image/svg+xml

Giá trị trả về

Một Document với contentType khớp với mimeType đã cho.

Ngoại lệ

TypeError

Được ném ra khi:

• mimeType được truyền một giá trị không phải là một trong các giá trị được phép.
• input được truyền một giá trị chuỗi khi Trusted Types được áp dụng bởi CSP và không có chính sách mặc định nào được xác định.

Mô tả

Phương thức parseFromString() phân tích cú pháp đầu vào chứa HTML hoặc XML, trả về một Document với contentType khớp với mimeType. Document này chứa một DOM trong bộ nhớ hoàn chỉnh tách biệt với tài liệu chính trong trang liên quan.

Nếu mimeType là text/html, đầu vào được phân tích cú pháp dưới dạng HTML và các phần tử <script> được đánh dấu là không thực thi, các sự kiện không được kích hoạt và trình xử lý sự kiện không được gọi để chạy các tập lệnh nội tuyến. Mặc dù tài liệu có thể tải xuống các tài nguyên được chỉ định trong các phần tử <iframe> và <img>, về cơ bản nó không hoạt động. Điều này hữu ích vì bạn có thể phân tích cú pháp các đầu vào HTML bao gồm declarative shadow roots và thực hiện các thao tác trên tài liệu mà không ảnh hưởng đến trang hiển thị.

Đối với các giá trị được phép khác (text/xml, application/xml, application/xhtml+xml, và image/svg+xml), đầu vào được phân tích cú pháp dưới dạng XML. Nếu đầu vào không đại diện cho XML hợp lệ, tài liệu được trả về sẽ chứa một nút <parsererror> mô tả tính chất của lỗi phân tích cú pháp.

Các giá trị mimeType không được phép gây ra lỗi TypeError.

Cân nhắc bảo mật

Phương thức này phân tích cú pháp đầu vào thành một DOM trong bộ nhớ riêng biệt, vô hiệu hóa bất kỳ phần tử <script> nào và ngăn chặn các trình xử lý sự kiện chạy. Mặc dù tài liệu được trả về về cơ bản không hoạt động, các trình xử lý sự kiện và tập lệnh trong DOM của nó sẽ có thể chạy nếu chúng được chèn vào DOM hiển thị. Do đó, phương thức là vectơ có thể cho các cuộc tấn công cross-site scripting (XSS), nơi đầu vào không an toàn tiềm ẩn trước tiên được phân tích cú pháp thành một Document mà không được làm sạch, và sau đó được chèn vào DOM hiển thị/hoạt động nơi code có thể chạy.

Bạn nên giảm thiểu rủi ro này bằng cách luôn truyền các đối tượng TrustedHTML thay vì chuỗi, và áp dụng trusted types sử dụng chỉ thị CSP require-trusted-types-for.

Ví dụ

Phân tích cú pháp đầu vào bằng Trusted Types

Trong ví dụ này, chúng ta sẽ phân tích cú pháp một đầu vào HTML có thể gây hại và sau đó chèn nó vào DOM của trang hiển thị.

if (typeof trustedTypes === "undefined")
  trustedTypes = { createPolicy: (n, rules) => rules };

const policy = trustedTypes.createPolicy("my-policy", {
  createHTML: (input) => DOMPurify.sanitize(input),
});

// The potentially malicious string
const untrustedString = "<p>I might be XSS</p><img src='x' onerror='alert(1)'>";

// Create a TrustedHTML instance using the policy
const trustedHTML = policy.createHTML(untrustedString);

// Parse the TrustedHTML (which contains a trusted string)
const safeDocument = parser.parseFromString(trustedHTML, "text/html");

document.body.replaceWith(safeDocument.body);

Phân tích cú pháp XML, SVG và HTML

const parser = new DOMParser();

const xmlString = "<warning>Beware of the tiger</warning>";
const doc1 = parser.parseFromString(xmlString, "application/xml");
console.log(doc1.contentType); // "application/xml"

const svgString = '<circle cx="50" cy="50" r="50"/>';
const doc2 = parser.parseFromString(svgString, "image/svg+xml");
console.log(doc2.contentType); // "image/svg+xml"

const htmlString = "<strong>Beware of the leopard</strong>";
const doc3 = parser.parseFromString(htmlString, "text/html");
console.log(doc3.contentType); // "text/html"

console.log(doc1.documentElement.textContent);
// "Beware of the tiger"

console.log(doc2.firstChild.tagName);
// "circle"

console.log(doc3.body.firstChild.textContent);
// "Beware of the leopard"

Xử lý lỗi

const parser = new DOMParser();

const xmlString = "<warning>Beware of the missing closing tag";
const doc = parser.parseFromString(xmlString, "application/xml");
const errorNode = doc.querySelector("parsererror");
if (errorNode) {
  // parsing failed
} else {
  // parsing succeeded
}

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• XMLSerializer
• JSON.parse() - tương đương cho tài liệu JSON.