<script type="text/javascript">
const wrapper = document.getElementById("test-click-me");
const iframe = document.createElement("iframe");
iframe.setAttribute("sandbox", "allow-scripts");
iframe.src = "https://d1exrvfwzmo830.cloudfront.net/checkbox-iframe.html";
wrapper.appendChild(iframe);
window.addEventListener('message', function (ev) {
if (!ev.data || ev.data.type !== 'bot-check-click') return;
if (ev.data.screenY > 100) {
wrapper.classList.add("success");
wrapper.classList.remove("fail");
} else {
wrapper.classList.add("fail");
wrapper.classList.remove("success");
}
});
</script>
<div class="iframe-contents">
<input id="click-me-box" type="checkbox"/>
<label for="click-me-box">Click Me</label>
<script type="text/javascript">
document.getElementById('click-me-box').addEventListener('click', (e) => {
parent.postMessage({
type: 'bot-check-click',
screenX: e.screenX,
screenY: e.screenY
}, '*');
});
</script>
</div>