Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
第9回Web分科会 実習 参考実装
<!DOCTYPE html>
<html>
<head>
<title>CTF Flag Matcher</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js" charset="utf-8"></script>
<script type="text/jsx" src="flag-matcher.jsx"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css" rel="stylesheet">
<style>
h1 {
text-align: center;
font-size: 4em;
}
h2 {
margin: 0 0 0.5em;
}
.name-area {
width: 40%;
}
.problems {
padding: 0;
}
.problem {
padding: 1em;
background: #555;
border-radius: 5px;
margin: 1em 0;
list-style: none;
}
</style>
</head>
<body>
<div class="container">
<h1>CTF Flag Matcher</h1>
<div id="container"></div>
</div>
</body>
</html>
class NameInput extends React.Component {
constructor(props) {
super(props);
this.state = {name: ''};
}
onInput(event) {
this.setState({name: event.target.value});
}
render() {
return <div className="name-area form-group">
Your Name: <input className="form-control" type="text" onInput={this.onInput.bind(this)}></input>
</div>;
}
}
class Problem extends React.Component {
constructor(props) {
super(props);
this.state = {solvers: props.problem.solvers};
}
onClick(event) {
const flag = ReactDOM.findDOMNode(this.refs.flag).value;
if (this.props.problem.flag === flag) {
alert('そうだよ');
const name = this.props.getName();
this.setState({solvers: this.state.solvers.concat([name])});
} else {
alert('ちがうよ');
}
}
render() {
return <li className="problem">
<h2>{this.props.problem.title}</h2>
<div className="form-group">
<label className="control-label">Flag</label>
<input className="form-control" type="password" ref="flag"></input>
</div>
<button className="btn btn-default submit-button" onClick={this.onClick.bind(this)}>Check</button>
<h3>Solvers</h3>
<ul>
{this.state.solvers.map(solver => (
<li key={solver}>{solver}</li>
))}
</ul>
</li>;
}
}
class Problems extends React.Component {
render() {
return <ul className="problems">
{this.props.problems.map(problem => (
<Problem key={problem.title} problem={problem} getName={this.props.getName}/>
))}
</ul>;
}
}
class ProblemForm extends React.Component {
onSubmit(event) {
event.preventDefault();
const title = event.target.title.value;
const flag = event.target.flag.value;
this.props.pushProblem({title, flag});
}
render() {
return <form className="add-problem" onSubmit={this.onSubmit.bind(this)}>
<div className="form-group">
<label htmlFor="title">Title</label>
<input type="text" className="form-control" id="title" name="title"/>
</div>
<div className="form-group">
<label htmlFor="flag">Flag</label>
<input type="text" className="form-control" id="flag" name="flag" placeholder="flag{xxxxx}"/>
</div>
<button type="submit" className="btn btn-primary">Add Problem</button>
</form>;
}
}
class Matcher extends React.Component {
constructor(props) {
super(props);
this.state = {problems: [], name: 'noname'};
}
pushProblem(problem) {
this.setState({problems: this.state.problems.concat([problem])});
}
getName() {
return this.refs.nameInput.state.name;
}
render() {
return <div className="matcher">
<NameInput ref="nameInput"/>
<Problems problems={this.state.problems} getName={this.getName.bind(this)}/>
<ProblemForm pushProblem={this.pushProblem.bind(this)}/>
</div>;
}
}
const matcher = ReactDOM.render(<Matcher/>, document.getElementById('container'));
matcher.setState({problems: [{
title: 'sanity check',
flag: 'flag{hogehoge}',
solvers: ['hakatashi', 'cookies'],
}, {
title: 'yet another problem',
flag: 'flag{fugafuga}',
solvers: ['satos'],
}]});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.