implement content-security-policy, static assets cache bust, and fix

stripe back button ratchet issue

because the only way to use stripe checkout is to run their proprietary
JS, and we arent using a SPA, naturally what happens is, when you land
on the stripe payment page if you hit the back button it goes back to
the same page where you got re-directed to stripe. this commit fixes
that.

capsulflask/static/create-capsul.js

@@ -0,0 +1,9 @@
+
+window.addEventListener('DOMContentLoaded', function(event) {
+  var submitButton = document.getElementById('submit-button');
+  var submitButtonClicked = document.getElementById('submit-button-clicked');
+  document.getElementById('submit-button').onclick = function() {
+    submitButton.className = "display-none";
+    submitButtonClicked.className = "waiting-pulse";
+  }
+});

capsulflask/static/pay-with-stripe.js

@@ -0,0 +1,39 @@
+
+window.addEventListener('DOMContentLoaded', function(event) {
+
+  var httpRequest = new XMLHttpRequest();
+  httpRequest.onloadend = () => {
+    if (httpRequest.status < 300) {
+      try {
+        responseObject = JSON.parse(httpRequest.responseText);
+
+        if(!responseObject.hasRedirectedAlready) {
+          Stripe(document.getElementById("stripe_public_key").value)
+          .redirectToCheckout({
+            sessionId: document.getElementById("stripe_checkout_session_id").value,
+          })
+          .then(function(result) {
+            if (result.error) {
+              alert("Stripe.redirectToCheckout() failed with: " + result.error.message)
+            }
+          });
+        } else {
+          location.href = '/payment/stripe';
+        }
+
+      } catch (err) {
+        alert("could not redirect to stripe because capsul did not return valid json");
+      }
+    } else {
+      alert("could not redirect to stripe because capsul returned HTTP" + httpRequest.status + ", expected HTTP 200");
+    }
+  };
+
+  httpRequest.ontimeout = () => {
+    alert("could not redirect to stripe because capsul timed out");
+  };
+
+  httpRequest.open("GET", "/payment/stripe/"+document.getElementById("stripe_checkout_session_id").value+"/json?q="+String(Math.random()).substring(2, 8));
+  httpRequest.timeout = 10000;
+  httpRequest.send();
+});

capsulflask/static/style.css

@@ -150,11 +150,7 @@ select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  /* 
-    re-generate the following line from the source image with: 
-    echo "background-image: url(data:image/png;base64,$(cat capsulflask/static/dropdown-handle.png | base64 -w 0));" 
-  */
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA9hAAAPYQGoP6dpAAACfElEQVRYw+2WSWgVQRCGp3tmHmLEuKEEL3owguJBjBcD8eJJiCABT4IrOQiKC6jnoJ6CYBDiQkTxiQiC4nKIntR4E70JUQQ9KahIUAg6m1/FntBvXpYZE6PCFPxUTc90/dW19HuOU0op/4K8GnzcOMN8s8BCsbVZO8hCO1AzQN6EugJa7QCWguvgMB/4f5B8DeqO73vb0JEdwBetVYPnud3Yl0yU003egep3XbclCEInG8C3OE6cMIwc3/e383yXDWuniViDI5J2rXVTFEXpq9gO4Gu6GgSB43neOsyHbNwFpkK+AHWeU3dD3hDHsf06sQO4DZ6lUYVh6CilpEvPgTNpxxYgVmA15i3KuldObZGL8QQ8Hw2geWXbW9RWMECkv8JLEgmiQvQHeLyGw+YCMWwC98hkm5Q1Fdcd8d0POuD8LA8qE/kic+otYHQafM9zgjB8jXkIPGBzMN58o/aAExxkXiblP8ANsJ/9Q+mitr/gxSeUNOHVNBMjfUFJOM0KzJviACJvDPI5QgzOZsnJpKiLYLdNXpcBy1kF1WVOXKnZgDPKU8U8Ct6b5WWgh3q32yk38h2cAichr3upJmmmYyaQmiC4SJiW8AVmJ5Bs9DG+q2SCMjIMjkPcMx6HytHRUtPTYK69TnM6dPcHKSPNtTiK6kZsyNS7OpF/lXOsZEL6qO18u7Zpn2TXeJZe2gn5/cl8qwKzvRF12dR7InkDdkD+NI9fnTcAHD4yd8Wg9EBWzNpL+SYveaEMWJlYjqoyDBuSpGYyBmSEIX9XxJ/6zTt+CeoC2GwaTmrdCfnHor7UFH5oZqN6zd2+D/Lhv/FXbj1oKf/UllLKfy0/ATtM/c/kKrmhAAAAAElFTkSuQmCC); 
+  background-image: url(/static/dropdown-handle.png); 
   background-repeat: no-repeat;
   background-position: bottom 0.65em right 0.8em;
   background-size: 0.5em;