From 7753d696b813f93c267e57568b1ef172f7dec1ab Mon Sep 17 00:00:00 2001 From: Skylar Ittner Date: Sun, 15 Apr 2018 19:01:58 -0600 Subject: [PATCH] Add support for nonces (put data-stylenonce="NONCE" on the div) --- captcheck.dist.js | 2 +- captcheck.js | 78 ++++++++++++++++++++++++++--------------------- 2 files changed, 44 insertions(+), 36 deletions(-) diff --git a/captcheck.dist.js b/captcheck.dist.js index 47126fb..c08790f 100644 --- a/captcheck.dist.js +++ b/captcheck.dist.js @@ -1 +1 @@ -window.onload=function(){var b="https://captcheck.netsyms.com/api.php";var a=document.createElement("style");a.innerHTML=".captcheck_box{font-family:Ubuntu,Arial,sans-serif;color:black;border:1px solid #e0e0e0;border-radius:3px;display:inline-block;padding:3px;margin:5px 2px 5px 1px;background-color:#f5f5f5;text-decoration:none}.captcheck_label_message,.captcheck_label_message b{color:black;font-family:Ubuntu,Roboto,Arial,sans-serif}.captcheck_answer_label{border:0}.captcheck_answer_label>input{visibility:hidden;position:absolute}.captcheck_answer_label>input+img{cursor:pointer;border:2px solid transparent;border-radius:3px;min-width:32px;width:18%;max-width:64px}.captcheck_answer_label>input:checked+img{cursor:pointer;border:2px solid #424242;border-radius:3px}.captcheck_error_message{color:red}.captcheck_question_image{display:initial}.captcheck_question_access{display:none}.captcheck_alt_question_button{float:right;font-size:80%;cursor:pointer;color:inherit;text-decoration:inherit;border:0}.captcheck_answer_images{display:initial}.captcheck_answer_access{display:none}";document.body.appendChild(a);Array.prototype.forEach.call(document.getElementsByClassName("captcheck_container"),function(c){var d=new XMLHttpRequest();d.open("GET",b+"?action=new",true);d.onreadystatechange=function(){if(this.readyState==4){var g=this.status;var r=this.responseText;var o=document.createElement("div");o.setAttribute("class","captcheck_box");c.appendChild(o);if(g==200){var h=JSON.parse(r);var f=h.id_prefix;var m="
";for(var j=0,l=h.answers.length;j"}m+="
";var p=document.createElement("div");p.innerHTML=m+"
";var k=document.createElement("div");k.setAttribute("class","captcheck_label_message");k.setAttribute("id","captcheck_"+f+"_label_message");k.innerHTML=""+h.question_i+""+h.question_a+"> Text mode";o.appendChild(k);o.appendChild(p);var q=document.createElement("span");q.innerHTML="";o.appendChild(q);var n=document.querySelectorAll('.captcheck_answer_label[data-prefix="'+f+'"]');for(var j=0;jThere was a problem loading the CAPTCHA."}}};d.send()})};function chooseAnswer(c,a){var b=document.getElementById("captcheck_"+c+"_answer_"+a);b.checked=true;return false}function switchMode(e){var d=document.getElementById("captcheck_"+e+"_alt_question_button");var a=document.getElementById("captcheck_"+e+"_question_image");var f=document.getElementById("captcheck_"+e+"_question_access");var c=document.getElementById("captcheck_"+e+"_answer_images");var b=document.getElementById("captcheck_"+e+"_answer_access");if(d.innerHTML=="> Text mode"){d.innerHTML="> Image mode";a.style.display="none";f.style.display="initial";c.style.display="none";b.style.display="initial";b.innerHTML=""}else{d.innerHTML="> Text mode";a.style.display="initial";f.style.display="none";c.style.display="initial";b.style.display="none";b.innerHTML=""}}; \ No newline at end of file +window.onload=function(){var e="https://captcheck.netsyms.com/api.php";function t(e,t){return document.getElementById("captcheck_"+e+"_answer_"+t).checked=!0,!1}function a(e){var t=document.getElementById("captcheck_"+e+"_alt_question_button"),a=document.getElementById("captcheck_"+e+"_question_image"),n=document.getElementById("captcheck_"+e+"_question_access"),c=document.getElementById("captcheck_"+e+"_answer_images"),i=document.getElementById("captcheck_"+e+"_answer_access");"> Text mode"==t.innerHTML?(t.innerHTML="> Image mode",a.style.display="none",n.style.display="initial",c.style.display="none",i.style.display="initial",i.innerHTML=""):(t.innerHTML="> Text mode",a.style.display="initial",n.style.display="none",c.style.display="initial",i.style.display="none",i.innerHTML="")}var n="";Array.prototype.forEach.call(document.getElementsByClassName("captcheck_container"),function(c){c.dataset.stylenonce&&(n=c.dataset.stylenonce);var i=new XMLHttpRequest;i.open("GET",e+"?action=new",!0),i.onreadystatechange=function(){if(4==this.readyState){var n=this.status,i=this.responseText,s=document.createElement("div");if(s.setAttribute("class","captcheck_box"),c.appendChild(s),200==n){for(var r=JSON.parse(i),o=r.id_prefix,d="
",l=0,p=r.answers.length;l"}d+="
";var u=document.createElement("div");u.innerHTML=d+"
";var h=document.createElement("div");h.setAttribute("class","captcheck_label_message"),h.setAttribute("id","captcheck_"+o+"_label_message"),h.innerHTML=""+r.question_i+""+r.question_a+"> Text mode",s.appendChild(h),s.appendChild(u);var m=document.createElement("span");m.innerHTML="",s.appendChild(m);var k=document.querySelectorAll('.captcheck_answer_label[data-prefix="'+o+'"]');for(l=0;linput{visibility:hidden;position:absolute}.captcheck_answer_label>input+img{cursor:pointer;border:2px solid transparent;border-radius:3px;min-width:32px;width:18%;max-width:64px}.captcheck_answer_label>input:checked+img{cursor:pointer;border:2px solid #424242;border-radius:3px}.captcheck_error_message{color:red}.captcheck_question_image{display:initial}.captcheck_question_access{display:none}.captcheck_alt_question_button{float:right;font-size:80%;cursor:pointer;color:inherit;text-decoration:inherit;border:0}.captcheck_answer_images{display:initial}.captcheck_answer_access{display:none}",document.body.appendChild(c)}; \ No newline at end of file diff --git a/captcheck.js b/captcheck.js index 71fdfbe..cd56481 100644 --- a/captcheck.js +++ b/captcheck.js @@ -1,14 +1,42 @@ window.onload = function () { + var api_url = "https://captcheck.netsyms.com/api.php"; - /* Add custom styles */ - var styles = document.createElement('style'); - /* Remove newlines/comments from captcheck.css and put it here */ - styles.innerHTML = ".captcheck_box{font-family:Ubuntu,Arial,sans-serif;color:black;border:1px solid #e0e0e0;border-radius:3px;display:inline-block;padding:3px;margin:5px 2px 5px 1px;background-color:#f5f5f5;text-decoration:none}.captcheck_label_message,.captcheck_label_message b{color:black;font-family:Ubuntu,Roboto,Arial,sans-serif}.captcheck_answer_label{border:0}.captcheck_answer_label>input{visibility:hidden;position:absolute}.captcheck_answer_label>input+img{cursor:pointer;border:2px solid transparent;border-radius:3px;min-width:32px;width:18%;max-width:64px}.captcheck_answer_label>input:checked+img{cursor:pointer;border:2px solid #424242;border-radius:3px}.captcheck_error_message{color:red}.captcheck_question_image{display:initial}.captcheck_question_access{display:none}.captcheck_alt_question_button{float:right;font-size:80%;cursor:pointer;color:inherit;text-decoration:inherit;border:0}.captcheck_answer_images{display:initial}.captcheck_answer_access{display:none}"; - document.body.appendChild(styles); + function chooseAnswer(idp, ans) { + var box = document.getElementById("captcheck_" + idp + "_answer_" + ans); + box.checked = true; + return false; + } + + function switchMode(idp) { + var switch_label = document.getElementById("captcheck_" + idp + "_alt_question_button"); + var img_q = document.getElementById("captcheck_" + idp + "_question_image"); + var acc_q = document.getElementById("captcheck_" + idp + "_question_access"); + var img_a = document.getElementById("captcheck_" + idp + "_answer_images"); + var acc_a = document.getElementById("captcheck_" + idp + "_answer_access"); + if (switch_label.innerHTML == "> Text mode") { + switch_label.innerHTML = "> Image mode"; + img_q.style.display = "none"; + acc_q.style.display = "initial"; + img_a.style.display = "none"; + acc_a.style.display = "initial"; + acc_a.innerHTML = ""; + } else { + switch_label.innerHTML = "> Text mode"; + img_q.style.display = "initial"; + acc_q.style.display = "none"; + img_a.style.display = "initial"; + acc_a.style.display = "none"; + acc_a.innerHTML = ""; + } + } + var nonce = ""; /* Loop over all the CAPTCHA containers on the page, setting up a different CAPTCHA in each */ Array.prototype.forEach.call(document.getElementsByClassName("captcheck_container"), function (container) { + if (container.dataset.stylenonce) { + nonce = container.dataset.stylenonce; + } var xhr = new XMLHttpRequest(); xhr.open('GET', api_url + "?action=new", true); xhr.onreadystatechange = function () { @@ -47,14 +75,14 @@ window.onload = function () { var skey_input = document.createElement("span"); skey_input.innerHTML = ""; captcha.appendChild(skey_input); - + var answer_buttons = document.querySelectorAll(".captcheck_answer_label[data-prefix=\"" + idp + "\"]"); for (var i = 0; i < answer_buttons.length; i++) { answer_buttons[i].addEventListener("click", function (ev) { chooseAnswer(ev.target.getAttribute("data-prefix"), ev.target.getAttribute("data-answer")); ev.preventDefault(); }); - answer_buttons[i].addEventListener('keydown', function(ev) { + answer_buttons[i].addEventListener('keydown', function (ev) { if (ev.key === "Enter" || ev.which === 13 || ev.keyCode === 13 || ev.key === ' ' || ev.which === 32 || ev.keyCode === 32) { chooseAnswer(ev.target.getAttribute("data-prefix"), ev.target.getAttribute("data-answer")); ev.preventDefault(); @@ -65,7 +93,7 @@ window.onload = function () { switchMode(ev.target.getAttribute("data-prefix")); ev.preventDefault(); }); - document.querySelector(".captcheck_alt_question_button[data-prefix=\"" + idp + "\"]").addEventListener('keydown', function(ev) { + document.querySelector(".captcheck_alt_question_button[data-prefix=\"" + idp + "\"]").addEventListener('keydown', function (ev) { if (ev.key === "Enter" || ev.which === 13 || ev.keyCode === 13 || ev.key === ' ' || ev.which === 32 || ev.keyCode === 32) { switchMode(ev.target.getAttribute("data-prefix")); ev.preventDefault(); @@ -79,33 +107,13 @@ window.onload = function () { }; xhr.send(); }); -} -function chooseAnswer(idp, ans) { - var box = document.getElementById("captcheck_" + idp + "_answer_" + ans); - box.checked = true; - return false; -} - -function switchMode(idp) { - var switch_label = document.getElementById("captcheck_" + idp + "_alt_question_button"); - var img_q = document.getElementById("captcheck_" + idp + "_question_image"); - var acc_q = document.getElementById("captcheck_" + idp + "_question_access"); - var img_a = document.getElementById("captcheck_" + idp + "_answer_images"); - var acc_a = document.getElementById("captcheck_" + idp + "_answer_access"); - if (switch_label.innerHTML == "> Text mode") { - switch_label.innerHTML = "> Image mode"; - img_q.style.display = "none"; - acc_q.style.display = "initial"; - img_a.style.display = "none"; - acc_a.style.display = "initial"; - acc_a.innerHTML = ""; - } else { - switch_label.innerHTML = "> Text mode"; - img_q.style.display = "initial"; - acc_q.style.display = "none"; - img_a.style.display = "initial"; - acc_a.style.display = "none"; - acc_a.innerHTML = ""; + /* Add custom styles */ + var styles = document.createElement('style'); + if (nonce != "") { + styles.setAttribute("nonce", nonce); } + /* Remove newlines/comments from captcheck.css and put it here */ + styles.innerHTML = ".captcheck_box{font-family:Ubuntu,Arial,sans-serif;color:black;border:1px solid #e0e0e0;border-radius:3px;display:inline-block;padding:3px;margin:5px 2px 5px 1px;background-color:#f5f5f5;text-decoration:none}.captcheck_label_message,.captcheck_label_message b{color:black;font-family:Ubuntu,Roboto,Arial,sans-serif}.captcheck_answer_label{border:0}.captcheck_answer_label>input{visibility:hidden;position:absolute}.captcheck_answer_label>input+img{cursor:pointer;border:2px solid transparent;border-radius:3px;min-width:32px;width:18%;max-width:64px}.captcheck_answer_label>input:checked+img{cursor:pointer;border:2px solid #424242;border-radius:3px}.captcheck_error_message{color:red}.captcheck_question_image{display:initial}.captcheck_question_access{display:none}.captcheck_alt_question_button{float:right;font-size:80%;cursor:pointer;color:inherit;text-decoration:inherit;border:0}.captcheck_answer_images{display:initial}.captcheck_answer_access{display:none}"; + document.body.appendChild(styles); } \ No newline at end of file