React JS如何危险地执行SetInnerHTML中的脚本

Question

如何获取危险内的脚本SetInnerHTML得到执行？

class Page extends Component {

  render() {
    return (
      <script
        dangerouslySetInnerHTML={{ __html: `
          console.log('hello world');
          window.dataLayer = window.dataLayer || [];
          window.dataLayer.push({
            event: 'viewCart'
          });
        ` }}
      />
    );
  }
}

我无法console.log('hello world')执行 有人可以帮忙吗？谢谢

Answer 1

您不能这样做，因为为了安全起见，脚本标签会自动删除。

使用javascript的最佳方法是分别获取字符串并从componentWillMount或componentDidMount执行（或评估）它

class Page extends Component {

  componentDidMount() {
    const jsCode = `
      console.log('hello world');
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'viewCart'
      })
    `;
    new Function(jsCode)();
  }

  // you can do something else here
  render() {
    return (
      <noscript />
    );
  }
}

您显然可以使用任何字符串。我想您可能正在从服务器加载它。

在上面的示例中，我使用了与之new Function()()非常相似eval()但运行更快的示例。

我用过，componentDidMount所以我确定脚本在显示视图后执行。Will和Did挂载之间的另一个区别是Will挂载在通用（同构）应用程序的服务器和客户端上执行，而Did挂载将仅在通用应用程序的客户端上执行。

Answer 2

脚本元素由于其react-dom创建方式而无法执行。

当ReactDOM.createElement收到一种类型时，'script'它会使用.innerHTML而不是document.createElement您期望的那样使用。

var div = document.createElement('div');
div.innerHTML = '<script></script>';

var element = div.removeChild(div.firstChild);

以这种方式创建脚本会将该元素上的“插入分析器”标志设置为true。这个标志告诉浏览器它不应该执行。

https://github.com/facebook/react/blob/c2a2d8a539bf02e40c43d36adc2826e228f30955/packages/react-dom/src/client/ReactDOMComponent.js#L406

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML#Security_considerations

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0