Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

192 lines (187 sloc) 9.451 kb
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Language" content="en-us">
<meta name="description" content="DOMLint is a minimal test suite aimed at discovering potential DOM conflicts">
<meta name="keywords" content="DOMLint, unsafe html names, conflicting form names, dom conflicts">
<meta name="author" content="Juriy &quot;kangax&quot; Zaytsev">
<title>DOMLint - Test suite against HTML/DOM conflicts</title>
<link rel="stylesheet" href="domlint.css" type="text/css" media="screen">
</head>
<body>
<h1>DOMLint - Test suite against HTML/DOM conflicts</h1>
<p class="powered-by">
Powered by:
<a href="http://developer.yahoo.com/yql/console/" title="Yahoo! Query Language">Yahoo! Query Language</a>
<br>
Created by:
<a href="http://thinkweb2.com/projects/prototype/" title="Visit blog">Juriy "kangax" Zaytsev</a>
</p>
<div class="column left">
<h2 id="javascript-notice">DOMLint requires Javascript enabled</h2>
<form action="/" style="display:none">
<div>
<h2>
<label for="url" title="url of a web document to test against">URL of a document to test against</label>
</h2>
<p>
<input type="text" name="url" id="url" value="http://google.com/" class="text">
<input type="submit" value="Check" id="trigger">
</p>
</div>
<div id="log"></div>
</form>
</div>
<div class="column right">
<h2>
Tests description:
</h2>
<ol>
<li>
Names of form controls are populated as properties of "parent" form element and might conflict
with "actual" properties of a form element (either own or inherited via "interface chain")
<br>
Interfaces tested against are
<code><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357"
title="Specification for HTMLFormElement">HTMLFormElement</a></code>,
<code><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037"
title="Specification for HTMLElement">HTMLElement</a></code>,
<code><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614"
title="Specification for Element">Element</a></code>,
<code><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247"
title="Specification for Node">Node</a></code>,
<code><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget"
title="Specification for EventTarget">EventTarget</a></code>,
<code><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle"
title="Specification for ElementCSSInlineStyle">ElementCSSInlineStyle</a></code>
as well as
<code><a href="http://bclary.com/2004/11/07/#a-15.2.3.1" title="Unofficial specification for Object.prototype">Object.prototype</a></code>
<br>
<a href="#" title="See example" style="display:none" class="example">See example &raquo;</a>
<pre>
&lt;form&gt;
&lt;input type="text" name="submit" value="Submit!"&gt;
&lt;input type="text" name="style"&gt;
&lt;/form&gt;
...
&lt;script type="text/javascript"&gt;
document.forms[0].submit; // "[object HTMLInputElement]"
document.forms[0].style; // "[object HTMLInputElement]"
&lt;/script&gt;</pre>
</li>
<li>
Form names are populated as properties of `document` and might conflict with document's "actual" properties (either own or inherited via "interface chain")
<br>
Interfaces tested against are
<code><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268"
title="Specification for HTMLDocument">HTMLDocument</a></code>,
<code><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#i-Document"
title="Specification for Document">Document</a></code>,
<code><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247"
title="Specification for Node">Node</a></code>,
<code><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget"
title="Specification for EventTarget">EventTarget</a></code>
as well as
<code><a href="http://bclary.com/2004/11/07/#a-15.2.3.1" title="Unofficial specification for Object.prototype">Object.prototype</a></code>
<br>
<a href="#" title="See example" style="display:none" class="example">See example &raquo;</a>
<pre>
&lt;form name="getElementById"&gt;
...
&lt;/form&gt;
&lt;form name="body"&gt;
...
&lt;/form&gt;
...
&lt;script type="text/javascript"&gt;
document.getElementById; // "[object HTMLFormElement]"
document.body; // "[object HTMLFormElement]"
&lt;/script&gt;</pre>
</li>
<li>
In <strong>MSHTML DOM</strong>, values of "name" or "id" attributes of elements that are not form controls become accessible via global identifiers. These values might conflict with properties of a global object.
<br>
Interfaces tested against are
<code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView"
title="">AbstractView</a></code>,
<code><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget"
title="Specification for EventTarget">EventTarget</a></code>
<br>
<a href="#" title="See example" style="display:none" class="example">See example &raquo;</a>
<pre>
&lt;div id="addEventListener"&gt;
...
&lt;/div&gt;
...
&lt;script type="text/javascript"&gt;
window.addEventListener; // "[object HTMLDivElement]"
&lt;/script&gt;</pre>
</li>
<li>
In <strong>MSHTML DOM</strong>, id values of elements in NodeList are populated as properties of that NodeList.
These values might conflict with actual properties of NodeList - <code>item</code>, <code>length</code>, etc.
Opera is partially affected in the same way - while <code>length</code> is never shadowed,
such <code>NodeList</code> methods as <code>item</code> and <code>namedItem</code> are.
<br>
Tested against
<code><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-536297177" title="Specification for NodeList">NodeList</a></code>
and
<code><a href="http://bclary.com/2004/11/07/#a-15.2.3.1" title="Unofficial specification for Object.prototype">Object.prototype</a></code>
<br>
<a href="#" title="See example" style="display:none" class="example">See example &raquo;</a>
<pre>
&lt;div id="item"&gt;
...
&lt;/div&gt;
...
&lt;span id="length"&gt;&lt;/span&gt;
...
&lt;script type="text/javascript"&gt;
document.getElementsByTagName('div').item; // [object HTMLDivElement]
document.getElementsByTagName('span').length; // [object HTMLSpanElement]
&lt;/script&gt;</pre>
</li>
<li>
Intrinsic event handlers have their scope augmented with element object itself, a parent `form` (when applicable) and `document` elements. Due to such augmentation, there is a chance of conflicts between named form controls and global properties - e.g. window, document, etc, (that might be used in those event handlers)
<br>
Tested against DOM L0 global properties
<br>
<a href="#" title="See example" style="display:none" class="example">See example &raquo;</a>
<pre>
&lt;form name="window" onclick="console.log(window, setInterval)"&gt;
&lt;input name="setInterval"&gt;
&lt;/form&gt;
// when clicked, logs [object HTMLFormElement], [object HTMLInputElement]
</pre>
</li>
<li>
In <strong>MSHTML DOM</strong> element attributes and properties directly map to each other.
<br>
Custom attributes can therefore conflict with properties Prototype.js extends elements with.
Moreover, some of the properties when present on document element might conflict with those added by Prototype.js.
They can also break Prototype.js <strong>entirely</strong> (as per: 1.6.0.3)
<br>
<a href="#" title="See example" style="display:none" class="example">See example &raquo;</a>
<pre>
&lt;div id="test" show="foo"&gt;
...
&lt;/div&gt;
...
&lt;form name="evaluate" action="/"&gt;&lt;/form&gt;
...
&lt;script type="text/javascript"&gt;
$('test').show; // "[object HTMLDivElement]"
Prototype.BrowserFeatures.XPath; // true (due to truthy `document.evaluate`)
&lt;/script&gt;</pre>
</li>
</ol>
<p style="font-size:80%">
Thanks to Garrett Smith for writing an <a href="http://jibbering.com/faq/names/" title="Unsafe Names for HTML Form Controls">Unsafe Names for HTML Form Controls</a> article which inspired me to create this tool.
</p>
</div>
<script src="domlint.js" type="text/javascript"></script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.