Add read button to stop link previewers breaking, fix xss in notes

Author: Jaydn

handlers.go

@@ -50,6 +50,31 @@ func HealthStatusHandler(w http.ResponseWriter, r *http.Request) {
 
 // ReadNoteHandler print encrypted data for client-side decrypt and destroy note.
 func ReadNoteHandler(s *Server) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		vars := mux.Vars(r)
+		raw, _ := base64.RawURLEncoding.DecodeString(vars["id"])
+		id, err := uuid.FromBytes(raw)
+		if err != nil {
+			http.NotFound(w, r)
+			return
+		}
+
+		n := &Note{UUID: id}
+
+		// Get encrypted n or return 404
+		err = s.db.Select(n)
+		if err != nil {
+			http.NotFound(w, r)
+			return
+		}
+
+		// Render "ready" template to user
+		s.renderTemplate(w, "note.html", nil)
+	})
+}
+
+// ReadRawNoteHandler print encrypted data for client-side decrypt and destroy note.
+func ReadRawNoteHandler(s *Server) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		vars := mux.Vars(r)
 		raw, _ := base64.RawURLEncoding.DecodeString(vars["id"])
@@ -73,7 +98,8 @@ func ReadNoteHandler(s *Server) http.Handler {
 		}()
 
 		// Print encrypted n to user
-		s.renderTemplate(w, "note.html", string(n.Data))
+		//s.renderTemplate(w, "note.html", string(n.Data))
+		w.Write(n.Data)
 	})
 }
 

public/main.js

@@ -60,13 +60,28 @@ $(document).ready(function() {
     });
 
     // Show decrypted secret note
-    if($("#secret_note").length > 0){
-        let secret = window.location.hash.substring(1);
-        let cipherText = $("#secret_note").text();
-        let decrypted = sjcl.decrypt(secret, cipherText);
-        $("#secret_note").html(decrypted);
-        $("#secret_note").removeClass("hidden");
-    }
+    $("button#fetch-and-decrypt-button").click(function(event) {
+        $("button#fetch-and-decrypt-button").addClass("disabled");
+        $.ajax({
+            url: '/read' + window.location.pathname + window.location.hash,
+            method: "GET",
+            xhrFields: {
+                withCredentials: true
+            },
+            success: function(res) {
+                let secret = window.location.hash.substring(1);
+                let cipherText = res;
+                let decrypted = sjcl.decrypt(secret, cipherText);
+                $("#secret_note").text(decrypted);
+                $("#secret_note").removeClass("hidden");
+                $("button#fetch-and-decrypt-button").addClass("hidden");
+            },
+            error: function (err) {
+                window.alert(err.responseText);
+                $("button#fetch-and-decrypt-button").removeClass("disabled");
+            }
+        });
+    });
 });
 
 // Soluiton from https://stackoverflow.com/questions/985272/
@@ -86,4 +101,4 @@ function SelectText(element) {
         selection.removeAllRanges();
         selection.addRange(range);
     }
-}
+}

server.go

@@ -154,6 +154,7 @@ func (s *Server) Init() {
 	s.router.HandleFunc("/healthz", HealthStatusHandler).Methods("GET")
 	s.router.PathPrefix("/public/").HandlerFunc(PublicFileHandler).Methods("GET")
 	s.router.Handle("/note", CreateNoteHandler(s)).Methods("POST")
+	s.router.Handle("/read/{id}", ReadRawNoteHandler(s)).Methods("GET")
 	s.router.Handle("/{id}", ReadNoteHandler(s)).Methods("GET")
 
 	// Pre-compile templates

templates/note.html

@@ -5,12 +5,12 @@
     <label for="secret_note text-danger">
         This note will be permanently deleted after reading <span class="glyphicon glyphicon-fire text-danger"></span>:
     </label>
-    <pre id="secret_note" class="hidden">{{.}}</pre>
+    <pre id="secret_note" class="hidden"></pre>
 </div>
 <div class="form-group text-center">
-    <a href="." class="btn btn-lg btn-danger">
+    <button class="btn btn-lg btn-danger" id="fetch-and-decrypt-button">
         <span class="glyphicon glyphicon-fire small"></span>
         Read and destroy
-    </a>
+    </button>
 </div>
 {{ end }}