Tại sao bạn không nên sử dụng InternalHTML trong JavaScript?

Thuộc tính innerHTML của Mô hình đối tượng tài liệu (DOM) được sử dụng để đặt hoặc trả về nội dung HTML của phần tử

Vì đây là cách dễ nhất và nhanh nhất để thay đổi Mô hình Đối tượng Tài liệu, nên thuộc tính innerHTML thường được sử dụng để thay đổi nội dung của trang web

InternalHTML có thể nguy hiểm như thế nào?

Trang web có thể trở nên rất dễ bị tấn công nếu InternalHTML được sử dụng liên tục. Chẳng hạn, việc sử dụng nó cho các trường nhập liệu có thể gây ra thao tác DOM và kẻ tấn công có thể sử dụng tập lệnh chéo trang (XSS) để chèn tập lệnh có hại và đánh cắp dữ liệu riêng tư và nhạy cảm được lưu trữ trong cookie phiên

Do đó, chúng ta sẽ tìm hiểu về những hạn chế của việc sử dụng InternalHTML trong bài viết này

Nhược điểm của việc sử dụng thuộc tính InternalHTML

• Rủi ro bảo mật

  Như chúng ta đã thảo luận trước đó trong bài viết này, InternalHTML có thể dẫn đến lỗ hổng bảo mật nghiêm trọng

  Ý tưởng đằng sau một cuộc tấn công XSS với innerHTML là mã độc được đưa vào trang web của bạn và sau đó được thực thi. Điều này là có thể vì innerHTML hiển thị đánh dấu hoàn chỉnh thay vì chỉ văn bản

  Ví dụ,

  div.innerHTML = '';

  Khi tệp javascript được tải, phần tử img được đưa vào bộ chứa div

• Quá trình chậm

  innerHTML sử dụng chậm hơn nhiều vì nội dung của nó được xây dựng chậm và các phần tử và nội dung đã phân tích trước đó phải được phân tích lại, điều này làm mất thời gian

• Có thể phá vỡ tài liệu

  innerHTML không cung cấp xác nhận hợp lệ, vì vậy bất kỳ mã HTML hợp lệ nào cũng có thể được sử dụng. Điều này có thể khiến tài liệu JavaScript bị hỏng. Thậm chí có thể sử dụng HTML bị hỏng, điều này có thể gây ra sự cố không mong muốn

• Thêm không được hỗ trợ

  Thông thường, chúng tôi sử dụng += để thêm vào Javascript. Khi thêm vào innerHTML, toàn bộ phần tử HTML được phân tích cú pháp lại

  <p id="sentence">quick brown fox jumps over the lazy dogp>
  sentence = document.getElementById('sentence')
  
  // The whole element have re-parsed
  sentence.innerHTML += '
   Hello world 
  '

• Nội dung được thay thế ở mọi nơi

  Bất kể bạn thêm, thay đổi hoặc xóa nội dung nào được chuyển vào innerHTML sẽ thay thế mọi thứ bạn đã viết bằng HTML

  HTML
  ---
  <h1 id="title">Hello Worldh1>
  ---
  
  JS
  ---
  const title = document.getElementById('title')
  title.innerHTML = "quick brown fox jumps over the lazy dog"
  ---
  

Giải pháp thay thế an toàn cho InternalHTML là gì?

Cách tiếp cận cực kỳ đơn giản là sử dụng 

<p id="sentence">quick brown fox jumps over the lazy dogp>
sentence = document.getElementById('sentence')

// The whole element have re-parsed
sentence.innerHTML += '
 Hello world 
'

div.textContent = 'quick brown fox jumps over the lazy dog'

Nếu bạn được phép sử dụng thư viện của bên thứ ba, thì hãy xem DOMPurify sẽ làm sạch HTML và ngăn chặn các cuộc tấn công XSS

Phần kết luận

Bây giờ, bạn biết lý do tại sao bạn không nên sử dụng tài sản innerHTML. Tôi hy vọng bạn đã thích đọc bài viết

nút. innerHTML là một công cụ JavaScript cực kỳ hữu ích và là thứ mà tôi đã sử dụng thường xuyên kể từ khi tìm hiểu về JavaScript tại Trường Flatiron. Không giống như nút. InternalText và Nút. textContent, có thể được sử dụng để kiểm tra hoặc thay đổi văn bản của phần tử, Nút. InternalHTML được sử dụng để kiểm tra đánh dấu HTML hiện tại của một phần tử, thay đổi nó thành một thứ khác hoặc xóa toàn bộ nội dung. Khi cập nhật DOM bằng JavaScript, bạn có thể muốn sử dụng thuộc tính này để nhanh chóng hiển thị các thay đổi đối với cả văn bản và HTML;

Một trong những rủi ro phổ biến nhất khi sử dụng Node. InternalHTML ngày nay là cross-site scripting (XSS), cho phép người dùng bên ngoài thêm các tập lệnh phía máy khách độc hại vào các trang web sẽ được nhiều người dùng xem. Tin rằng các tập lệnh này là an toàn, trình duyệt của họ sẽ thực thi chúng, khiến người dùng dễ bị đánh cắp cookie và thông tin cá nhân khác. Nếu điều đó không đủ đáng sợ, những tập lệnh này cũng có thể thay đổi nội dung thực tế của chính trang web

XSS bỏ qua chính sách cùng nguồn gốc, một điều khiển truy cập chỉ cho phép một số tập lệnh nhất định chạy trên mỗi trang web, tùy thuộc vào nguồn gốc của chúng (được tạo thành từ sơ đồ URI, tên máy chủ và số cổng). Chính sách này được đưa ra để ngăn chặn hành vi trộm cắp dữ liệu nhạy cảm được chia sẻ qua các trang web

Mặc dù việc sử dụng Node. InternalHTML không hoàn toàn an toàn trong mọi trường hợp sử dụng, nó vẫn có thể được sử dụng trong một số trường hợp, chẳng hạn như chèn dữ liệu tĩnh trên một trang không thu thập thông tin nhập của người dùng. Vì mục đích của các dự án của chúng tôi tại Trường Flatiron, một cuộc tấn công XSS sẽ không hơn gì một sự phiền toái nhỏ vì chúng tôi không xử lý dữ liệu cá nhân hoặc dữ liệu nhạy cảm ở giai đoạn này

Tuy nhiên, đối với một trang web xử lý thông tin cá nhân, một cuộc tấn công XSS có thể gây bất lợi đáng kể cho những người duy trì dữ liệu và người dùng của nó. Đối với những người tạo trang web sẽ xử lý thông tin cá nhân hoặc trải qua đánh giá bảo mật, Node. textContent nên được sử dụng thay cho Node. InternalHTML như một biện pháp phòng ngừa bổ sung chống lại một cuộc tấn công

Để biết thêm thông tin về bảo mật dữ liệu, hãy xem Dự án bảo mật ứng dụng web mở (OWASP), một cộng đồng bảo mật phần mềm nguồn mở. OWASP cung cấp cho các cá nhân và tổ chức các công cụ và tài liệu để hỗ trợ ngăn chặn các cuộc tấn công bảo mật

Tại sao chúng ta không nên sử dụng InternalHTML?

Sử dụng InternalHTML trong JavaScript có an toàn không?

Cân nhắc về bảo mật . Vì lý do đó, bạn nên sử dụng thay vì InternalHTML. Yếu tố. SetHTML() để làm sạch văn bản trước khi nó được chèn vào DOM. HTML specifies that a

programming javascript

Reply 6 0 Chia sẻ