Use event listener for QR-Code display in CSP compliance purpose

Signed-off-by: Thibaud CANALE <[email protected]>
shaarli · Nov 16, 2024 · f2b6d78 · f2b6d78
1 parent 8b334a5
commit f2b6d78
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/plugins/qrcode/qrcode.html b/plugins/qrcode/qrcode.html
@@ -1,5 +1,3 @@
 <div class="linkqrcode">
-    <a href="#" onclick="showQrCode(this); return false;" class="qrcode" data-permalink="%s">
-        <img src="%s/qrcode/qrcode.png" class="linklist-plugin-icon" title="QR-Code" alt="QRCode">
-    </a>
+    <img data-permalink="%s" src="%s/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode">
 </div>
diff --git a/plugins/qrcode/shaarli-qrcode.js b/plugins/qrcode/shaarli-qrcode.js
@@ -51,7 +51,11 @@ function showQrCode(caller,loading)
     element.id = 'permalinkQrcode';
 
 	// Make QR-Code div commit sepuku when clicked:
-    if ( element.attachEvent ){
+    if (element.addEventListener) {
+        element.addEventListener('click', function() {
+            this.parentNode.removeChild(this);
+        });
+    } else if (element.attachEvent) {
         element.attachEvent('onclick', 'this.parentNode.removeChild(this);' );
 
     } else {
@@ -89,3 +93,18 @@ function removeQrcode()
     }
     return false;
 }
+
+// Create "click" event listeners for QR-Code display action
+function setQrCodeClickEvent()
+{
+    const qrcode_collec = document.getElementsByClassName("qrcode");
+
+    Array.from(qrcode_collec).forEach(function(element) {
+        element.addEventListener('click', function() {
+            showQrCode(this);
+            return false;
+        });
+    });
+}
+
+setQrCodeClickEvent();