Removed Vanilla Form Submission 69/65469/1
authorParker Berberian <pberberian@iol.unh.edu>
Wed, 28 Nov 2018 18:38:45 +0000 (13:38 -0500)
committerParker Berberian <pberberian@iol.unh.edu>
Wed, 28 Nov 2018 18:38:45 +0000 (13:38 -0500)
On google chrome, using vanilla html forms, eg:
document.getElementById("Form_id").submit();
does not properly set the CSRF header from the cookies.
This results in 403 unauthorized errors in chrome when doing certain things.

This is possibly an issue to do with how chrome handles iframes differently from firefox.

To fix, we replaced basic forms with serialized XMLHttpRequests,
which are more common in this codebase anyway.

Change-Id: I93e92cd326c8bba47408b66a95d9d5d806c154f6
Signed-off-by: Parker Berberian <pberberian@iol.unh.edu>
dashboard/src/templates/dashboard/landing.html
dashboard/src/templates/resource/steps/meta_info.html
dashboard/src/templates/resource/steps/pod_definition.html
dashboard/src/templates/workflow/confirm.html

index 3e0aacd..b1eec86 100644 (file)
         grid-template-columns: 33% 34% 33%;
     }
 </style>
-<script type="text/javascript">
-    function cwf(wf_type){
-        document.getElementById('id_workflow').selectedIndex = wf_type;
-        document.getElementById('wf_selection_form').submit();
-    }
-</script>
 <div class='wf_create_div'>
 <button class="wf_create btn" onclick="cwf(0)">Create a Booking</button>
 <button class="wf_create btn" onclick="cwf(1)">Create a Pod</button>
index 389ff6d..b458842 100644 (file)
 {% endblock content %}
 
 {% block onleave %}
-document.getElementById("resource_meta_form").submit();
+var ajaxForm = $("#resource_meta_form");
+var formData = ajaxForm.serialize();
+req = new XMLHttpRequest();
+req.open("POST", "/wf/workflow/", false);
+req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+req.onerror = function() { alert("problem submitting form"); }
+req.send(formData);
 {% endblock %}
index ab9dfb3..b2b4998 100644 (file)
@@ -596,7 +596,6 @@ function submitForm() {
     var input_elem = document.getElementById("hidden_xml_input");
     var s = encodeGraph(currentGraph);
     input_elem.value = s;
-    //form.submit();
     req = new XMLHttpRequest();
     req.open("POST", "/wf/workflow/", false);
     req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
index 555fa56..4f2616e 100644 (file)
         req.send(formData);
     }
 
+    function submitForm()
+    {
+        var form = $("#confirmation_form");
+        var formData = form.serialize();
+        var req = new XMLHttpRequest();
+        req.open("POST", "/wf/workflow/", false);
+        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+        req.onerror = function() { alert("problem submitting confirmation"); }
+        req.onreadystatechange = function() { if(req.readyState === 4 ) { delete_manager(); } }
+        req.send(formData);
+    }
+
+
     function formconfirm()
     {
         select.value = "True";
-        document.getElementById("confirmation_form").submit();
+        submitForm();
     }
     function formcancel()
     {
         select.value = "False";
-        document.getElementById("confirmation_form").submit();
+        submitForm();
     }
 
     var confirmed = {{bypassed|default:"false"}};
 
 function fixVlans() {
     document.getElementById("vlan_input").value = "True";
-    document.getElementById("vlan_form").submit();
+    var form = $("#vlan_form");
+    var formData = form.serialize();
+    var req = new XMLHttpRequest();
+    req.open("POST", "/wf/workflow/", false);
+    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+    req.onerror = function() { alert("problem submitting form"); }
+    req.onreadystatechange = function() { //replaces current page with response
+        if(req.readyState === 4 ) {
+            document.open();
+            document.write(req.responseText);
+            document.close();
+        }
+    }
+    req.send(formData);
 }
 var problem = {{vlan_warning|default:'false'}};
 if(problem){
@@ -121,5 +147,4 @@ if(problem){
 {% endblock element_messages %}
 {% endblock content %}
 {% block onleave %}
-//document.getElementById("confirmation_form").submit();
 {% endblock %}