React: Script tag not working when inserted using dangerouslySetInnerHTML

Question

I'm trying to set html sent from my server to show inside a div using dangerouslySetInnerHTML property in React. I also have script tag inside it and use functions defined in same inside that html. I have made example of error in JSFiddle here.

This is test code:

var x = '<html><scr'+'ipt>alert("this.is.sparta");function pClicked() {console.log("p is clicked");}</scr'+'ipt><body><p onClick="pClicked()">Hello</p></body></html>';

var Hello = React.createClass({
  displayName: 'Hello',
  render: function() {
    return (<div dangerouslySetInnerHTML={{__html: x}} />);
  }
});

I checked and the script tag is added to DOM, but cannot call the functions defined within that script tag. If this is not the correct way is there any other way by which I can inject the script tag's content.

@fl0cke you can that's not an issue. If that would have been a problem then the contents would not be visible, but they are properly given any complex html, but the problem is with script tag. And even if you remove the html tag and just put ` — meteors, Feb 24 '16 at 23:04
Maybe this question can help: http://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml — fl0cke, Feb 24 '16 at 23:20
No idea why it doesn't work. It works when you [just use `document.createElement` to create the script tag](https://jsfiddle.net/GolezTrol/qmguzhnf/). — GolezTrol, Feb 24 '16 at 23:30

score 49 · Answer 1 · answered Dec 12 '19 at 20:31

49

I created a React component that works pretty much like dangerouslySetInnerHtml but additionally it executes all the js code that it finds on the html string, check it out, it might help you:

https://www.npmjs.com/package/dangerously-set-html-content

answered Dec 12 '19 at 20:31

Cristofer Flores

601
1
5
5

Awesome job Christofer. This to me seemed by far the simplest solutions. I am using typescript (and don't know how to type your library), so I ended up just stealing your code and writing my own component based on yours. Here is a link to the component Christofer wrote: https://github.com/christo-pr/dangerously-set-html-content/blob/master/src/index.js – Pavel Schoffer Apr 24 '20 at 12:32
Very nice! I didn't remember `dangerouslySetInnerHTML` didn't work with ` – Brett DeWoody May 14 '20 at 08:20
Yeah, it's for security reasons, but good to know that it help you! – Cristofer Flores May 15 '20 at 14:17
TypeScript is now supported as of v1.0.8 : https://github.com/christo-pr/dangerously-set-html-content/releases/tag/v1.0.8 – Luc Oct 28 '20 at 21:53
This should be the accepted answer, as it's the most elegant solution to the problem. – Piotr Szlagura Jan 19 '21 at 17:42
Perfect, great job Cristofer. We have some custom snippets that get returned from our api (so very safe to use), this solved our problem immediately. – Matt Sugden Oct 20 '21 at 17:02
Really nice component, but it does not render HTML on SSR pages. https://github.com/christo-pr/dangerously-set-html-content/issues/52 – Yash Vekaria Nov 30 '21 at 10:21
@CristoferFlores, By using this component My lighthouse score gets decreased. I should not ask this but I am asking you. So Is it something related to this? Because after removing this component, the lighthouse score comes perfect. – Jayna Tanawala Dec 27 '21 at 05:33
I think since this is something that we actually shouldn't be doing, it could reflect some issues by using it. I'm not really sure what I can do to help you on this problem :( – Cristofer Flores Dec 28 '21 at 16:53

Dasith · Accepted Answer · 2016-02-25T01:10:03.330

Here's a bit of a dirty way of getting it done , A bit of an explanation as to whats happening here , you extract the script contents via a regex , and only render html using react , then after the component is mounted the content in script tag is run on a global scope.

var x = '<html><scr'+'ipt>alert("this.is.sparta");function pClicked() {console.log("p is clicked");}</scr'+'ipt><body><p onClick="pClicked()">Hello</p></body></html>';

var extractscript=/<script>(.+)<\/script>/gi.exec(x);
x=x.replace(extractscript[0],"");

var Hello = React.createClass({
  displayName: 'Hello',
  componentDidMount: function() {
    // this runs the contents in script tag on a window/global scope
    window.eval(extractscript[1]);

  },
  render: function() {
    return (<div dangerouslySetInnerHTML={{__html: x}} />);
  }
});

ReactDOM.render(
  React.createElement(Hello),
  document.getElementById('container')
);

for multi line script tag, the reg expression might not works, try var extractscript=/ — super1ha1, Aug 14 '17 at 02:06

emil.c · Answer 3 · 2017-09-20T07:18:55.010

I don't think you need to use concatenation (+) here.

var x = '<html><scr'+'ipt>alert("this.is.sparta");function pClicked() {console.log("p is clicked");}</scr'+'ipt><body><p onClick="pClicked()">Hello</p></body></html>';

I think you can just do:

var x = '<html><script>alert("this.is.sparta");function pClicked() {console.log("p is clicked");}</script><body><p onClick="pClicked()">Hello</p></body></html>';

Since it's passed to dangerouslySetInnerHTML anyway.

But let's get back to the issue. You don't need to use regex to access the script tag's content. If you add id attribute, for example <script id="myId">...</script>, you can easily access the element.

Let's see an example of such implementation.

const x = `
  <html>
    <script id="myScript">
      alert("this.is.sparta");
      function pClicked() {console.log("p is clicked");}
    </script>
    <body>
      <p onClick="pClicked()">Hello</p>
    </body>
  </html>
`;

const Hello = React.createClass({

  displayName: 'Hello',

  componentDidMount() {
    const script = document.getElementById('myScript').innerHTML;
    window.eval(script);
  }

  render() {
    return <div dangerouslySetInnerHTML={{__html: x}} />;
  }

});

If you have multiple scripts, you can add a data attribute [data-my-script] for example, and then access it using jQuery:

const x = `
  <html>
    <script data-my-script="">
      alert("this.is.sparta");
      function pClicked() {console.log("p is clicked");}
    </script>
    <script data-my-script="">
      alert("another script");
    </script>
    <body>
      <p onClick="pClicked()">Hello</p>
    </body>
  </html>
`;

const Hello = React.createClass({

  constructor(props) {
    super(props);

    this.helloElement = null;
  }

  displayName: 'Hello',

  componentDidMount() {
    $(this.helloElement).find('[data-my-script]').each(function forEachScript() {
      const script = $(this).text();
      window.eval(script);
    });
  }

  render() {
    return (
      <div
        ref={helloElement => (this.helloElement = helloElement)} 
        dangerouslySetInnerHTML={{__html: x}} 
      />
    );
  }

});

In any case, it's always good to avoid using eval, so another option is to get the text and append a new script tag with the original's script contents instead of calling eval. This answer suggests such approach

score 4 · Answer 4 · answered Jun 19 '17 at 15:24

a little extension for Dasith's answer for future views...

I had a very similar issue but the in my case I got the HTML from the server side and it took a while (part of reporting solution where backend will render report to html)

so what I did was very similar only that I handled the script running in the componentWillMount() function:

import React from 'react';
import jsreport from 'jsreport-browser-client-dist'
import logo from './logo.svg';
import './App.css';

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            report: "",
            reportScript: ""
        }
    }

    componentWillMount() {
        jsreport.serverUrl = 'http://localhost:5488';
        let reportRequest = {template: {shortid: 'HJH11D83ce'}}
        // let temp = "this is temp"
        jsreport.renderAsync(reportRequest)
            .then(res => {
                let htmlResponse = res.toString()
                let extractedScript = /<script>[\s\S]*<\/script>/g.exec(htmlResponse)[0];
                // console.log('html is: ',htmlResponse)
                // console.log('script is: ',extractedScript)
                this.setState({report: htmlResponse})
                this.setState({reportScript: extractedScript})
            })
    }

    render() {
        let report = this.state.report
        return (
            <div className="App">
                <div className="App-header">
                    <img src={logo} className="App-logo" alt="logo"/>
                    <h2>Welcome to React</h2>
                </div>
                <div id="reportPlaceholder">
                    <div dangerouslySetInnerHTML={{__html: report}}/>

                </div>
            </div>
        );
    }

    componentDidUpdate() {
        // this runs the contents in script tag on a window/global scope
        let scriptToRun = this.state.reportScript
        if (scriptToRun !== undefined) {
            //remove <script> and </script> tags since eval expects only code without html tags
            let scriptLines = scriptToRun.split("\n")
            scriptLines.pop()
            scriptLines.shift()
            let cleanScript = scriptLines.join("\n")
            console.log('running script ',cleanScript)
            window.eval(cleanScript)
        }

    }
}

export default App;

hope this is helpful...

score 2 · Answer 5 · answered Sep 27 '19 at 12:25

Just use some known XSS tricks. We just had a case where we had to inject a script and couldn't wait for the release so here goes our loader:

<img src onerror="var script = document.createElement('script');script.src = 'http:';document.body.appendChild(script);"/>

React: Script tag not working when inserted using dangerouslySetInnerHTML

5 Answers5

Linked

Related