Cách khắc phục vấn đề hiển thị HTML không đúng trong thành phần Notification của Element Plus

Trong quá trình phát triển ứng dụng doanh nghiệp bằng Element Plus, bạn có thể gặp phải tình trạng thành phần Notification không hiển thị nội dung HTML như mong muốn. Bài viết này sẽ phân tích kỹ thuật gốc rễ của vấn đề và cung cấp một giải pháp hoàn chỉnh để khắc phục.

Biểu hiện của vấn đề và bối cảnh kỹ thuật

Thành phần Notification (Thông báo) của Element Plus là công cụ thông báo thường được sử dụng trong các ứng dụng web, hỗ trợ hiển thị thông tin ở góc trang. Khi cố gắng sử dụng định dạng HTML để làm phong phú nội dung thông báo, nhiều nhà phát triển gặp phải tình trạng nội dung bị hiển thị nguyên văn thay vì được xử lý đúng.

Từ ví dụ cơ bản basic.vue, mặc định nội dung thông báo chỉ hiển thị dưới dạng văn bản thuần túy. Các lỗi phổ biến khi thiết lập nội dung HTML bao gồm:

1. Các thẻ HTML bị hiển thị thay vì được phân tích cú pháp.
2. Định dạng rich text không hoạt động.
3. Một số thẻ bị lọc hoặc chuyển đổi.

Nguyên nhân gốc rễ liên quan đến cơ chế an toàn của Vue. Để ngăn chặn các cuộc tấn công XSS, Vue sẽ tự động chuyển đổi nội dung chèn vào thành HTML. Thành phần Notification cung cấp tùy chọn kiểm soát đặc biệt cho việc hiển thị HTML.

Nguyên lý cốt lõi và phân tích mã nguồn

Để hiểu rõ nguyên nhân khiến việc hiển thị HTML thất bại, chúng ta cần tìm hiểu cách thức hoạt động chính của thành phần Notification từ notification.vue:

<div :class="ns.e('content')">
  <slot>
    <p v-if="!allowHTML">{{ content }}</p>
    <!-- Cảnh báo: Nội dung có thể bị ảnh hưởng bởi dữ liệu không an toàn -->
    <p v-else v-html="content" />
  </slot>
</div>

Cấu trúc trên minh họa cách thành phần hoạt động:

• Khi allowHTML là false (giá trị mặc định), Vue sẽ tự động chuyển đổi HTML bằng cách sử dụng {{ content }}.
• Khi thuộc tính này là true, Vue sẽ sử dụng v-html để chèn nội dung HTML trực tiếp.
• Bình luận nhắc nhở rằng không nên sử dụng đầu vào từ người dùng làm nội dung để tránh nguy cơ XSS.

Phần TypeScript định nghĩa kiểu của thuộc tính này như sau:

const notificationProps = buildProps({
  // ...
  /**
   * @description Xác định xem `content` có được xử lý như chuỗi HTML hay không
   */
  allowHTML: {
    type: Boolean,
    default: false,
  },
  // ...
} as const);

Các trường hợp lỗi phổ biến và cách giải quyết

Dựa trên phản hồi cộng đồng và phân tích mã nguồn, chúng ta tóm tắt ba tình huống lỗi phổ biến nhất và cách khắc phục tương ứng.

Trường hợp 1: Chưa bật thuộc tính allowHTML

Ví dụ sai:

ElNotification({
  title: 'Tiêu đề thông báo',
  content: '<strong>Đây là chữ in đậm</strong>',
});

Phân tích: Do chưa đặt allowHTML: true, nội dung HTML bị chuyển đổi.

Giải pháp đúng:

ElNotification({
  title: 'Tiêu đề thông báo',
  content: '<strong>Đây là chữ in đậm</strong>',
  allowHTML: true, // Phải bật tùy chọn này
});

Đây là lỗi phổ biến nhất, chiếm hơn 70% các vấn đề về hiển thị HTML.

Trường hợp 2: Kiểu dáng bị ghi đè bởi CSS cha

Kể cả khi đã thiết lập đúng thuộc tính hiển thị HTML, đôi khi kiểu dáng vẫn không hiệu quả do ảnh hưởng từ CSS toàn cục hoặc cha.

Giải pháp: Sử dụng bộ chọn sâu để tùy chỉnh kiểu dáng nội dung thông báo:

:deep(.el-notification__content) {
  p {
    margin: 0;
  }
  strong {
    color: #ff5722;
  }
  .custom-class {
    /* Kiểu tùy chỉnh */
  }
}

Trường hợp 3: Sử dụng không đúng slot hoặc thành phần lồng nhau

Khi sử dụng slot tùy chỉnh hoặc thành phần lồng nhau, việc hiển thị HTML có thể bị ảnh hưởng. Theo mã nguồn, nội dung từ slot ưu tiên hơn so với thuộc tính content.

Giải pháp: Khi cần cấu trúc HTML phức tạp, khuyến nghị sử dụng slot phạm vi:

<template #default>
  <div class="custom-notification">
    <h3>Nội dung HTML tùy chỉnh</h3>
    <p>Slot cho phép tạo cấu trúc phức tạp.</p>
  </div>
</template>

Công cụ gỡ lỗi và chẩn đoán

Khi gặp vấn đề hiển thị phức tạp, bạn có thể áp dụng các kỹ thuật gỡ lỗi sau:

1. Kiểm tra thuộc tính thành phần: Đặt điểm dừng tại dòng 28-30 của notification.vue để quan sát giá trị của allowHTML và content.
2. Theo dõi quản lý ZIndex: Thành phần sử dụng cơ chế quản lý ZIndex, hãy chú ý:

const { nextZIndex, currentZIndex } = zIndex;

3. Phân tích xử lý sự kiện: Cụ thể trong phương thức onKeydown của notification.vue.

Thực hành tốt nhất và hướng dẫn an toàn

Mặc dù thuộc tính allowHTML cung cấp khả năng hiển thị HTML, nhưng cần tuân thủ các thực hành an toàn:

Chuẩn mực sử dụng an toàn

1. Lọc nội dung nghiêm ngặt: Làm sạch tất cả nội dung HTML trước khi hiển thị, khuyến nghị sử dụng thư viện DOMPurify.
2. Không sử dụng đầu vào từ người dùng: Như cảnh báo trong bình luận, không bao giờ sử dụng đầu vào từ người dùng trực tiếp làm nội dung HTML.
3. Áp dụng cơ chế danh sách trắng: Chỉ cho phép các thẻ và thuộc tính an toàn.

Đề xuất tối ưu hiệu suất

1. Kiểm soát số lượng thông báo: Nhiều thông báo hiển thị cùng lúc có thể ảnh hưởng đến hiệu suất.
2. Cài đặt thời gian phù hợp: Điều chỉnh thời gian hiển thị dựa trên độ phức tạp của nội dung.
3. Tránh cấu trúc DOM phức tạp: Nội dung thông báo nên đơn giản, sử dụng Dialog cho các thành phần phức tạp.

Xem xét khả năng tiếp cận

Để đảm bảo tất cả người dùng đều có thể nhận thông báo hiệu quả, cần tuân theo tiêu chuẩn WCAG:

• Đặt thuộc tính role phù hợp (thành phần đã đặt role="alert").
• Đảm bảo khả năng điều khiển bằng bàn phím.
• Cung cấp độ tương phản màu sắc đủ lớn.