如何在 iframe 上加載 html 時轉義 (')quote OR (") 雙引號

Question

我有一個 HTML 文件發送到我的 React 應用程序，然后我嘗試使用iframe渲染它。 問題是發送的 HTML 文件同時包含 (') 單引號和 (") 雙引號，這使得渲染失敗。

var template = (report) => {
    return ({__html: "<iframe srcDoc='"+ report +"'  width='100%' height='100%'></iframe>"})
};

這是我當前的實現，用於呈現我從中獲得的report的 iframe

async function  fetchReport(id)  {
  const response = await fetch(`${process.env.REACT_APP_REPORT_FINDER_SERVICE_URL}/reports/${id}`, {
    method: 'GET', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    headers: {
      'Content-Type': 'text/html',
      'Authorization': `Bearer ${localStorage.getItem('idToken')}`
    },
  })

  return response.text();
}; 

請注意，我無法在 iframe 上為src使用 URL，因為我需要設置授權標頭。 現在我在如何做一個解決方法來在 iframe 上呈現 HTML 文件方面陷入了死胡同。 任何幫助，將不勝感激。

Answer 1

react-srcdoc-iframe使用react-srcdoc-iframe 。

Codesandbox： https ://codesandbox.io/s/mystifying-worker-1t258 ? file =/ src/App.js