history.pushState and IE SCRIPT5022: SecurityError

I stumbled upon this error in Internet Explorer when I wrote my Redirect Checker and discovered that JavaScript Errors that imply an attempted security violation, that on top of that are not wrapped in a try-catch block, will totally disable your whole script execution.

I had code that looked something like this:

var shareLink = 'http://jonathanmh.com/redirect-test-tool?q=request_data'
history.pushState(null, null, shareLink);

On HTTPS this will absolutely not work, because the protocol is different.

try {
  var baseUrl = location.protocol + '//jonathanmh.com/redirect-test-tool/'
  var shareLink = baseUrl + '?q=request_data'
  history.pushState(null, null, shareLink);
} catch(e){
  console.log(e);
}

XMLHTTP Requests will be treated the same from HTTPS to HTTP and Internet Explorer will say something like: IE SCRIPT5022: SecurityError.

In hindsight, this was all very silly of me and I could have easily caught that error by not wanting to get this whole page done before I go to sleep, but properly using location.protocol instead of typing out http: or https:.

If you want to know more about the HTML5 history API, check out the article on MDN: History API.

Tagged with: #historyAPI #HTML5 #JavaScript

Thank you for reading! If you have any comments, additions or questions, please tweet or toot them at me!