var TESTS = {
"Trashing the parent": function() {
parent.document.querySelector("body").innerHTML = "Much evil!";
},
"Reading cookies": function() {
var evil = document.cookie;
},
"Getting fkey": function() {
var evil = parent.StackExchange.options.user.fkey;
},
"Listen to messages in parent": function() {
parent.addEventListener( "message", function( m ) { console.log( m ); }, false );
},
"Send user to different page": function() {
window.top.location.assign( "http://example.com" );
throw new Error("window.top.location.assign doesn't work");
}
};
$(function() {
var resultTemplate = $("#resultTemplate").html();
var pass = $("#pass"), fail = $("#fail");
Object.keys(TESTS).forEach(function(testName) {
var test = TESTS[testName];
try {
test();
fail.append(errorTemplate(testName, test));
} catch (e) {
pass.append(errorTemplate(testName, test, e));
}
});
function errorTemplate(name, test, error) {
return resultTemplate.replace("{name}", name)
.replace("{code}", test.toString())
.replace("{error}", error);
}
});
code {
white-space: pre-wrap;
}
#pass dt {
color: #12AA33;
}
#pass dt::after {
content: "✓";
display: inline-block;
font-size: 1.25em;
font-weight: bold;
margin-left: .25em;
}
#pass dt + dd { display: none; }
#fail dt {
color: #AA1233;
}
#fail dt::after {
content: "✘";
display: inline-block;
font-size: 1.25em;
font-weight: bold;
margin-left: .25em;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl id="fail"></dl>
<h2>Looks like we are protected against the following:</h2>
<dl id="pass"></dl>
<script type="test/template" id="resultTemplate">
<dt>{name}</dt>
<dd>Running:
<pre><code>{code}</code></pre>
Resulted in the following:
<pre><code>{error}</code></pre></dd>
</script>