Cách để thêm target="_blank" khi sử dụng `dangerouslySetInnerHTML` trong React

Intro

Xin chào các bạn, hôm nay mình sẽ giới thiệu đến các bạn một cách để thêm attribute target="_blank" trong React. Trong quá trình làm việc với React, mình có sử dụng thuộc tính dangerouslySetInnerHTML để set một văn bản HTML vào DOM.

Trong đoạn HTML đó có chứa các thẻ <a> chưa set thuộc tính target="_blank". Vậy làm cách nào để set thuộc tính này vào tất cả các thẻ <a> ? các bạn theo dõi tiếp nhé 😁

Giải pháp

Giả sử mình có một đoạn HTML và dùng thuộc tính dangerouslySetInnerHTML để set trực tiếp đoạn HTML này vào DOM.

import React from "react";

export default function Test() {
    const HTML =
        '<h2>Header</h2><a href="https://homiedev.com">My website!</a><footer>Footer!<a href="https://www.facebook.com/hiinav029">My facebook!</a></footer>';

    return <div dangerouslySetInnerHTML={{ __html: HTML }} />;
}

Kết quả sau khi render:

<div>
  <h2>Header</h2>
  <a href="https://homiedev.com">My website!</a>            
  <footer>Footer!
    <a href="https://www.facebook.com/hiinav029">My facebook!</a>
  </footer>
</div>

Mình tạo một đoạn string HTML và pass vào dangerouslySetInnerHTML một object với key là __html.

Trong biến HTML mình có tạo 2 thẻ <a> và không set thuộc tính target="_blank". Trong một vài trường hợp mà bạn nhận được một đoạn HTML bất kì và muốn tất cả các thẻ <a> có thuộc tính target="_blank" (bạn nào dùng gatsby và markdown syntax sẽ rõ 😁).

Cách làm của mình như sau:

Mình sẽ tìm kiếm tất cả cả thẻ <a> bằng cách dùng regular expressions (regex). tìm hiểu regex tại đây

const links = /href/g;

Sau đó trong dangerouslySetInnerHTML mình dùng replace() method và truyền cho đối số thứ nhất là một biểu thức chính quy (biến links ), đối số thứ hai là giá trị muốn thay thế.

cont replace = `target="_blank" href`

dangerouslySetInnerHTML={{
  __html: HTML.replace(links,replace)
}}  

replace() method sẽ return về một chuỗi mới với giá trị bạn muốn thay thế.

Và đây là kết quả 😅

<div>
  <h2>Header</h2>
  <a target="_blank" href="https://homiedev.com">My website!</a>            
  <footer>Footer!
    <a target="_blank" href="https://www.facebook.com/hiinav029">My facebook!</a>
  </footer>
</div>

Kết Luận

Cuối cùng thì mình đã hướng dẫn xong cho các bạn cách để thêm thuộc tính target="_blank" khi dùng dangerouslySetInnerHTML trong React.

Lưu ý: việc sử dụng dangerouslySetInnerHTML một cách bất cẩn sẽ tạo ra các lỗ hổng XSS trong ứng dụng của bạn. Giải pháp ở đây là các bạn tìm hiểu về DOMPurify để giải quyết vấn đề trên nhé.

Mình xin kết bài ở đây ^^. Happy coding!