Cleanup some encoding and content generation issues

*  Match "mailto:" case-insensitively
*  Decode mailto: param to properly handle email addresses that contain
   non-ASCII characters.
*  Encode email address before crafting mailto: URL so that emails that
   contain '#' work properly and do not cut off URL parameters when later
   generating URLs for Gmail, Outlook, etc.
*  URL Encode email when generating URLs for Gmail, Outlook, etc. so
   that a crafted email address cannot specify extra parameters to those
   services.
*  Don't append '?' to outlook email address.
*  Rename encrypt to encode since "encrypt" implies hard-to-reverse
   which btoa is not.
*  Assign to textContent instead of innerHTML to make it obvious to
   security linters that the library does not use XSS-risky patterns.

dist/mailgo.js

@@ -11,7 +11,7 @@ mailgoInit = () => {
 
   // all mailgos in the document
   const mailgos = document.querySelectorAll(
-    'a[href^="mailto:"]:not(.no-mailgo), a[href="#mailgo"], a.mailgo'
+    'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo'
   );
 
   // mailgo on every element
@@ -24,11 +24,12 @@ mailgoInit = () => {
       bodyMail = "";
 
     // mailgo all the element with href=^"mailto:"
-    if (mailgo.href && mailgo.href.startsWith(MAILTO)) {
+    if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) {
-      mail = mailgo.href
+      mail = decodeURIComponent(
+        mailgo.href
           .split("?")[0]
           .split(MAILTO)[1]
-        .trim();
+          .trim());
 
       mailtoHref = mailgo.href;
       url = new URL(mailtoHref);
@@ -46,7 +47,7 @@ mailgoInit = () => {
         mailgo.getAttribute("data-address") +
         "@" +
         mailgo.getAttribute("data-domain");
-      mailtoHref = MAILTO + mail;
+      mailtoHref = MAILTO + encodeURIComponent(mail);
       url = new URL(mailtoHref);
     }
 
@@ -131,7 +132,8 @@ mailgoInit = () => {
 
     // Gmail
     let gmail = document.createElement("a");
-    gmail.href = "https://mail.google.com/mail?extsrc=mailto&url=" + mailtoHref;
+    gmail.href = "https://mail.google.com/mail?extsrc=mailto&url="
+      + encodeURIComponent(mailtoHref);
     gmail.classList.add("mailgo-open");
     gmail.classList.add("gmail");
     let gmailContent = document.createTextNode("open in ");
@@ -147,7 +149,8 @@ mailgoInit = () => {
     // Outlook
     let outlook = document.createElement("a");
     outlook.href =
-      "https://outlook.office.com/owa/?rru=compose&to=" + mail + url.search;
+      "https://outlook.office.com/owa/?rru=compose&to="
+      + encodeURIComponent(mail) + url.search.replace(/^[$]/, '&');
     outlook.classList.add("mailgo-open");
     outlook.classList.add("outlook");
     let outlookContent = document.createTextNode("open in ");
@@ -164,7 +167,7 @@ mailgoInit = () => {
     let open = document.createElement("a");
 
     open.href = "#mailgo-open";
-    let encEmail = encryptEmail(mail);
+    let encEmail = encodeEmail(mail);
     open.addEventListener(
       "click",
       () => {
@@ -190,9 +193,9 @@ mailgoInit = () => {
       "click",
       event => {
         copyToClipboard(mail);
-        copy.innerHTML = "copied";
+        copy.textContent = "copied";
         setTimeout(() => {
-          copy.innerHTML = "copy";
+          copy.textContent = "copy";
         }, 999);
       },
       false
@@ -268,5 +271,5 @@ copyToClipboard = str => {
 // decrypt email
 mailToEncoded = encoded => (window.location.href = MAILTO + atob(encoded));
 
-// encrypt email
+// encode email
-encryptEmail = email => btoa(email);
+encodeEmail = email => btoa(email);

dist/mailgo.min.js

@@ -1 +1 @@
-const VERSION="0.2.6",MAILTO="mailto:";mailgoInit=(()=>{const e=document.createElement("link");e.rel="stylesheet",e.type="text/css",e.href="https://unpkg.com/mailgo@0.2.6/dist/mailgo.min.css",document.head.appendChild(e),document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo), a[href="#mailgo"], a.mailgo').forEach((e,t)=>{let a="",l="",d="",n="",o="",c="";if(e.href&&e.href.startsWith(MAILTO)){a=e.href.split("?")[0].split(MAILTO)[1].trim(),l=e.href,url=new URL(l);let t=new URLSearchParams(url.search);d=t.get("cc"),n=t.get("bcc"),o=t.get("subject"),c=t.get("body")}else a=e.getAttribute("data-address")+"@"+e.getAttribute("data-domain"),l=MAILTO+a,url=new URL(l);if(!validateEmail(a))return;let i=document.createElement("div");i.classList.add("mailgo-modal"),i.setAttribute("data-index",t);let m=document.createElement("div");m.className="mailgo-modal-background",i.appendChild(m);let p=document.createElement("div");p.className="mailgo-modal-content",i.appendChild(p);let s=document.createElement("strong");s.className="mailgo-title";let r=document.createTextNode(a);s.appendChild(r),p.appendChild(s);let u=document.createElement("div");if(u.className="mailgo-details",d&&""!=d){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let a=document.createTextNode("cc");t.appendChild(a);let l=document.createTextNode(": "+d);e.appendChild(t),e.appendChild(l),u.appendChild(e)}if(n&&""!=n){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let a=document.createTextNode("bcc");t.appendChild(a);let l=document.createTextNode(": "+n);e.appendChild(t),e.appendChild(l),u.appendChild(e)}if(o&&""!=o){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let a=document.createTextNode("cc");t.appendChild(a);let l=document.createTextNode(": "+o);e.appendChild(t),e.appendChild(l),u.appendChild(e)}if(c&&""!=c){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let a=document.createTextNode("cc");t.appendChild(a);let l=document.createTextNode(": "+c);e.appendChild(t),e.appendChild(l),u.appendChild(e)}p.appendChild(u);let h=document.createElement("a");h.href="https://mail.google.com/mail?extsrc=mailto&url="+l,h.classList.add("mailgo-open"),h.classList.add("gmail");let g=document.createTextNode("open in ");h.appendChild(g);let C=document.createElement("span");C.className="mailgo-weight-500";let E=document.createTextNode("Gmail");C.appendChild(E),h.appendChild(C),p.appendChild(h);let N=document.createElement("a");N.href="https://outlook.office.com/owa/?rru=compose&to="+a+url.search,N.classList.add("mailgo-open"),N.classList.add("outlook");let T=document.createTextNode("open in ");N.appendChild(T);let L=document.createElement("span");L.className="mailgo-weight-500";let f=document.createTextNode("Outlook");L.appendChild(f),N.appendChild(L),p.appendChild(N);let x=document.createElement("a");x.href="#mailgo-open";let b=encryptEmail(a);x.addEventListener("click",()=>{mailToEncoded(b)},!1),x.classList.add("mailgo-open"),x.classList.add("mailgo-weight-500");let y=document.createTextNode("open");x.appendChild(y),p.appendChild(x);let v=document.createElement("a");v.href="#mailgo-copy",v.classList.add("mailgo-copy"),v.classList.add("mailgo-weight-500");let w=document.createTextNode("copy");v.appendChild(w),v.addEventListener("click",e=>{copyToClipboard(a),v.innerHTML="copied",setTimeout(()=>{v.innerHTML="copy"},999)},!1),p.appendChild(v);let A=document.createElement("a");A.href="https://mailgo.js.org",A.className="mailgo-by",A.target="_blank";let k=document.createTextNode("mailgo.js.org");A.appendChild(k),p.appendChild(A),e.parentNode.insertBefore(i,e.nextSibling),e.addEventListener("click",t=>{t.preventDefault(),e.nextElementSibling.classList.add("is-active")},!1),m.addEventListener("click",t=>{e.nextElementSibling.classList.remove("is-active")},!1)})}),document.addEventListener("DOMContentLoaded",mailgoInit,!1),validateEmail=(e=>{return/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(e)}),copyToClipboard=(e=>{const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.position="absolute",t.style.left="-9999px",document.body.appendChild(t);const a=document.getSelection().rangeCount>0&&document.getSelection().getRangeAt(0);t.select(),document.execCommand("copy"),document.body.removeChild(t),a&&(document.getSelection().removeAllRanges(),document.getSelection().addRange(a))}),mailToEncoded=(e=>window.location.href=MAILTO+atob(e)),encryptEmail=(e=>btoa(e));
+const VERSION="0.2.6",MAILTO="mailto:";mailgoInit=(()=>{const e=document.createElement("link");e.rel="stylesheet",e.type="text/css",e.href="https://unpkg.com/mailgo@0.2.6/dist/mailgo.min.css",document.head.appendChild(e),document.querySelectorAll('a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo').forEach((e,t)=>{let a="",d="",l="",n="",o="",c="";if(e.href&&e.href.toLowerCase().startsWith(MAILTO)){a=decodeURIComponent(e.href.split("?")[0].split(MAILTO)[1].trim()),d=e.href,url=new URL(d);let t=new URLSearchParams(url.search);l=t.get("cc"),n=t.get("bcc"),o=t.get("subject"),c=t.get("body")}else a=e.getAttribute("data-address")+"@"+e.getAttribute("data-domain"),d=MAILTO+encodeURIComponent(a),url=new URL(d);if(!validateEmail(a))return;let i=document.createElement("div");i.classList.add("mailgo-modal"),i.setAttribute("data-index",t);let m=document.createElement("div");m.className="mailgo-modal-background",i.appendChild(m);let p=document.createElement("div");p.className="mailgo-modal-content",i.appendChild(p);let s=document.createElement("strong");s.className="mailgo-title";let r=document.createTextNode(a);s.appendChild(r),p.appendChild(s);let u=document.createElement("div");if(u.className="mailgo-details",l&&""!=l){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let a=document.createTextNode("cc");t.appendChild(a);let d=document.createTextNode(": "+l);e.appendChild(t),e.appendChild(d),u.appendChild(e)}if(n&&""!=n){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let a=document.createTextNode("bcc");t.appendChild(a);let d=document.createTextNode(": "+n);e.appendChild(t),e.appendChild(d),u.appendChild(e)}if(o&&""!=o){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let a=document.createTextNode("cc");t.appendChild(a);let d=document.createTextNode(": "+o);e.appendChild(t),e.appendChild(d),u.appendChild(e)}if(c&&""!=c){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let a=document.createTextNode("cc");t.appendChild(a);let d=document.createTextNode(": "+c);e.appendChild(t),e.appendChild(d),u.appendChild(e)}p.appendChild(u);let h=document.createElement("a");h.href="https://mail.google.com/mail?extsrc=mailto&url="+encodeURIComponent(d),h.classList.add("mailgo-open"),h.classList.add("gmail");let g=document.createTextNode("open in ");h.appendChild(g);let C=document.createElement("span");C.className="mailgo-weight-500";let E=document.createTextNode("Gmail");C.appendChild(E),h.appendChild(C),p.appendChild(h);let N=document.createElement("a");N.href="https://outlook.office.com/owa/?rru=compose&to="+encodeURIComponent(a)+url.search.replace(/^[$]/,"&"),N.classList.add("mailgo-open"),N.classList.add("outlook");let x=document.createTextNode("open in ");N.appendChild(x);let L=document.createElement("span");L.className="mailgo-weight-500";let T=document.createTextNode("Outlook");L.appendChild(T),N.appendChild(L),p.appendChild(N);let f=document.createElement("a");f.href="#mailgo-open";let b=encodeEmail(a);f.addEventListener("click",()=>{mailToEncoded(b)},!1),f.classList.add("mailgo-open"),f.classList.add("mailgo-weight-500");let v=document.createTextNode("open");f.appendChild(v),p.appendChild(f);let y=document.createElement("a");y.href="#mailgo-copy",y.classList.add("mailgo-copy"),y.classList.add("mailgo-weight-500");let w=document.createTextNode("copy");y.appendChild(w),y.addEventListener("click",e=>{copyToClipboard(a),y.textContent="copied",setTimeout(()=>{y.textContent="copy"},999)},!1),p.appendChild(y);let A=document.createElement("a");A.href="https://mailgo.js.org",A.className="mailgo-by",A.target="_blank";let I=document.createTextNode("mailgo.js.org");A.appendChild(I),p.appendChild(A),e.parentNode.insertBefore(i,e.nextSibling),e.addEventListener("click",t=>{t.preventDefault(),e.nextElementSibling.classList.add("is-active")},!1),m.addEventListener("click",t=>{e.nextElementSibling.classList.remove("is-active")},!1)})}),document.addEventListener("DOMContentLoaded",mailgoInit,!1),validateEmail=(e=>{return/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(e)}),copyToClipboard=(e=>{const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.position="absolute",t.style.left="-9999px",document.body.appendChild(t);const a=document.getSelection().rangeCount>0&&document.getSelection().getRangeAt(0);t.select(),document.execCommand("copy"),document.body.removeChild(t),a&&(document.getSelection().removeAllRanges(),document.getSelection().addRange(a))}),mailToEncoded=(e=>window.location.href=MAILTO+atob(e)),encodeEmail=(e=>btoa(e));

src/mailgo.js

@@ -11,7 +11,7 @@ mailgoInit = () => {
 
   // all mailgos in the document
   const mailgos = document.querySelectorAll(
-    'a[href^="mailto:"]:not(.no-mailgo), a[href="#mailgo"], a.mailgo'
+    'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo'
   );
 
   // mailgo on every element
@@ -24,11 +24,12 @@ mailgoInit = () => {
       bodyMail = "";
 
     // mailgo all the element with href=^"mailto:"
-    if (mailgo.href && mailgo.href.startsWith(MAILTO)) {
+    if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) {
-      mail = mailgo.href
+      mail = decodeURIComponent(
+        mailgo.href
           .split("?")[0]
           .split(MAILTO)[1]
-        .trim();
+          .trim());
 
       mailtoHref = mailgo.href;
       url = new URL(mailtoHref);
@@ -46,7 +47,7 @@ mailgoInit = () => {
         mailgo.getAttribute("data-address") +
         "@" +
         mailgo.getAttribute("data-domain");
-      mailtoHref = MAILTO + mail;
+      mailtoHref = MAILTO + encodeURIComponent(mail);
       url = new URL(mailtoHref);
     }
 
@@ -131,7 +132,8 @@ mailgoInit = () => {
 
     // Gmail
     let gmail = document.createElement("a");
-    gmail.href = "https://mail.google.com/mail?extsrc=mailto&url=" + mailtoHref;
+    gmail.href = "https://mail.google.com/mail?extsrc=mailto&url="
+      + encodeURIComponent(mailtoHref);
     gmail.classList.add("mailgo-open");
     gmail.classList.add("gmail");
     let gmailContent = document.createTextNode("open in ");
@@ -147,7 +149,8 @@ mailgoInit = () => {
     // Outlook
     let outlook = document.createElement("a");
     outlook.href =
-      "https://outlook.office.com/owa/?rru=compose&to=" + mail + url.search;
+      "https://outlook.office.com/owa/?rru=compose&to="
+      + encodeURIComponent(mail) + url.search.replace(/^[$]/, '&');
     outlook.classList.add("mailgo-open");
     outlook.classList.add("outlook");
     let outlookContent = document.createTextNode("open in ");
@@ -164,7 +167,7 @@ mailgoInit = () => {
     let open = document.createElement("a");
 
     open.href = "#mailgo-open";
-    let encEmail = encryptEmail(mail);
+    let encEmail = encodeEmail(mail);
     open.addEventListener(
       "click",
       () => {
@@ -190,9 +193,9 @@ mailgoInit = () => {
       "click",
       event => {
         copyToClipboard(mail);
-        copy.innerHTML = "copied";
+        copy.textContent = "copied";
         setTimeout(() => {
-          copy.innerHTML = "copy";
+          copy.textContent = "copy";
         }, 999);
       },
       false
@@ -268,5 +271,5 @@ copyToClipboard = str => {
 // decrypt email
 mailToEncoded = encoded => (window.location.href = MAILTO + atob(encoded));
 
-// encrypt email
+// encode email
-encryptEmail = email => btoa(email);
+encodeEmail = email => btoa(email);