From e8fa62aa3d5700596b1b54a9cc6be9a4ea664428 Mon Sep 17 00:00:00 2001 From: catarak Date: Mon, 9 May 2016 16:13:37 -0400 Subject: [PATCH] add test preview component, vulnerable to xss --- README.md | 2 ++ shared/components/Preview/Preview.jsx | 25 +++++++++++++++++++++++-- shared/containers/App/App.jsx | 12 +++++++++--- 3 files changed, 34 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index a3f67a11..dccf7c33 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,5 @@ https://github.com/Hashnode/mern-starter * https://github.com/petehunt/react-howto * https://github.com/gajus/react-css-modules +* https://github.com/jsbin/jsbin (especially look at the console) +* Need to figure out how to solve the XSS issue, https://github.com/jsbin/jsbin/wiki/Best-practices-for-building-your-own-live-paste-bin \ No newline at end of file diff --git a/shared/components/Preview/Preview.jsx b/shared/components/Preview/Preview.jsx index c7bf9acb..d0a2ded0 100644 --- a/shared/components/Preview/Preview.jsx +++ b/shared/components/Preview/Preview.jsx @@ -1,10 +1,31 @@ import React from 'react'; +import ReactDOM from 'react-dom'; class Preview extends React.Component { - _iframe: HTMLIFrameElement + + componentDidMount() { + this.renderFrameContents(); + } + + renderFrameContents() { + let doc = ReactDOM.findDOMNode(this).contentDocument; + if(doc.readyState === 'complete') { + ReactDOM.render(this.props.children, doc.body); + } else { + setTimeout(this.renderFrameContents, 0); + } + } + + componentDidUpdate() { + this.renderFrameContents(); + } + + componentWillUnmount() { + React.unmountComponentAtNode(this.getDOMNode().contentDocument.body); + } render() { - return
; + return ; } } diff --git a/shared/containers/App/App.jsx b/shared/containers/App/App.jsx index 6acecd14..645d9242 100644 --- a/shared/containers/App/App.jsx +++ b/shared/containers/App/App.jsx @@ -1,5 +1,6 @@ import React from 'react'; import Editor from '../../components/Editor/Editor' +import Preview from '../../components/Preview/Preview' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import * as FileActions from '../../redux/actions' @@ -7,9 +8,14 @@ import * as FileActions from '../../redux/actions' class App extends React.Component { render() { return ( - +
+ + +

Hello world!

+
+
); } }