React: тэг Script не работает при вставке с помощью опасноSetInnerHTML

Я пытаюсь установить html, отправленный с моего сервера, чтобы показать внутри div, используя свойство dangerouslySetInnerHTML в React. У меня также есть тег script внутри него и использовать функции, определенные внутри того же самого внутри html. Я сделал пример ошибки в JSFiddle здесь.

Это тестовый код:

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

Я проверил и тег script добавлен в DOM, но не может вызывать функции, определенные в этом теге script. Если это не так, есть другой способ, с помощью которого я могу вставлять содержимое тега script.

Ответы

Ответ 1

Вот немного грязного способа сделать это, Немного об объяснении того, что происходит здесь, вы извлекаете содержимое script через регулярное выражение и обрабатываете только html с помощью реакции, после того как компонент монтируется, содержимое в теге script запускается в глобальной области.

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

Ответ 2

Я не думаю, что вам нужно использовать конкатенацию (+) здесь.

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

Так как он прошел до dangerouslySetInnerHTML.

Но вернемся к проблеме. Вам не нужно использовать регулярное выражение для доступа к содержимому тега script. Если вы добавите атрибут id, например <script id="myId">...</script>, вы можете легко получить доступ к элементу.

Посмотрите пример такой реализации.

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}} />;
  }

});

Если у вас несколько сценариев, вы можете добавить атрибут данных [data-my-script], например, а затем получить к нему доступ с помощью 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}} 
      />
    );
  }

});

В любом случае всегда полезно избегать использования eval, поэтому другой вариант заключается в получении текста и добавлении нового тега script с исходным содержимым script вместо вызова eval. Этот ответ предлагает такой подход

Ответ 3

небольшое расширение для ответа Dasith для будущих просмотров...

У меня была очень похожая проблема, но в моем случае я получил HTML с серверной части, и это заняло некоторое время (часть решения для отчетов, где бэкэнд будет отображать отчет для html)

так что я сделал очень похоже только на то, что я обработал script, запущенный в функции componentWillMount():

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;

надеюсь, что это полезно...

Ответ 4

Просто используйте некоторые известные трюки XSS. У нас просто был случай, когда нам пришлось внедрить скрипт, и мы не могли дождаться релиза, так что вот наш загрузчик:

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