Parcourir la source

Use event handlers instead of onClick and onEnter, for strict CSPs

master
Skylar Ittner il y a 2 ans
Parent
révision
b72de471fe
3 fichiers modifiés avec 49 ajouts et 5 suppressions
  1. 1
    1
      captcheck.dist.js
  2. 26
    2
      captcheck.js
  3. 22
    2
      index.php

+ 1
- 1
captcheck.dist.js Voir le fichier

@@ -1 +1 @@
function chooseAnswer(e,t){var a=document.getElementById("captcheck_"+e+"_answer_"+t);return a.checked=!0,!1}function switchMode(e){var t=document.getElementById("captcheck_"+e+"_alt_question_button"),a=document.getElementById("captcheck_"+e+"_question_image"),c=document.getElementById("captcheck_"+e+"_question_access"),n=document.getElementById("captcheck_"+e+"_answer_images"),s=document.getElementById("captcheck_"+e+"_answer_access");"&gt; Text mode"==t.innerHTML?(t.innerHTML="&gt; Image mode",a.style.display="none",c.style.display="initial",n.style.display="none",s.style.display="initial",s.innerHTML="<input type='text' name='captcheck_selected_answer' aria-label='Type your answer here.' autocomplete='off' autofill='off'/>"):(t.innerHTML="&gt; Text mode",a.style.display="initial",c.style.display="none",n.style.display="initial",s.style.display="none",s.innerHTML="")}window.onload=function(){var e="https://captcheck.netsyms.com/api.php",t=document.createElement("style");t.innerHTML=".captcheck_box,.captcheck_label_message,.captcheck_label_message b{color:#000;font-family:Ubuntu,Arial,sans-serif}.captcheck_box{border:1px solid #e0e0e0;border-radius:3px;display:inline-block;padding:3px;margin:5px 2px 5px 1px;background-color:#f5f5f5}.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}.captcheck_answer_images{display:initial}.captcheck_answer_access{display:none}",document.body.appendChild(t),Array.prototype.forEach.call(document.getElementsByClassName("captcheck_container"),function(t){var a=new XMLHttpRequest;a.open("GET",e+"?action=new",!0),a.onreadystatechange=function(){if(4==this.readyState){var a=this.status,c=this.responseText,n=document.createElement("div");if(n.setAttribute("class","captcheck_box"),t.appendChild(n),200==a){for(var s=JSON.parse(c),i=s.id_prefix,r="<div class='captcheck_answer_images' id='captcheck_"+i+"_answer_images'>",o=0,l=s.answers.length;l>o;o++){var p=e+"?action=img&s="+s.session+"&c="+s.answers[o];r+="<a class='captcheck_answer_label' href='' tabindex='0' onClick='chooseAnswer(\""+i+'","'+s.answers[o]+"\"); return false;' onEnter='chooseAnswer(\""+i+'","'+s.answers[o]+"\"); return false;'><input id='captcheck_"+i+"_answer_"+s.answers[o]+"' type='radio' name='captcheck_selected_answer' value='"+s.answers[o]+"' /><img src='"+p+"' /></a>"}r+="</div>";var d=document.createElement("div");d.innerHTML=r+"<div class='captcheck_answer_access' id='captcheck_"+i+"_answer_access'></div>";var _=document.createElement("div");_.setAttribute("class","captcheck_label_message"),_.setAttribute("id","captcheck_"+i+"_label_message"),_.innerHTML="<span class='captcheck_question_image' id='captcheck_"+i+"_question_image'>"+s.question_i+"</span><span class='captcheck_question_access' id='captcheck_"+i+"_question_access'>"+s.question_a+"</span><a href='' class='captcheck_alt_question_button' onClick='switchMode(\""+i+"\"); return false;' onEnter='switchMode(\""+i+"\"); return false;' id='captcheck_"+i+"_alt_question_button' aria-label='Switch between image and text question' tabindex='0'>&gt; Text mode</a>",n.appendChild(_),n.appendChild(d);var h=document.createElement("span");h.innerHTML="<input type='hidden' name='captcheck_session_code' value='"+s.session+"' />",n.appendChild(h)}else n.innerHTML="<span class='captcheck_error_message'>There was a problem loading the CAPTCHA.</span>"}},a.send()})};
window.onload=function(){var b="https://captcheck.netsyms.com/api.php";var a=document.createElement("style");a.innerHTML=".captcheck_box,.captcheck_label_message,.captcheck_label_message b{color:#000;font-family:Ubuntu,Arial,sans-serif}.captcheck_box{border:1px solid #e0e0e0;border-radius:3px;display:inline-block;padding:3px;margin:5px 2px 5px 1px;background-color:#f5f5f5}.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}.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="<div class='captcheck_answer_images' id='captcheck_"+f+"_answer_images'>";for(var j=0,l=h.answers.length;j<l;j++){var e=b+"?action=img&s="+h.session+"&c="+h.answers[j];m+="<a class='captcheck_answer_label' href='' data-prefix='"+f+"' data-answer='"+h.answers[j]+"' tabindex='0' aria-role='button'><input id='captcheck_"+f+"_answer_"+h.answers[j]+"' type='radio' name='captcheck_selected_answer' value='"+h.answers[j]+"' data-prefix='"+f+"' data-answer='"+h.answers[j]+"' /><img src='"+e+"' data-prefix='"+f+"' data-answer='"+h.answers[j]+"'/></a>"}m+="</div>";var p=document.createElement("div");p.innerHTML=m+"<div class='captcheck_answer_access' id='captcheck_"+f+"_answer_access'></div>";var k=document.createElement("div");k.setAttribute("class","captcheck_label_message");k.setAttribute("id","captcheck_"+f+"_label_message");k.innerHTML="<span class='captcheck_question_image' id='captcheck_"+f+"_question_image'>"+h.question_i+"</span><span class='captcheck_question_access' id='captcheck_"+f+"_question_access'>"+h.question_a+"</span><a href='' class='captcheck_alt_question_button' data-prefix='"+f+"' id='captcheck_"+f+"_alt_question_button' aria-role='button' aria-label='Switch between image and text question' tabindex='0'>&gt; Text mode</a>";o.appendChild(k);o.appendChild(p);var q=document.createElement("span");q.innerHTML="<input type='hidden' name='captcheck_session_code' value='"+h.session+"' />";o.appendChild(q);var n=document.querySelectorAll('.captcheck_answer_label[data-prefix="'+f+'"]');for(var j=0;j<n.length;j++){n[j].addEventListener("click",function(i){chooseAnswer(i.target.getAttribute("data-prefix"),i.target.getAttribute("data-answer"));i.preventDefault()});n[j].addEventListener("keydown",function(i){if(i.key==="Enter"||i.which===13||i.keyCode===13||i.key===" "||i.which===32||i.keyCode===32){chooseAnswer(i.target.getAttribute("data-prefix"),i.target.getAttribute("data-answer"));i.preventDefault()}})}document.querySelector('.captcheck_alt_question_button[data-prefix="'+f+'"]').addEventListener("click",function(i){switchMode(i.target.getAttribute("data-prefix"));i.preventDefault()});document.querySelector('.captcheck_alt_question_button[data-prefix="'+f+'"]').addEventListener("keydown",function(i){if(i.key==="Enter"||i.which===13||i.keyCode===13||i.key===" "||i.which===32||i.keyCode===32){switchMode(i.target.getAttribute("data-prefix"));i.preventDefault()}})}else{o.innerHTML="<span class='captcheck_error_message'>There was a problem loading the CAPTCHA.</span>"}}};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=="&gt; Text mode"){d.innerHTML="&gt; Image mode";a.style.display="none";f.style.display="initial";c.style.display="none";b.style.display="initial";b.innerHTML="<input type='text' name='captcheck_selected_answer' aria-label='Type your answer here.' autocomplete='off' autofill='off'/>"}else{d.innerHTML="&gt; Text mode";a.style.display="initial";f.style.display="none";c.style.display="initial";b.style.display="none";b.innerHTML=""}};

+ 26
- 2
captcheck.js Voir le fichier

@@ -28,7 +28,7 @@ window.onload = function () {
var answers = "<div class='captcheck_answer_images' id='captcheck_" + idp + "_answer_images'>";
for (var i = 0, len = data.answers.length; i < len; i++) {
var src = api_url + "?action=img&s=" + data.session + "&c=" + data.answers[i];
answers += "<a class='captcheck_answer_label' href='' tabindex='0' onClick='chooseAnswer(\"" + idp + "\",\"" + data.answers[i] + "\"); return false;' onEnter='chooseAnswer(\"" + idp + "\",\"" + data.answers[i] + "\"); return false;'><input id='captcheck_" + idp + "_answer_" + data.answers[i] + "' type='radio' name='captcheck_selected_answer' value='" + data.answers[i] + "' /><img src='" + src + "' /></a>";
answers += "<a class='captcheck_answer_label' href='' data-prefix='" + idp + "' data-answer='" + data.answers[i] + "' tabindex='0' aria-role='button'><input id='captcheck_" + idp + "_answer_" + data.answers[i] + "' type='radio' name='captcheck_selected_answer' value='" + data.answers[i] + "' data-prefix='" + idp + "' data-answer='" + data.answers[i] + "' /><img src='" + src + "' data-prefix='" + idp + "' data-answer='" + data.answers[i] + "'/></a>";
}
answers += "</div>";
var answer_div = document.createElement("div");
@@ -37,7 +37,7 @@ window.onload = function () {
var question_div = document.createElement("div");
question_div.setAttribute("class", "captcheck_label_message");
question_div.setAttribute("id", "captcheck_" + idp + "_label_message")
question_div.innerHTML = "<span class='captcheck_question_image' id='captcheck_" + idp + "_question_image'>" + data.question_i + "</span><span class='captcheck_question_access' id='captcheck_" + idp + "_question_access'>" + data.question_a + "</span><a href='' class='captcheck_alt_question_button' onClick='switchMode(\"" + idp + "\"); return false;' onEnter='switchMode(\"" + idp + "\"); return false;' id='captcheck_" + idp + "_alt_question_button' aria-label='Switch between image and text question' tabindex='0'>&gt; Text mode</a>";
question_div.innerHTML = "<span class='captcheck_question_image' id='captcheck_" + idp + "_question_image'>" + data.question_i + "</span><span class='captcheck_question_access' id='captcheck_" + idp + "_question_access'>" + data.question_a + "</span><a href='' class='captcheck_alt_question_button' data-prefix='" + idp + "' id='captcheck_" + idp + "_alt_question_button' aria-role='button' aria-label='Switch between image and text question' tabindex='0'>&gt; Text mode</a>";

/* Add question and answers */
captcha.appendChild(question_div);
@@ -47,6 +47,30 @@ window.onload = function () {
var skey_input = document.createElement("span");
skey_input.innerHTML = "<input type='hidden' name='captcheck_session_code' value='" + data.session + "' />";
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) {
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();
}
});
}
document.querySelector(".captcheck_alt_question_button[data-prefix=\"" + idp + "\"]").addEventListener("click", function (ev) {
switchMode(ev.target.getAttribute("data-prefix"));
ev.preventDefault();
});
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();
}
});
} else {
/* Add error message */
captcha.innerHTML = "<span class='captcheck_error_message'>There was a problem loading the CAPTCHA.</span>";

+ 22
- 2
index.php Voir le fichier

@@ -1,2 +1,22 @@
<?php
header("Location: test.html");
<!DOCTYPE html>
<title>Captcheck Sample Form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="captcheck.dist.js"></script>
<form action="test.php" method="POST">
<input type="hidden" name="form_id" value="1" />
<input type="text" name="form_field" placeholder="Some random form field" />
<div class="captcheck_container">
</div>
<button type="submit">Submit Form 1</button>
</form>

<hr />

<form action="test.php" method="POST">
<input type="hidden" name="form_id" value="2" />
<input type="text" name="form_field" placeholder="Some random form field" />
<div class="captcheck_container">
</div>
<button type="submit">Submit Form 2</button>
</form>

Chargement…
Annuler
Enregistrer