JSFiddle - React, Tailwind, and code Playground

by p337

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div>
     <h2>XSS Challenge</h2>

</div>
<div id="Browser">
    <div id="Toolbar" class="col-lg-12 clearfix">
        <div class="input-group">
            <input id="LocationBar" type="text" class="form-control" placeholder="URL" /> <span class="input-group-btn">
                <button id="GoBtn" class="btn btn-primary" type="button">Go</button>
            </span>

        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">Example | Search</div>
        <div id="page" class="panel-body">
            <div class="page-header">
                 <h2>Search <small id="SearchTerms">find what you need</small></h2>

            </div>
            <div class="col-lg-6">
                <div class="input-group">
                    <input id="Query" type="text" class="form-control" placeholder="Search for..."></input> <span class="input-group-btn">
        <button id="SearchBtn" class="btn btn-success" type="button">search</button>
      </span>

                </div>
            </div>
        </div>
    </div>
</div>

CSS

#Browser {
    border:1px solid #ddd;
    padding:2px;
    margin:10px;
    border-radius:5px;
    min-height:500px;
    background-color:lightgray;
}
#page {
    margin: 15px 5px;
    border:1px solid lightgray;
    height:450px;
}
#Toolbar {
    padding:0;
    margin-bottom:5px;
}

JavaScript

setLoc();

$('#SearchBtn').click(function () {
    var query = $('#Query').val();
    setLoc(query);
    query = filter(query);
    $('#SearchTerms').html(query);
});

//decoding this would be cheating - treat it as a server side filter. 'black box'
function filter(query) {
    query = query.toLowerCase().replace('<scr' + 'ipt>', '');
    query = query.toLowerCase().replace('</scr' + 'ipt>', '');
    var elem = $(query );
    elem.each(function () {
        var attributes = this.attributes;
        var i = attributes.length;
        while (i--) {
            this.removeAttributeNode(attributes[i]);
        }
    });
    if(elem[0])
        query = elem[0].outerHTML;
    return query;
}

$('#GoBtn').click(function () {
    $('#Query').val(getParams());
    $('#SearchBtn').click();
});

$('#Query').keyup(function (event) {
    if (event.keyCode == 13) {
        $("#SearchBtn").click();
    }
});
$('#LocationBar').keyup(function (event) {
    if (event.keyCode == 13) {
        $("#GoBtn").click();
    }
});

function setLoc(param) {
    if (!param) $('#LocationBar').val('http://example.com/search');
    else $('#LocationBar').val('http://example.com/search?q=' + param);
}

function getParams() {
    //lazy
    var count = 'http://example.com/search?q='.length;
    var url = $('#LocationBar').val();
    return url.substring(count);
}