Merge pull request #15 from penguineer/safe-url

Remove API key from browser URL bar to improve security
penguineer · Jul 19, 2022 · 7f2df32 · 7f2df32
2 parents 2a8b680 + fdf39c7
commit 7f2df32
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 3 deletions.
diff --git a/www/aw.css b/www/aw.css
@@ -88,6 +88,28 @@ display: inline;
 cursor: pointer;
 }
 
+div#share-link {
+  border-top: 1px solid;
+  margin-top: 0.7em;
+  padding-top: 0.3em;
+  font-weight: normal;
+  font-size: small;
+}
+
+div#share-link .disabled {
+  color: #888888;
+}
+
+div#share-link a {
+color: inherit;
+text-decoration: none;
+}
+
+div#share-link span {
+  display: inline-block;
+  width: 45%;
+  text-align: center;
+}
 
 div.error {
     background: #ed6a5a;

diff --git a/www/aw.js b/www/aw.js
@@ -270,12 +270,61 @@ loadActionables = function(url, apikey, service) {
     });
 }
 
+setLink = function(type, url) {
+    var el = $('#'+type+'-link-url');
+    var cp = $('#'+type+'-link-copy');
+
+    if (url) {
+        el.attr("href", url);
+        el.removeClass("disabled");
+        cp.attr("href", "javascript:copyToClipboard('"+type+"');");
+        cp.css('visibility', 'visible');
+    } else {
+        el.removeAttr("href");
+        el.addClass("disabled");
+        cp.removeAttr("href");
+        cp.css('visibility', 'hidden');
+    }
+}
+
+getAbsolutePath = function() {
+    // https://stackoverflow.com/a/2864169/3888050
+    var loc = window.location;
+    var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1);
+    return loc.href.substring(0, loc.href.length - ((loc.pathname + loc.search + loc.hash).length - pathName.length));
+}
+
+
+populateLinks = function(url, apikey) {
+    const path = getAbsolutePath();
+
+    if (url) {
+        var shareLink = path+'?url='+encodeURIComponent(url);
+        setLink('share', shareLink);
+
+        if (apikey) {
+            var personalLink = path+'?url='+encodeURIComponent(url)+'&apikey='+encodeURIComponent(apikey);
+            setLink('personal', personalLink);
+        } else {
+            setLink('personal', null);
+        }
+    } else {
+        setLink('share', null);
+    }
+}
+
+copyToClipboard = function(type) {
+    var el = $('#'+type+'-link-url');
+    navigator.clipboard.writeText(el.attr("href"));
+}
+
 configAvailable = function(config) {
     const service = config.ACTIONABLES_URL;
     console.log("Using actionable service at " + service);
 
     let url = urlParam('url');
     let apikey = urlParam('apikey');
+    populateLinks(url, apikey);
 
     $("#callparams [name='tr_tracker']").val(url)
     $("#callparams [name='tr_apikey']").val(apikey)
@@ -285,9 +334,7 @@ configAvailable = function(config) {
     $("#load").click(function(event) {
         let url = $("#callparams [name='tr_tracker']").val()
         let apikey = $("#callparams [name='tr_apikey']").val()
-
-        var newurl = '?url='+encodeURIComponent(url)+ '&apikey='+encodeURIComponent(apikey);
-        window.history.pushState({}, '', newurl);
+        populateLinks(url, apikey);
 
         loadActionables(url, apikey, service);
 

diff --git a/www/index.html b/www/index.html
@@ -31,6 +31,10 @@ <h2>Call Parameters</h2>
                     </div>
                     <div id="load">▶️</div>
                 </form>
+                <div id="share-link">
+                    <span><a id="share-link-url" class="disabled">Share Link (tracker only)</a> <a id="share-link-copy">📋</a></span>
+                    <span><a id="personal-link-url" class="disabled">Personal Link (with API key!)</a> <a id="personal-link-copy">📋</a></span>
+                </div>
             </div>
 
         </div>