Force Secure Form Submission

Avatar of Chris Coyier
Chris Coyier on

I was working with a client eCommerce site the other day, and a really concerning problem popped up. On the very last step of checkout, when you press the very final button to submit the order, the browser would pop up a security warning telling the user that the page was secure, but the data being sent was not.

Not exactly something someone wants to see when buying stuff online.

A little digging revealed the browser wasn’t being paranoid, it was doing it’s job. The page it self was legitimately secured, but the action url of the form was submitting to a non-secure url.

I am fairly familiar with this particular cart, but after way too much digging I was unable to find code in which to change this url. A submitted a support request, but they were very unhelpful and blamed my custom modifications to the cart (no way). So… I needed a better way to force that darn url to be secure.

Force it with JavaScript

It’s not the perfect solution of course, this really should be done at the core cart level, but sometimes you just need a damn solution so you can get on with your life. Here is how I did it with jQuery JavaScript:

$(function(){

   var $form = $("form#specificForm");

   var newAction = $form.attr("action");
	
   newAction = newAction.replace(/http/,"https");
		
   $form.attr("action", newAction);
	
});

Plain English:

  • Cache the selector since we’ll be using it more than once
  • Set a variable equal to the action url
  • Replace the “http” part of the string with “https”
  • Change the attribute on the form

Does the trick…