add test preview component, vulnerable to xss

This commit is contained in:
catarak 2016-05-09 16:13:37 -04:00
parent 9dd12b7efb
commit e8fa62aa3d
3 changed files with 34 additions and 5 deletions

View file

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

View file

@ -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 <div ref="container" className="preview-holder"></div>;
return <iframe sandbox="allow-same-origin"></iframe>;
}
}

View file

@ -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 (
<div class="app">
<Editor
content={this.props.file.content}
updateFile={this.props.updateFile}/>
updateFile={this.props.updateFile} />
<Preview>
<h1>Hello world!</h1>
</Preview>
</div>
);
}
}