Cách tốt nhất để chèn html bằng javascript

Làm việc với các chuỗi tùy ý

Khi làm việc với chuỗi, có một số tùy chọn được đề xuất để thêm chúng vào trang một cách an toàn. các phương thức tạo nút DOM tiêu chuẩn hoặc jQuery

Phương pháp tạo nút DOM

Một cách tiếp cận đơn giản để chèn chuỗi vào trang là sử dụng các phương thức thao tác DOM gốc.

let data = JSON.parse[responseText];
addonElement.innerHTML = `
Your favorite color is now ${data.color}`;

let data = JSON.parse[responseText];
addonElement.innerHTML = `
Your favorite color is now ${data.color}`;

let data = JSON.parse[responseText];
addonElement.innerHTML = `
Your favorite color is now ${data.color}`;

let data = JSON.parse[responseText];
let div = document.createElement["div"];
div.className = data.className;
div.textContent = `Your favorite color is now ${data.color}`;
addonElement.appendChild[div];

Cách tiếp cận này an toàn vì việc sử dụng

let data = JSON.parse[responseText];
addonElement.innerHTML = `
Your favorite color is now ${data.color}`;

let data = JSON.parse[responseText];
addonElement.innerHTML = `
Your favorite color is now ${data.color}`;

Tuy nhiên, hãy cẩn thận, bạn có thể sử dụng các phương pháp gốc không an toàn. Lấy đoạn mã sau

let data = JSON.parse[responseText];
addonElement.innerHTML = `
Your favorite color is now ${data.color}`;

Ở đây, nội dung của

let data = JSON.parse[responseText];
addonElement.innerHTML = `
Your favorite color is now ${data.color}`;

let data = JSON.parse[responseText];
addonElement.innerHTML = `
Your favorite color is now ${data.color}`;

jQuery

Khi sử dụng jQuery, các hàm như

let data = JSON.parse[responseText];
addonElement.innerHTML = `
Your favorite color is now ${data.color}`;

let data = JSON.parse[responseText];
addonElement.innerHTML = `
Your favorite color is now ${data.color}`;

________số 8

Làm việc với nội dung HTML

Khi làm việc với nội dung có nguồn gốc bên ngoài mà bạn biết là HTML, việc làm sạch HTML là điều cần thiết trước khi nó được thêm vào trang. Cách tốt nhất để làm sạch HTML là sử dụng thư viện làm sạch HTML hoặc một công cụ mẫu có các tính năng làm sạch HTML. Trong phần này, chúng ta xem xét một số công cụ phù hợp và cách sử dụng chúng

khử trùng HTML

Thư viện làm sạch HTML sẽ loại bỏ mọi thứ có thể dẫn đến việc thực thi tập lệnh khỏi HTML, vì vậy bạn có thể đưa các bộ nút HTML hoàn chỉnh từ một nguồn từ xa vào DOM của mình một cách an toàn. DOMPurify, đã được nhiều chuyên gia bảo mật xem xét, là một thư viện phù hợp cho nhiệm vụ này trong các tiện ích mở rộng

Để sử dụng sản xuất, DOMPurify có phiên bản rút gọn. thanh tẩy. tối thiểu. js. Bạn có thể sử dụng tập lệnh này theo cách phù hợp nhất với tiện ích mở rộng của mình. Ví dụ: bạn có thể thêm nó dưới dạng tập lệnh nội dung

"content_scripts": [
  {
    "matches" : [""],
    "js": ["purify.min.js", "myinjectionscript.js"]
  }
]

Sau đó, trong myinjectionscript. js, bạn có thể đọc HTML bên ngoài, làm sạch nó và thêm nó vào DOM của trang

let data = JSON.parse[responseText];
addonElement.innerHTML = `
Your favorite color is now ${data.color}`;

Bạn có thể sử dụng bất kỳ phương pháp nào để thêm HTML đã làm sạch vào DOM của mình, chẳng hạn như hàm

let data = JSON.parse[responseText];
addonElement.innerHTML = `
Your favorite color is now ${data.color}`;

let data = JSON.parse[responseText];
addonElement.innerHTML = `
Your favorite color is now ${data.color}`;

let data = JSON.parse[responseText];
addonElement.innerHTML = `
Your favorite color is now ${data.color}`;

Công cụ mẫu

Một mẫu phổ biến khác là tạo một mẫu HTML cục bộ cho một trang và sử dụng các giá trị từ xa để điền vào chỗ trống. Mặc dù cách tiếp cận này thường được chấp nhận, nhưng cần cẩn thận để tránh sử dụng các cấu trúc cho phép chèn mã thực thi. Điều này có thể xảy ra khi công cụ tạo khuôn mẫu sử dụng các cấu trúc chèn HTML thô vào tài liệu. Nếu biến được sử dụng để chèn HTML thô có nguồn từ xa, thì biến đó có cùng rủi ro bảo mật được đề cập trong phần giới thiệu

Ví dụ: khi sử dụng các mẫu ria mép, bạn phải sử dụng ria mép kép,

let data = JSON.parse[responseText];
addonElement.innerHTML = `
Your favorite color is now ${data.color}`;

let data = JSON.parse[responseText];
addonElement.innerHTML = `
Your favorite color is now ${data.color}`;

let data = JSON.parse[responseText];
addonElement.innerHTML = `
Your favorite color is now ${data.color}`;

let node = $["