[JENKINS-21052] Warn user that the copy button requires HTTPS (#7665)

Warn user that the copy button requires HTTPS

Users that run Jenkins over an unencrypted (HTTP) connection will see
the copy button, but it does not perform a copy.  Browsers will only
allow access to the clipboard if the page is in a secure context.

With this change, the text that is displayed when the user clicks the
copy button from an insecure context will alert the user that copy
requires a secure connection.

https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript
describes the alternatives in more detail.

https://issues.jenkins.io/browse/JENKINS-21052 reported that the copy
button does not work.  I've confirmed that it works when using an HTTPS
connection.

Author: MarkEWaite

core/src/main/resources/lib/layout/copyButton/copyButton.js

@@ -4,28 +4,35 @@ Behaviour.specify(
   0,
   function (copyButton) {
     copyButton.addEventListener("click", () => {
-      // Make an invisible textarea element containing the text
-      const fakeInput = document.createElement("textarea");
-      fakeInput.value = copyButton.getAttribute("text");
-      fakeInput.style.width = "1px";
-      fakeInput.style.height = "1px";
-      fakeInput.style.border = "none";
-      fakeInput.style.padding = "0px";
-      fakeInput.style.position = "absolute";
-      fakeInput.style.top = "-99999px";
-      fakeInput.style.left = "-99999px";
-      fakeInput.setAttribute("tabindex", "-1");
-      document.body.appendChild(fakeInput);
+      if (isSecureContext) {
+        // Make an invisible textarea element containing the text
+        const fakeInput = document.createElement("textarea");
+        fakeInput.value = copyButton.getAttribute("text");
+        fakeInput.style.width = "1px";
+        fakeInput.style.height = "1px";
+        fakeInput.style.border = "none";
+        fakeInput.style.padding = "0px";
+        fakeInput.style.position = "absolute";
+        fakeInput.style.top = "-99999px";
+        fakeInput.style.left = "-99999px";
+        fakeInput.setAttribute("tabindex", "-1");
+        document.body.appendChild(fakeInput);
 
-      // Select the text and copy it to the clipboard
-      fakeInput.select();
-      navigator.clipboard.writeText(fakeInput.value);
+        // Select the text and copy it to the clipboard
+        fakeInput.select();
+        navigator.clipboard.writeText(fakeInput.value);
 
-      // Remove the textarea element
-      document.body.removeChild(fakeInput);
+        // Remove the textarea element
+        document.body.removeChild(fakeInput);
 
-      // Show the completion message
-      hoverNotification(copyButton.getAttribute("message"), copyButton);
+        // Show the completion message
+        hoverNotification(copyButton.getAttribute("message"), copyButton);
+      } else {
+        hoverNotification(
+          "Copy is only supported with a secure (HTTPS) connection",
+          copyButton
+        );
+      }
     });
   }
 );