Stop the Dreaded HTTP 405 Errors on IE 9

May 13, 2011

The Zendesk application uses the TinyMCE editor with the ts_advimage plugin for image uploading. The combination has served us well for quite some time. Recently, though we’ve been getting lots of complaints from users who are getting HTTP 405 errors on IE9.

After some digging, I found that the problem was how the ts_advimage plugin was dynamically creating an iframe. The DOM standard says that the proper way to do this is like so:

var element = document.createElement('iframe');
element.setAttribute('name', theNameOfTheIFrame);

Older versions of IE don’t allow setting the name attribute like this. Thus, the advimage plugin checks for IE and works around it:

function ts_ce(tag,name){
  if (name && window.ActiveXObject){
    element = document.createElement('<'+tag+' name="'+name+'">');
  }else{
    element = document.createElement(tag);
    element.setAttribute('name',name);
  }
  return element;
}

Unfortunately, IE 9 (which passes the window.ActiveXObject check) obeys the DOM standard and throws an INVALID_CHARACTER_ERR exception. The browser then stops processing Javascript and submits the form normally, causing the 405 error when it tries to POST an image to a static HTML page.

Checking navigator.userAgent won’t work in the cases where IE 9 is running in IE-8 or -7 rendering mode. The solution I found is to change the if/else into a try/catch:

function ts_ce(tag,name){
  var element;
  try {
    element = document.createElement('<'+tag+' name="'+name+'">');
  } catch(e) {
    element = document.createElement(tag);
    element.setAttribute('name',name);
  }
  return element;
}

I’ve filed a bug with the ts_advimage project. In the meantime, you can make this patch to functions.js directly.