Hướng dẫn dangerously set html content - thiết lập nội dung html một cách nguy hiểm

Question

⚠-HTML-HTML-Content ⚠

Kết xuất HTML thô có nguy cơ của riêng bạn!
Nội dung chính Show

⚠-HTML-HTML-Content ⚠
Định nghĩa bài văn
Cài đặt
Cách sử dụng
Sự phát triển
Chạy kiểm tra đơn vị
Giấy phép
⚠-HTML-HTML-Content ⚠
Định nghĩa bài văn
Cài đặt
Cách sử dụng
Giấy phép

REPO V1-HTML-HTML-HTML-Content V1

Định nghĩa bài văn

Đây là một bài đăng trên blog giải thích chi tiết hơn:

Kết xuất nội dung nguy hiểm với React

TL;DR

React sử dụng dangerouslySetInnerHtml Prop để hiển thị HTML RAW và hoạt động khá tốt cho hầu hết các trường hợp, nhưng điều gì sẽ xảy ra nếu HTML của bạn có một số thẻ scripts bên trong ??

Khi bạn sử dụng dangerouslySetInnerHtml trên một thành phần, React bên trong đang sử dụng thuộc tính innerHtml của nút để đặt nội dung, cho mục đích an toàn không thực hiện bất kỳ JavaScript nào.

Hành vi này có vẻ rất kỳ quặc đối với tôi (ý tôi là tên chống đỡ chứa từ

import React from 'react'

import InnerHTML from 'dangerously-set-html-content'

function Example {

  const html = `
    <div>This wil be rendered</div>
    <script>
      alert('testing')
    </script>

  `

  return (
    <InnerHTML html={html} />
  )
}

0, và bạn cũng cần phải truyền một đối tượng với

import React from 'react'

import InnerHTML from 'dangerously-set-html-content'

function Example {

  const html = `
    <div>This wil be rendered</div>
    <script>
      alert('testing')
    </script>

  `

  return (
    <InnerHTML html={html} />
  )
}

1, có mục đích, vì vậy bạn thực sự biết những gì bạn đang làm) , vẫn không giải quyết vấn đề của tôi

Sau một chút tìm kiếm, tôi thấy rằng

import React from 'react'

import InnerHTML from 'dangerously-set-html-content'

function Example {

  const html = `
    <div>This wil be rendered</div>
    <script>
      alert('testing')
    </script>

  `

  return (
    <InnerHTML html={html} />
  )
}

2 có một thứ gọi là phạm vi, API này cho phép bạn tạo một đoạn của tài liệu, vì vậy sử dụng mà tôi đã tạo

import React from 'react'

import InnerHTML from 'dangerously-set-html-content'

function Example {

  const html = `
    <div>This wil be rendered</div>
    <script>
      alert('testing')
    </script>

  `

  return (
    <InnerHTML html={html} />
  )
}

3.

Thành phần React này hiển thị HTML từ một chuỗi, với điểm cộng thực thi tất cả các mã JS mà HTML chứa !! 🎉

🚨🚨 Sử dụng nó có nguy cơ của riêng bạn🚨🚨USE IT AT YOUR OWN RISK🚨🚨

Cài đặt

yarn add dangerously-set-html-content
// or
// npm install --save dangerously-set-html-content

Cách sử dụng

import React from 'react'

import InnerHTML from 'dangerously-set-html-content'

function Example {

  const html = `
    <div>This wil be rendered</div>
    <script>
      alert('testing')
    </script>

  `

  return (
    <InnerHTML html={html} />
  )
}

Điều này cũng sẽ hoạt động cho các tập lệnh với thuộc tính

import React from 'react'

import InnerHTML from 'dangerously-set-html-content'

function Example {

  const html = `
    <div>This wil be rendered</div>
    <script>
      alert('testing')
    </script>

  `

  return (
    <InnerHTML html={html} />
  )
}

4 đặt nó

Sự phát triển

Sau khi nhân bản repo và cài đặt tất cả các DEP, bạn có thể làm cho thư mục

import React from 'react'

import InnerHTML from 'dangerously-set-html-content'

function Example {

  const html = `
    <div>This wil be rendered</div>
    <script>
      alert('testing')
    </script>

  `

  return (
    <InnerHTML html={html} />
  )
}

5 để cài đặt các phụ thuộc ví dụ (gói sẽ là một liên kết với tệp trong

import React from 'react'

import InnerHTML from 'dangerously-set-html-content'

function Example {

  const html = `
    <div>This wil be rendered</div>
    <script>
      alert('testing')
    </script>

  `

  return (
    <InnerHTML html={html} />
  )
}

6)

Khi bạn đang sử dụng thư mục đó, bạn có thể chạy:

npm start

Và một ví dụ tất cả sẽ được mở.

Chạy kiểm tra đơn vị

Run:

npm test

Giấy phép

MIT © Christo-pr

⚠-HTML-HTML-Content ⚠

Kết xuất HTML RAW theo rủi ro của riêng bạn!

Định nghĩa bài văn

React đã có dangerouslySetInnerHtml prop để hiển thị HTML RAW và hoạt động khá tốt cho hầu hết các trường hợp, nhưng điều gì sẽ xảy ra nếu HTML của bạn có một số thẻ scripts bên trong ??

Khi bạn sử dụng dangerouslySetInnerHtml trên một thành phần, React bên trong đang sử dụng thuộc tính innerHtml của nút để đặt nội dung, cho mục đích an toàn không thực hiện bất kỳ JavaScript nào.

Khi ăn xin hành vi này có vẻ rất kỳ quặc đối với tôi (ý tôi là tên đạo cụ chứa từ

import React from 'react'

import InnerHTML from 'dangerously-set-html-content'

function Example {

  const html = `
    <div>This wil be rendered</div>
    <script>
      alert('testing')
    </script>

  `

  return (
    <InnerHTML html={html} />
  )
}

0, và bạn cũng cần phải vượt qua một đối tượng với một đạo diễn

import React from 'react'

import InnerHTML from 'dangerously-set-html-content'

function Example {

  const html = `
    <div>This wil be rendered</div>
    <script>
      alert('testing')
    </script>

  `

  return (
    <InnerHTML html={html} />
  )
}

1, có vẻ như họ thực sự khuyến khích chúng ta không sử dụng nó), nhưng nó hoàn toàn ý nghĩa bây giờ. Vấn đề?? Vẫn không giải quyết được vấn đề của tôi.

Sau một chút tìm kiếm, tôi thấy rằng

import React from 'react'

import InnerHTML from 'dangerously-set-html-content'

function Example {

  const html = `
    <div>This wil be rendered</div>
    <script>
      alert('testing')
    </script>

  `

  return (
    <InnerHTML html={html} />
  )
}

2 có một thứ gọi là phạm vi, API này cho phép bạn tạo một đoạn của tài liệu, do đó, sử dụng mà tôi tạo

import React from 'react'

import InnerHTML from 'dangerously-set-html-content'

function Example {

  const html = `
    <div>This wil be rendered</div>
    <script>
      alert('testing')
    </script>

  `

  return (
    <InnerHTML html={html} />
  )
}

3 lib.

Đây là một thành phần phản ứng hiển thị HTML từ một chuỗi, với điểm cộng thực thi tất cả các mã JS mà HTML chứa !!

🚨🚨 Sử dụng nó bằng rủi ro của riêng bạnUSE IT BY YOUR OWN RISK🚨🚨

Cài đặt

yarn add dangerously-set-html-content
// or
// npm install --save dangerously-set-html-content

Cách sử dụng

import React from 'react'

import InnerHTML from 'dangerously-set-html-content'

function Example {

  const html = `
    <div>This wil be rendered</div>
    <script>
      alert('testing')
    </script>

  `
  return (
    <InnerHTML html={html} />
  )
}

Điều này cũng sẽ hoạt động cho các tập lệnh với thuộc tính

import React from 'react'

import InnerHTML from 'dangerously-set-html-content'

function Example {

  const html = `
    <div>This wil be rendered</div>
    <script>
      alert('testing')
    </script>

  `

  return (
    <InnerHTML html={html} />
  )
}