another IE7 DOM screwup?

  • Thread starter The Natural Philosopher
  • Start date
T

The Natural Philosopher

is this well known?

<html>
<body>
<form>
<input type="hidden" name="cnuts" value="no">
<script type="text/javascript" language="JavaScript">
function cnuts()
{
document.getElementsByName('cnuts')[0].value='yes';
document.forms[0].submit();
}
</script>

<div onclick="cnuts()"> click here for error </div>

</form>
</body>
</html>

I knew IE7 couldn't tell the difference between ID= and NAME= tags, but
FUNCTIONS as well?
 
G

Gregor Kofler

The Natural Philosopher meinte:
is this well known?

<html>
<body>
<form>
<input type="hidden" name="cnuts" value="no">
<script type="text/javascript" language="JavaScript">
function cnuts()
{
document.getElementsByName('cnuts')[0].value='yes';
document.forms[0].submit();
}
</script>

<div onclick="cnuts()"> click here for error </div>

</form>
</body>
</html>

I knew IE7 couldn't tell the difference between ID= and NAME= tags, but
FUNCTIONS as well?

Function? cnuts is just a variable in the global namespace. And IE
pollutes this namespace with every ID or NAME attribute. See here:

<http://webbugtrack.blogspot.com/2007/09/bug-162-global-namespace-pollution-in.html>

Gregor
 
T

The Natural Philosopher

Gregor said:
The Natural Philosopher meinte:
is this well known?

<html>
<body>
<form>
<input type="hidden" name="cnuts" value="no">
<script type="text/javascript" language="JavaScript">
function cnuts()
{
document.getElementsByName('cnuts')[0].value='yes';
document.forms[0].submit();
}
</script>

<div onclick="cnuts()"> click here for error </div>

</form>
</body>
</html>

I knew IE7 couldn't tell the difference between ID= and NAME= tags, but
FUNCTIONS as well?

Function? cnuts is just a variable in the global namespace. And IE
pollutes this namespace with every ID or NAME attribute. See here:

<http://webbugtrack.blogspot.com/2007/09/bug-162-global-namespace-pollution-in.html>

Gregor
Silly me. I thought javascript was object oriented, and thats why you
used document.getElementsByName rather than simplye referring to Cnuts
directly.
 
H

Henry

The Natural Philosopher meinte:
<html>
<body>
<form>
<input type="hidden" name="cnuts" value="no">
<script type="text/javascript" language="JavaScript">
function cnuts()
{
document.getElementsByName('cnuts')[0].value='yes';
document.forms[0].submit();
}
</script>
<div onclick="cnuts()"> click here for error </div>

I knew IE7 couldn't tell the difference between ID=
and NAME= tags, but FUNCTIONS as well?

Function? cnuts is just a variable in the global namespace.
And IE pollutes this namespace with every ID or NAME
attribute.
<snip>
IE's polluting of the global namespace is not the issue with this
code. For a start, any JS global variable that is _declared_ is not
overridden by IE even if a DOM node has a corresponding NAME or ID. A
function declaration counts as declaring so a reference to the INPUT
element named 'cnuts' does not replace the global function.

The issue is the augmentation of the scope chains of functions that
are created from the values of intrinsic event attributes. IE has put
the FORM element on the scope chain, and because the 'shortcut' form
element access properties gives the FORM element a property named
'cnuts' when the Identifier 'cnuts' is referenced from inside that
function it resolves as the value of the 'cnuts' property of the FORM
element; a reference to the INPUT element.

This can be seen by changing the onclick attribute above to:-

<div onclick="alert(window.cnuts+'\n\n'+cnuts);cnuts()"> ...

- which produces the output:-

| function cnuts()
| {
| document.getElementsByName('cnuts')[0].value='yes';
| document.forms[0].submit();
| }
|
| [object]

- showing that the function is still in place as a property of the
global object, even if the unqualified identifier is resolved as the
INPUT element.

It follows form this that one way of side-stepping the scope chain
augmentation (which is very variable both between browsers and over
time) is to qualify the global references with, say, - window -(and
hope that no objects on the scope chain have 'window' properties that
do not refer to the window).
 
H

Henry

Henry wrote:
[...]
It follows form this that one way of side-stepping the
scope chain augmentation (which is very variable both
between browsers and over time) is to qualify the global
references with, say, - window -(and hope that no objects
on the scope chain have 'window' properties that do not
refer to the window).

Or, perhaps, not use `window` (or any other global)
identifier altogether but rather obtain a reference
to it (i.e. global object) by other well known means.

The " other well known means" are to create your own reference to the
global object with code like:-

var global = this; //in a global execution context, prior
// to the use of any reference to - global -.

- which has exactly the same problems as using - window - in terms of
objects on the (augmented) scope chain having like-named properties,
but has the advantage that there is no need to assume that - window -
refers to the global object (though that is a non-issue in the opinion
of many).

Or through a call to an anonymous function expression that returns -
this -, e.g.:-

onclick="(function(){return this;})().cnuts();"

- which is fine by ES 3 but may be stamped out by ES 3.1 (possibly
only in 'strict' mode). The pending ES 3.1 changes make recommending
the latter a questionable action at this moment in time.
 
H

Henry

Henry wrote:



I was thinking about the latter one, of course (i.e. eliminate
identifiers altogether, including `global`). While I somewhat
understand committee security concerns,

I didn't think it was all security concerns. There is an ongoing issue
where new javascript programmers often have expectations of how - this
- will be handled that do not correspond at all with what javascript
does. This makes them tend to want javascript to behave differently,
and I had got the impression that some of the changes were intended to
pander to those demands.
it seems unfortunate that there's no way to get a reference
to a global object in ES3.1 strict (or is there? Last
time I asked Mark M., he suggested to use
`var global = this;` declared globally).

When it was discusses it was suggested that - var global = this; - was
what people were using, and the use of alternative was dismissed as
something that nobody ever did in reality. Thus removing the
possibility did not represent any loss. The ECMAScript committee are
generally a bit short of actual browser scripting experience.
Perhaps another way to get global is to utilize document's
`defaultView` and node's `ownerDocument` in conforming
browsers:

No, that would be a very bad idea because the W3C DOM Views spec does
_not_ define the - defaultView - property as being a reference to the
ECMAScript global object (or the window object). The - defaultView -
property of documents is defined as being a reference to an object
that implements the - AbstractView - interface. While browser window/
global objects do (in effect) implement that interface the spec says
nothing (even in the ECMAScript bindings) to require that the -
defalutView - property does refer to the global/window object, and at
least two browsers (IceBrowser 5 and some early Safari version) had -
document.defaultView - refer to an object that did implement the
interface, but were not the window/global object. If two are already
known there may be others, now or in the future.

(It is a mistake, if often made, to assume that the - getComputedStyle
- method will be available as a property of the global/window object.
The only DOM standard sanctioned access to - getComputedStyle - is via
the - defaultView - property of the document).
...
onclick="this.ownerDocument.defaultView"

That may or may not end up being a reference to the global object.
There is no technical justification for expecting it to be such a
reference.
...

This still seems like a questionable option

Yes, I have just questioned it.
- it's not clear whether `this` is bound to an element,

No examples of alternative behaviour have ever been found in relation
to intrinsic event attributes/properties.
nor that an element has `ownerDocument`

Pre-DOM standard browsers certainly had no such properties.
nor that the document has `defaultView` property (iirc,
IE doesn't)

IE doesn't, and the DOM Views module is theoretically optional in a
DOM standard UA.
What would you suggest?

In context, using - window -.
 
T

Thomas 'PointedEars' Lahn

Henry said:
[...]
The - defaultView - property of documents is defined as being a reference
to an object that implements the - AbstractView - interface. While browser
window/global objects do (in effect) implement that interface the spec
says nothing (even in the ECMAScript bindings) to require that the -
defalutView - property does refer to the global/window object, and at
least two browsers (IceBrowser 5 and some early Safari version) had -
document.defaultView - refer to an object that did implement the
interface, but were not the window/global object. If two are already
known there may be others, now or in the future.

(It is a mistake, if often made, to assume that the - getComputedStyle
- method will be available as a property of the global/window object.

True, a feature test is required before.
The only DOM standard sanctioned access to - getComputedStyle - is via
the - defaultView - property of the document).

Why can't the ECMAScript Global Object have a host-defined
`getComputedStyle' property and thus implement the ViewCSS
interface of W3C DOM Level 2 CSS?


PointedEars
 
G

GTalbot

is this well known?

<html>
<body>
<form>
<input type="hidden" name="cnuts" value="no">
<script type="text/javascript" language="JavaScript">
function cnuts()
        {
        document.getElementsByName('cnuts')[0].value='yes';
        document.forms[0].submit();
        }
</script>

<div onclick="cnuts()"> click here for error </div>

</form>
</body>
</html>

I knew IE7 couldn't tell the difference between ID= and NAME= tags, but
FUNCTIONS as well?

Natural philosopher,

I agree with those who said that this isn't a global

Global namespace pollution with id-ed elements and name-ed elements
here.
{
Btw, this was also reported at connect IE beta feedback and was
unfortunately mishandled pretty bad:

Global Variable Object Polluted with Element IDs / Implement [[Put]]
on global object
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=354814

Bugs for Microsoft Internet Explorer 8:
Global Variable Object Polluted with Element IDs / Implement [[Put]]
on global object
http://code.google.com/p/msie/issues/detail?id=2
}

Natural P., try this code (disclaimer: not tested):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">

<html lang="en">

<head>

<meta name="generator" content=
"HTML Tidy for Windows (vers 7 December 2008), see http://tidy.sourceforge.net/">
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>cnuts!</title>

<script type="text/javascript">
function cnuts()
{
document.forms["FormName"].elements["cnuts"].value = "yes";
document.forms["FormName"].submit();
}
</script>

</head>

<body>

<form name="FormName" action="\">
<p><input type="hidden" name="cnuts" value="no"></p>
<div onclick="cnuts()"> click here for error </div>
</form>

</body>
</html>

Javascript Best Practices
Reference Forms and Form Elements Correctly
http://www.javascripttoolbox.com/bestpractices/#forms

Referencing Forms and Form Controls
http://www.jibbering.com/faq/faq_notes/form_access.html

Using Web Standards in your Web Pages: Using the W3C DOM
Accessing Elements with the W3C DOM:
https://developer.mozilla.org/en/Us...e_W3C_DOM#Accessing_Elements_with_the_W3C_DOM

regards, Gérard
 
T

The Natural Philosopher

GTalbot said:
is this well known?

<html>
<body>
<form>
<input type="hidden" name="cnuts" value="no">
<script type="text/javascript" language="JavaScript">
function cnuts()
{
document.getElementsByName('cnuts')[0].value='yes';
document.forms[0].submit();
}
</script>

<div onclick="cnuts()"> click here for error </div>

</form>
</body>
</html>

I knew IE7 couldn't tell the difference between ID= and NAME= tags, but
FUNCTIONS as well?

Natural philosopher,

I agree with those who said that this isn't a global

Well I never said it was!

Global namespace pollution with id-ed elements and name-ed elements
here.
{
Btw, this was also reported at connect IE beta feedback and was
unfortunately mishandled pretty bad:

Global Variable Object Polluted with Element IDs / Implement [[Put]]
on global object
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=354814

Bugs for Microsoft Internet Explorer 8:
Global Variable Object Polluted with Element IDs / Implement [[Put]]
on global object
http://code.google.com/p/msie/issues/detail?id=2
}

Natural P., try this code (disclaimer: not tested):

Thanks, but the solution was simple: make the function a different name!

I'll look at those best practice pages when I have more time!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">

<html lang="en">

<head>

<meta name="generator" content=
"HTML Tidy for Windows (vers 7 December 2008), see http://tidy.sourceforge.net/">
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>cnuts!</title>

<script type="text/javascript">
function cnuts()
{
document.forms["FormName"].elements["cnuts"].value = "yes";
document.forms["FormName"].submit();
}
</script>

</head>

<body>

<form name="FormName" action="\">
<p><input type="hidden" name="cnuts" value="no"></p>
<div onclick="cnuts()"> click here for error </div>
</form>

</body>
</html>

Javascript Best Practices
Reference Forms and Form Elements Correctly
http://www.javascripttoolbox.com/bestpractices/#forms

Referencing Forms and Form Controls
http://www.jibbering.com/faq/faq_notes/form_access.html

Using Web Standards in your Web Pages: Using the W3C DOM
Accessing Elements with the W3C DOM:
https://developer.mozilla.org/en/Us...e_W3C_DOM#Accessing_Elements_with_the_W3C_DOM

regards, Gérard
--
Internet Explorer 7 bugs: 173 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Internet Explorer 8 bugs: ~=115 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
 
H

Henry

kangax said:
Henry said:
Henry wrote:
[...]
When it was discusses it was suggested that - var global = this;
- was what people were using, and the use of alternative was
dismissed as something that nobody ever did in reality. Thus
removing the possibility did not represent any loss. The
ECMAScript committee are generally a bit short of actual browser
scripting experience.

Fair enough. I still think that as long as clients "helpfully"
provide access to certain elements (e.g. form controls or forms)
via property lookup of certain other elements (e.g. form or
document) it seems like a good idea to provide some way to
access (at least) global object.

(Until/unless there are alternative security models for scripts in
browsers) It is likely that there will always be ways of getting
references to the global object. Currently the committee are
discussing changing indirect - eval - use from potentially throwing an
exception (as in ES 3) to dong its code evaluation in the global
execution context. at which point:-

var evl = eval;
var global = evl('this');

- might, even if in a rather ugly way, provide the desired outcome.
Coupled with scope augmentation this looks quite nightmarish:

<form action="/" name="window" onclick="alert(window)"></form>

Considering that we might not be in control of name attribute
value,

Considering that is acceptable, but also remember that in the vast
majority of case/circumstances 'we' are in control of values of name
attributes. They are not things that come into existence on a random
basis, and even when machine generated they can be generated by known
and predictable rules.
what would be suggested to use in such case (besides getting
rid of whoever named a form in such way :))?

Issues with names/IDs (particularly the names of form controls) are
well known and long known. And these scope chain augmentation issues
are not that difficult to mitigate. For example, a naming convention
where names to be used in the DOM are always mixed case words with
initial capital letters would pretty much eliminate node name/object
property conflict issues (though only, when combined with a javascript
naming policy where such Identifiers would only be used for
constructor functions).

The places where the problem can be expected to be encountered are
where the deliberately technically ignorant/incompetent are employed
(that is, people who cannot or will not listen/learn) to write mark-up
(or mark-up generating server code), in which case the solution is get
a job somewhere else (as staying will become a nightmare very
quickly), or with legacy code that either nobody remaining understands
well enough to fix or that is third party and pre-complied.

In the case of the legacy code the problem is fixed (no new
problematic IDs or NAMEs will be introduced) and can be worked around
on a specific basis. (Unlike the case with the deliberately
incompetent developers, who may introduce new problems at any moment).
Granted, it's probably a problem for W3C to solve.

I don't see how they could. It has been the style of standardisation
(DOM and ECMAScript) to define a set of requirements to be met, but
most of the issues are consequences of what happens beyond/outside of
their specifications. It would be an unreasonable barrier to progress
to suggest that a UA should be 'this precise thing' and no more. Would
we have, for example, AJAX if UAs had been forbidden from ever
introducing XML HTTP request objects, but instead waiting until some
standards body decided such a thing would be a good idea? Look at
standards driven XHTML and the mess that has come out of that, where
many people think they are working with XHTML when they are really
just writing formally malformed HTML (a new flavour of tag soup) and
producing scripted documents that will just fall over in the event
that a browser ever attempt to interpret them as XHTML.
Even if ECMAScript was to provide a globally available `getGlobal`
function, nothing would stop current DOM implementations from
"shadowing" that identifier as well.

(Short of making it a property of the (soon to be ES 3.1 re-named)
Variable object)
I'm working on a simple html scanner to "catch" such occurrences
(as it could come in useful when working with legacy documents,
for example)

It could have precisely such a use, though in principle understanding
of the issues might make legacy documents that have such issues a
thing of the past. ;-)

Thanks. I wasn't aware of this.

Given some of the entries I have seen in books on the subject it
appears that you were a long way from being alone in that. But at
least you were open to finding out.
 
H

Henry

Thomas said:
Henry wrote:

Why can't the ECMAScript Global Object have a host-defined
`getComputedStyle' property and thus implement the ViewCSS
interface of W3C DOM Level 2 CSS?

It can, and may (maybe 'most' by now) do. It is just that there is no
technical justification for *expecting* them to, even in browsers that
do fully implement W3C DOM Level 2 Views.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,982
Messages
2,570,190
Members
46,740
Latest member
AdolphBig6

Latest Threads

Top