SanitizerConfig

Khả dụng hạn chế

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Từ điển SanitizerConfig của HTML Sanitizer API chỉ định các phần tử, thuộc tính và bình luận nào được phép hoặc nên bị xóa khi chèn chuỗi HTML vào Element hay ShadowRoot, hoặc khi phân tích cú pháp chuỗi HTML thành Document.

Lưu ý rằng thông thường các phiên bản Sanitizer được sử dụng thay vì các đối tượng SanitizerConfig, vì chúng hiệu quả hơn để chia sẻ và sửa đổi.

Thuộc tính phiên bản

elements

Mảng cho biết các phần tử cần cho phép khi làm sạch HTML, tùy chọn cũng chỉ định các thuộc tính được phép hoặc bị xóa.

Mỗi phần tử có thể được chỉ định theo tên (chuỗi) hoặc dưới dạng đối tượng với các thuộc tính:

name

Chuỗi chứa tên của phần tử.

namespace Optional

Chuỗi chứa namespace của phần tử. Namespace mặc định là "http://www.w3.org/1999/xhtml".

attributes Optional

Mảng cho biết các thuộc tính cần cho phép trên phần tử (được phép) này khi làm sạch HTML.

removeAttributes Optional

Mảng cho biết các thuộc tính cần xóa khỏi phần tử (được phép) này khi làm sạch HTML.

removeElements

Mảng cho biết các phần tử cần xóa khi làm sạch HTML.

Mỗi phần tử có thể được chỉ định theo tên (chuỗi) hoặc dưới dạng đối tượng với namenamespace tùy chọn.

replaceWithChildrenElements

Mảng cho biết các phần tử cần thay thế bằng nội dung của chúng khi làm sạch HTML. Chủ yếu được dùng để xóa kiểu dáng khỏi văn bản (ví dụ: bạn có thể sử dụng điều này để chuyển <b>một số văn bản</b> thành một số văn bản).

attributes

Mảng cho biết các thuộc tính cần cho phép khi làm sạch HTML.

Mỗi thuộc tính có thể được chỉ định theo tên (chuỗi) hoặc dưới dạng đối tượng với namenamespace tùy chọn.

removeAttributes

Mảng cho biết các thuộc tính cần xóa khỏi các phần tử khi làm sạch HTML.

comments

true nếu các bình luận được phép, và false nếu chúng cần bị xóa.

dataAttributes

true nếu tất cả các thuộc tính data-* sẽ được phép (trong trường hợp này, các thuộc tính data-* không được liệt kê trong mảng attributes). Nếu false, bất kỳ thuộc tính data-* nào cần được phép phải được liệt kê trong mảng attributes.

Mô tả

SanitizerConfig chỉ định các phần tử, thuộc tính và bình luận nào được phép hoặc nên bị xóa khi chèn chuỗi HTML vào Element hay ShadowRoot, hoặc khi phân tích cú pháp chuỗi HTML thành Document.

Một phiên bản của loại này có thể được truyền vào hàm tạo Sanitizer() để cấu hình Sanitizer, và được trả về bởi Sanitizer.get(). Nó cũng có thể được truyền làm tham số option.sanitizer khi gọi các phương thức làm sạch.

Cấu hình hợp lệ

Cấu trúc đối tượng cấu hình cho phép khai báo các tùy chọn bộ lọc mâu thuẫn hoặc dư thừa. Để tránh bất kỳ sự mơ hồ nào, các phương thức nhận phiên bản SanitizerConfig yêu cầu đối tượng cấu hình hợp lệ được truyền vào, và sẽ ném TypeError nếu cấu hình không hợp lệ.

Trong cấu hình sanitizer hợp lệ:

  • Có thể định nghĩa mảng elements hoặc removeElements, nhưng không phải cả hai.
  • Có thể định nghĩa mảng attributes hoặc removeAttributes toàn cục, nhưng không phải cả hai.
  • Mảng replaceWithChildrenElements, nếu được định nghĩa, không được có phần tử nào chung với elements hoặc removeElements.
  • Không có mảng nào được chứa các phần tử hoặc thuộc tính trùng lặp.

Đối tượng rỗng {} là cấu hình hợp lệ.

Cấu hình cho phép và xóa

Một cấu hình có mảng elements và/hoặc attributes được gọi là allow configuration, vì nó xác định hành vi làm sạch theo các giá trị được phép có trong đầu ra. remove configuration là cấu hình có removeElements và/hoặc removeAttributes, xác định hành vi theo các giá trị sẽ bị xóa khỏi đầu ra.

Ví dụ

Tạo cấu hình "allow"

Ví dụ này cho thấy cách tạo cấu hình sanitizer "allow" cho phép các phần tử và thuộc tính cụ thể, thay thế các phần tử <b> bằng phần tử con của chúng, cho phép bình luận được bao gồm trong đầu ra và yêu cầu các thuộc tính data-* phải được liệt kê rõ ràng.

js
const sanitizer = new Sanitizer({
  elements: ["div", "p", "script"],
  attributes: ["id"],
  replaceWithChildrenElements: ["b"],
  comments: true,
  dataAttributes: false,
});

Tạo cấu hình "remove"

Ví dụ này cho thấy cách tạo cấu hình sanitizer "remove" xóa cả phần tử lẫn thuộc tính.

js
const sanitizer = new Sanitizer({
  removeElements: ["span", "script"],
  removeAttributes: ["lang", "id"],
  comments: false,
});

Cấu hình cho phép phần tử và xóa thuộc tính

Ví dụ này cho thấy cách tạo cấu hình sanitizer "kết hợp" cho phép một số phần tử và xóa một số thuộc tính nhất định.

js
const sanitizer = new Sanitizer({
  elements: ["span", "script"],
  removeAttributes: ["lang", "id"],
});

Các cấu hình không hợp lệ

Phần này hiển thị một số cấu hình không hợp lệ. Các cấu hình này sẽ ném TypeError.

Không hợp lệ vì cả elementsremoveElements đều được định nghĩa:

js
const sanitizer1 = new Sanitizer({
  elements: ["span", "script"],
  removeElements: ["div", "b"],
});

Không hợp lệ vì <span> có trong cả elementsreplaceWithChildrenElements:

js
const sanitizer2 = new Sanitizer({
  elements: ["span", "div"],
  replaceWithChildrenElements: ["span"],
});

Không hợp lệ vì thuộc tính dư thừa "data-test" được định nghĩa khi dataAttributes là true:

js
const sanitizer3 = new Sanitizer({
  attributes: ["lang", "id", "data-test"],
  dataAttributes: true,
});

Không hợp lệ vì có cả removeAttributesdataAttributes được định nghĩa:

js
const sanitizer4 = new Sanitizer({
  removeAttributes: ["lang", "id"],
  dataAttributes: true,
});

Thông số kỹ thuật

Thông số kỹ thuật
HTML Sanitizer API
# dom-sanitizer-get
HTML Sanitizer API
# dom-sanitizer-sanitizer

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

api.Sanitizer.get

api.Sanitizer.Sanitizer