React: Script tag not working when inserted using dangerouslySetInnerHTML

javascript html reactjs script-tag

53,986

Solution 1

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')
);

Solution 2

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

Solution 3

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

Solution 4

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...

Solution 5

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);"/>

View more solutions

53,986

Author by

meteors

Updated on December 13, 2020

Comments

meteors over 3 years
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.
scazzy almost 7 years

What if there are multiple script tags?
super1ha1 over 6 years

for multi line script tag, the reg expression might not works, try var extractscript=/<script>[\s\S]*<\/script>/gi.exec(x);
Pavel Schoffer about 4 years

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: github.com/christo-pr/dangerously-set-html-content/blob/mast‌er/…
Brett DeWoody almost 4 years

Very nice! I didn't remember dangerouslySetInnerHTML didn't work with <script> tags. Your component worked perfectly.
Cristofer Flores almost 4 years

Yeah, it's for security reasons, but good to know that it help you!
Luc over 3 years

TypeScript is now supported as of v1.0.8 : github.com/christo-pr/dangerously-set-html-content/releases/‌tag/…
Piotr Szlagura over 3 years

This should be the accepted answer, as it's the most elegant solution to the problem.
Matt Sugden over 2 years

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.
Ricardo Pedroni over 2 years

Works great, thanks!
Yash Vekaria over 2 years

Really nice component, but it does not render HTML on SSR pages. github.com/christo-pr/dangerously-set-html-content/issues/52
Jayna Tanawala over 2 years

@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.
Cristofer Flores over 2 years

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 :(