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?

Jagrati · Accepted Answer · 2020-05-05 17:18:57Z

1

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.

answered May 5, 2020 at 17:18

Jagrati

12.3k9 gold badges37 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

turnip Over a year ago

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?

Jagrati Over a year ago

Please go through this answer to know more about this stackoverflow.com/questions/33644499/…

turnip Over a year ago

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!

Bumhan Yu · Accepted Answer · 2020-05-05 18:23:35Z

0

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.

answered May 5, 2020 at 18:23

Bumhan Yu

2,3231 gold badge13 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to load an HTML document in React

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related