How to load an HTML document in React

Question

I am working on my website's Terms And Conditions page. I have the actual document as a .docx file but using Google Docs I am able to export it as an .html file.

The generated file is it's own standalone HTML element, with a custom stylesheet that Google loads in. It looks like this (summarised):

<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <style type="text/css">
       @import url('https://themes.googleusercontent.com/fonts/css?kit=fpjTOVmNbO4Lz34iLyptLUXza5VhXqVC6o75Eld_V98');.lst-kix_list_1-3>li:before{content:"\0025cf  "}.lst-kix_l.......
    </style>
</head>
<body class="c16">
    <!-- a bunch of elements with custom classes -->
</body>
</html>

How can I safely load this document inside my React component, with the included stylesheet?

class TermsAndConditionsPage extends React.Component {
    render() {
       // my custom React code here
       // the HTML doc here...
    }
}

I could just paste the contents of the <body> tag inside, but then I lose the styling. Is it possible to load the stylesheet only when the user lands on this page?

score 1 · Accepted Answer · answered May 05 '20 at 17:18

You can use dangerouslySetInnerHTML to insert html in react component. This will render the whole html inside the div tag.

const content = `<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <style type="text/css">
       @import url('https://themes.googleusercontent.com/fonts/css?kit=fpjTOVmNbO4Lz34iLyptLUXza5VhXqVC6o75Eld_V98');.lst-kix_list_1-3>li:before{content:"\0025cf  "}.lst-kix_l.......
    </style>
</head>
<body class="c16">
    <div>Test</div>
</body>
</html>`


class TermsAndConditionsPage extends React.Component {
    render() {
       return <div dangerouslySetInnerHTML={{ __html: content }}/>
    }
}

From the docs:

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting > (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.

Thanks, that looks like it would work. Is the XSS risk coming from the fact that the HTML or stylesheet you insert could be hosted somewhere out of your control? — turnip, May 05 '20 at 18:03
Please go through this answer to know more about this https://stackoverflow.com/questions/33644499/what-does-it-mean-when-they-say-react-is-xss-protected — Jagrati, May 05 '20 at 18:14
I used your answer but for clarity purposes I used the webpack plugin `html-loader` to load my HTML file as a string in a more convenient way. Thanks! — turnip, May 06 '20 at 09:35

score 0 · Answer 2 · answered May 05 '20 at 18:23

If looking for the easiest, quickest method, dangerouslySetInnerHTML will do the trick as the other answer mentions.

If you don't mind some manual work, you could use online tools like https://premailer.io/

copy over all CSS declarations in the imported sheet into head area within style tag
copy the entire html document into the input area at https://premailer.io/
hit convert

You'll then end up with the complete html document with every CSS style inlined, which you could use as JSX.

How to load an HTML document in React

2 Answers2