Przeglądaj źródła

Add support for nonces (put data-stylenonce="NONCE" on the div)

Skylar Ittner 1 rok temu
rodzic
commit
7753d696b8
2 zmienionych plików z 44 dodań i 36 usunięć
  1. 1
    1
      captcheck.dist.js
  2. 43
    35
      captcheck.js

+ 1
- 1
captcheck.dist.js Wyświetl plik

@@ -1 +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="<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=""}};
1
+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");"&gt; Text mode"==t.innerHTML?(t.innerHTML="&gt; Image mode",a.style.display="none",n.style.display="initial",c.style.display="none",i.style.display="initial",i.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",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="<div class='captcheck_answer_images' id='captcheck_"+o+"_answer_images'>",l=0,p=r.answers.length;l<p;l++){var _=e+"?action=img&s="+r.session+"&c="+r.answers[l];d+="<a class='captcheck_answer_label' href='' data-prefix='"+o+"' data-answer='"+r.answers[l]+"' tabindex='0' aria-role='button'><input id='captcheck_"+o+"_answer_"+r.answers[l]+"' type='radio' name='captcheck_selected_answer' value='"+r.answers[l]+"' data-prefix='"+o+"' data-answer='"+r.answers[l]+"' /><img src='"+_+"' data-prefix='"+o+"' data-answer='"+r.answers[l]+"'/></a>"}d+="</div>";var u=document.createElement("div");u.innerHTML=d+"<div class='captcheck_answer_access' id='captcheck_"+o+"_answer_access'></div>";var h=document.createElement("div");h.setAttribute("class","captcheck_label_message"),h.setAttribute("id","captcheck_"+o+"_label_message"),h.innerHTML="<span class='captcheck_question_image' id='captcheck_"+o+"_question_image'>"+r.question_i+"</span><span class='captcheck_question_access' id='captcheck_"+o+"_question_access'>"+r.question_a+"</span><a href='' class='captcheck_alt_question_button' data-prefix='"+o+"' id='captcheck_"+o+"_alt_question_button' aria-role='button' aria-label='Switch between image and text question' tabindex='0'>&gt; Text mode</a>",s.appendChild(h),s.appendChild(u);var m=document.createElement("span");m.innerHTML="<input type='hidden' name='captcheck_session_code' value='"+r.session+"' />",s.appendChild(m);var k=document.querySelectorAll('.captcheck_answer_label[data-prefix="'+o+'"]');for(l=0;l<k.length;l++)k[l].addEventListener("click",function(e){t(e.target.getAttribute("data-prefix"),e.target.getAttribute("data-answer")),e.preventDefault()}),k[l].addEventListener("keydown",function(e){"Enter"!==e.key&&13!==e.which&&13!==e.keyCode&&" "!==e.key&&32!==e.which&&32!==e.keyCode||(t(e.target.getAttribute("data-prefix"),e.target.getAttribute("data-answer")),e.preventDefault())});document.querySelector('.captcheck_alt_question_button[data-prefix="'+o+'"]').addEventListener("click",function(e){a(e.target.getAttribute("data-prefix")),e.preventDefault()}),document.querySelector('.captcheck_alt_question_button[data-prefix="'+o+'"]').addEventListener("keydown",function(e){"Enter"!==e.key&&13!==e.which&&13!==e.keyCode&&" "!==e.key&&32!==e.which&&32!==e.keyCode||(a(e.target.getAttribute("data-prefix")),e.preventDefault())})}else s.innerHTML="<span class='captcheck_error_message'>There was a problem loading the CAPTCHA.</span>"}},i.send()});var c=document.createElement("style");""!=n&&c.setAttribute("nonce",n),c.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(c)};

+ 43
- 35
captcheck.js Wyświetl plik

@@ -1,14 +1,42 @@
1 1
 window.onload = function () {
2
+
2 3
     var api_url = "https://captcheck.netsyms.com/api.php";
3 4
 
4
-    /* Add custom styles */
5
-    var styles = document.createElement('style');
6
-    /* Remove newlines/comments from captcheck.css and put it here */
7
-    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}";
8
-    document.body.appendChild(styles);
5
+    function chooseAnswer(idp, ans) {
6
+        var box = document.getElementById("captcheck_" + idp + "_answer_" + ans);
7
+        box.checked = true;
8
+        return false;
9
+    }
10
+
11
+    function switchMode(idp) {
12
+        var switch_label = document.getElementById("captcheck_" + idp + "_alt_question_button");
13
+        var img_q = document.getElementById("captcheck_" + idp + "_question_image");
14
+        var acc_q = document.getElementById("captcheck_" + idp + "_question_access");
15
+        var img_a = document.getElementById("captcheck_" + idp + "_answer_images");
16
+        var acc_a = document.getElementById("captcheck_" + idp + "_answer_access");
17
+        if (switch_label.innerHTML == "&gt; Text mode") {
18
+            switch_label.innerHTML = "&gt; Image mode";
19
+            img_q.style.display = "none";
20
+            acc_q.style.display = "initial";
21
+            img_a.style.display = "none";
22
+            acc_a.style.display = "initial";
23
+            acc_a.innerHTML = "<input type='text' name='captcheck_selected_answer' aria-label='Type your answer here.' autocomplete='off' autofill='off'/>";
24
+        } else {
25
+            switch_label.innerHTML = "&gt; Text mode";
26
+            img_q.style.display = "initial";
27
+            acc_q.style.display = "none";
28
+            img_a.style.display = "initial";
29
+            acc_a.style.display = "none";
30
+            acc_a.innerHTML = "";
31
+        }
32
+    }
9 33
 
34
+    var nonce = "";
10 35
     /* Loop over all the CAPTCHA containers on the page, setting up a different CAPTCHA in each */
11 36
     Array.prototype.forEach.call(document.getElementsByClassName("captcheck_container"), function (container) {
37
+        if (container.dataset.stylenonce) {
38
+            nonce = container.dataset.stylenonce;
39
+        }
12 40
         var xhr = new XMLHttpRequest();
13 41
         xhr.open('GET', api_url + "?action=new", true);
14 42
         xhr.onreadystatechange = function () {
@@ -47,14 +75,14 @@ window.onload = function () {
47 75
                     var skey_input = document.createElement("span");
48 76
                     skey_input.innerHTML = "<input type='hidden' name='captcheck_session_code' value='" + data.session + "' />";
49 77
                     captcha.appendChild(skey_input);
50
-                    
78
+
51 79
                     var answer_buttons = document.querySelectorAll(".captcheck_answer_label[data-prefix=\"" + idp + "\"]");
52 80
                     for (var i = 0; i < answer_buttons.length; i++) {
53 81
                         answer_buttons[i].addEventListener("click", function (ev) {
54 82
                             chooseAnswer(ev.target.getAttribute("data-prefix"), ev.target.getAttribute("data-answer"));
55 83
                             ev.preventDefault();
56 84
                         });
57
-                        answer_buttons[i].addEventListener('keydown', function(ev) {
85
+                        answer_buttons[i].addEventListener('keydown', function (ev) {
58 86
                             if (ev.key === "Enter" || ev.which === 13 || ev.keyCode === 13 || ev.key === ' ' || ev.which === 32 || ev.keyCode === 32) {
59 87
                                 chooseAnswer(ev.target.getAttribute("data-prefix"), ev.target.getAttribute("data-answer"));
60 88
                                 ev.preventDefault();
@@ -65,7 +93,7 @@ window.onload = function () {
65 93
                         switchMode(ev.target.getAttribute("data-prefix"));
66 94
                         ev.preventDefault();
67 95
                     });
68
-                    document.querySelector(".captcheck_alt_question_button[data-prefix=\"" + idp + "\"]").addEventListener('keydown', function(ev) {
96
+                    document.querySelector(".captcheck_alt_question_button[data-prefix=\"" + idp + "\"]").addEventListener('keydown', function (ev) {
69 97
                         if (ev.key === "Enter" || ev.which === 13 || ev.keyCode === 13 || ev.key === ' ' || ev.which === 32 || ev.keyCode === 32) {
70 98
                             switchMode(ev.target.getAttribute("data-prefix"));
71 99
                             ev.preventDefault();
@@ -79,33 +107,13 @@ window.onload = function () {
79 107
         };
80 108
         xhr.send();
81 109
     });
82
-}
83 110
 
84
-function chooseAnswer(idp, ans) {
85
-    var box = document.getElementById("captcheck_" + idp + "_answer_" + ans);
86
-    box.checked = true;
87
-    return false;
88
-}
89
-
90
-function switchMode(idp) {
91
-    var switch_label = document.getElementById("captcheck_" + idp + "_alt_question_button");
92
-    var img_q = document.getElementById("captcheck_" + idp + "_question_image");
93
-    var acc_q = document.getElementById("captcheck_" + idp + "_question_access");
94
-    var img_a = document.getElementById("captcheck_" + idp + "_answer_images");
95
-    var acc_a = document.getElementById("captcheck_" + idp + "_answer_access");
96
-    if (switch_label.innerHTML == "&gt; Text mode") {
97
-        switch_label.innerHTML = "&gt; Image mode";
98
-        img_q.style.display = "none";
99
-        acc_q.style.display = "initial";
100
-        img_a.style.display = "none";
101
-        acc_a.style.display = "initial";
102
-        acc_a.innerHTML = "<input type='text' name='captcheck_selected_answer' aria-label='Type your answer here.' autocomplete='off' autofill='off'/>";
103
-    } else {
104
-        switch_label.innerHTML = "&gt; Text mode";
105
-        img_q.style.display = "initial";
106
-        acc_q.style.display = "none";
107
-        img_a.style.display = "initial";
108
-        acc_a.style.display = "none";
109
-        acc_a.innerHTML = "";
111
+    /* Add custom styles */
112
+    var styles = document.createElement('style');
113
+    if (nonce != "") {
114
+        styles.setAttribute("nonce", nonce);
110 115
     }
116
+    /* Remove newlines/comments from captcheck.css and put it here */
117
+    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}";
118
+    document.body.appendChild(styles);
111 119
 }

Ładowanie…
Anuluj
Zapisz