2

Are we supposed to be able to change an HTML INPUT tag's TYPE attribute?

For instance, we're doing this:

Original html:

<input type="text" />

And via jQuery, we change it to this:

<input type="number" />

This seems to work fine in iOS's Safari. Didn't occur to me it would be an issue.

But now we're seeing some issues on some Android devices and in doing some research, I'm finding mentions that some browsers do not let you change the type attribute at all for security reasons.

The questions: 1) is this true? 2) If so, what, exactly, are the reasons for this? I can't figure out what kind of security issues this would cause if they allowed it.

UPDATE:

So far it seems that yes, it's true, but not due to any standard practice nor spec...just that some browsers don't like it. Namely IE and, I guess, some versions of Android browsers.

nnnnnn
  • 147,572
  • 30
  • 200
  • 241
DA.
  • 39,848
  • 49
  • 150
  • 213
  • I just had a discussion about this here: http://stackoverflow.com/questions/9419780/javascript-show-hide-password#comment11907894_9419780 I think it's bad that browsers let you do it. The security issue comes from if someone has a saved password, anyone could load that password in and quickly get the password out using the console javascript. Bad times. – TimCodes.NET Feb 23 '12 at 20:19
  • 1
    "Is this true?"... Yes. Internet Explorer does not allow you to change the `type` property at all. As for reasons... I'm not really sure! – James Allardice Feb 23 '12 at 20:21
  • I guess that's a theory...so perhaps a holdover pre HTML5? There's so many useful type attributes now it seems like it'd make more sense to block access to the type="password" but leave everything else as-is. I'm mainly trying to figure out if this is a universal spec, or just something arbitrary some browsers restrict. – DA. Feb 23 '12 at 20:21
  • you should use jQuery's `.replaceWith()` for that http://api.jquery.com/replaceWith/ – Felipe Sabino Feb 23 '12 at 20:46
  • @Chimoo, There is nothing secure about password fields. Who cares if someone changes a password field to a text field. You realize we can get the value of that field 100 different ways, right? Worst case scenario, change the action of the form to point to your man-in-the-middle script. This isn't a security issue. – Brad Feb 23 '12 at 20:50
  • I don't understand the argument that, because there are other ways of breaking it, this is not a security issue? It is a security issue, there just happens to be more as well. – TimCodes.NET Feb 23 '12 at 20:53
  • @Chimoo even so, that seems like an argument specifically for type="password". There are so many other type attribute values that the browser blocking it outright seems completely arbitrary and heavy handed. – DA. Feb 23 '12 at 20:56
  • @DA. Yes, I agree, they should target just password types, but it probably is, as Brad mentioned in his answer, to do with the complexity of changing that type. IE can't display pages right the first time, so I'm glad it doesn't let developers change the types! – TimCodes.NET Feb 23 '12 at 20:58
  • To clarify, the problem is also with (some?) Android browsers...which is my bigger concern. And what I'm most bummed about. ;) – DA. Feb 23 '12 at 21:01

2 Answers2

4

What security reasons? It's all client-side. You should never trust anything client-side anyway.

Clients can change whatever they want, both in the browser and along the path. There is absolutely no security problem with this.

I suspect some browsers won't let you change the type attribute as the browser would have to create a whole new type of object in memory, or some other oddity like that. It has nothing to do with security.

Brad
  • 159,648
  • 54
  • 349
  • 530
  • I'm not asking in terms of user data, but why the browser, itself, would block this. I completely understand never trusting client side data...which is why I find it odd a browser would decide the 'type' attribute was some major issue. – DA. Feb 23 '12 at 20:18
  • Sounds like we can only speculate. Which is fine. At least I know this isn't a standard spec I'm breaking and that it's just the same-old annoying browser issues at work here. – DA. Feb 23 '12 at 20:51
  • Oh, and let me rephrase, I completely agree with you...I can't see any security issue argument for the browser doing this. But in googling the problem, that seems to be a popular theory "you can't change the type attribute because it's a security issue" which is what perplexed me to begin with. – DA. Feb 23 '12 at 20:53
1

Input types can only be changed if the element is not attached to the document.

So, to change an input's type, remove it from the document, then re-insert it after:

var elem = document.getElementById('someinput'),
    sibling = elem.nextSibling,
    par = elem.parentNode;
par.removeChild(elem);
elem.type = "number"; // new type here
par.insertBefore(elem,sibling);

It's a pain, but as Brad said it's probably to do with having to create a whole new form element.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • Crazy. Plus, that seems like that would circumvent whatever security issue the browser thinks it's trying to protect anyways. ;) – DA. Feb 23 '12 at 20:49
  • Um... Weird. I just for the heck of it found the first input on this page (the search box) and changed its type with `document.querySelector('input').type = "checkbox"` and.. it worked? – Niet the Dark Absol Feb 23 '12 at 20:56
  • yea changing the type attribute works fine in a lot of browsers. It seems that some Android browsers don't let you, though, which is where I started finding mentions of this elsewhere...usually referring to IE. – DA. Feb 23 '12 at 20:58
  • That's the thing, I'm in IE9. – Niet the Dark Absol Feb 23 '12 at 20:59
  • Yea, I'm guessing (theory) that this is a holdover from way back in the day and, rightfully so, IE finally has fixed it. No idea why some Android browser are causing problems, but I'm slowly discovering that, in general, android browsers are really buggy to begin with, so I guess I'm not surprised. – DA. Feb 23 '12 at 21:00