Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>Fiddle</strong>: <a href="http://jsfiddle.net/JFSKe/6/" rel="nofollow noreferrer">http://jsfiddle.net/JFSKe/6/</a></p> <p><strong><a href="https://developer.mozilla.org/En/DOM/DocumentFragment" rel="nofollow noreferrer"><code>DocumentFragment</code></a></strong> doesn't implement DOM methods. Using <code>document.createElement</code> in conjunction with <code>innerHTML</code> removes the <code>&lt;head&gt;</code> and <code>&lt;body&gt;</code> tags (even when the created element is a root element, <code>&lt;html&gt;</code>). Therefore, the solution should be sought elsewhere. I have created a <strong>cross-browser</strong> string-to-DOM function, which makes use of an invisible inline-frame.</p> <p>All external resources and scripts will be disabled. See <em>Explanation of the code</em> for more information.</p> <h3>Code</h3> <pre><code>/* @param String html The string with HTML which has be converted to a DOM object @param func callback (optional) Callback(HTMLDocument doc, function destroy) @returns undefined if callback exists, else: Object HTMLDocument doc DOM fetched from Parameter:html function destroy Removes HTMLDocument doc. */ function string2dom(html, callback){ /* Sanitise the string */ html = sanitiseHTML(html); /*Defined at the bottom of the answer*/ /* Create an IFrame */ var iframe = document.createElement("iframe"); iframe.style.display = "none"; document.body.appendChild(iframe); var doc = iframe.contentDocument || iframe.contentWindow.document; doc.open(); doc.write(html); doc.close(); function destroy(){ iframe.parentNode.removeChild(iframe); } if(callback) callback(doc, destroy); else return {"doc": doc, "destroy": destroy}; } /* @name sanitiseHTML @param String html A string representing HTML code @return String A new string, fully stripped of external resources. All "external" attributes (href, src) are prefixed by data- */ function sanitiseHTML(html){ /* Adds a &lt;!-\"'--&gt; before every matched tag, so that unterminated quotes aren't preventing the browser from splitting a tag. Test case: '&lt;input style="foo;b:url(0);&gt;&lt;input onclick="&lt;input type=button onclick="too() href=;&gt;"&gt;' */ var prefix = "&lt;!--\"'--&gt;"; /*Attributes should not be prefixed by these characters. This list is not complete, but will be sufficient for this function. (see http://www.w3.org/TR/REC-xml/#NT-NameChar) */ var att = "[^-a-z0-9:._]"; var tag = "&lt;[a-z]"; var any = "(?:[^&lt;&gt;\"']*(?:\"[^\"]*\"|'[^']*'))*?[^&lt;&gt;]*"; var etag = "(?:&gt;|(?=&lt;))"; /* @name ae @description Converts a given string in a sequence of the original input and the HTML entity @param String string String to convert */ var entityEnd = "(?:;|(?!\\d))"; var ents = {" ":"(?:\\s|&amp;nbsp;?|&amp;#0*32"+entityEnd+"|&amp;#x0*20"+entityEnd+")", "(":"(?:\\(|&amp;#0*40"+entityEnd+"|&amp;#x0*28"+entityEnd+")", ")":"(?:\\)|&amp;#0*41"+entityEnd+"|&amp;#x0*29"+entityEnd+")", ".":"(?:\\.|&amp;#0*46"+entityEnd+"|&amp;#x0*2e"+entityEnd+")"}; /*Placeholder to avoid tricky filter-circumventing methods*/ var charMap = {}; var s = ents[" "]+"*"; /* Short-hand space */ /* Important: Must be pre- and postfixed by &lt; and &gt;. RE matches a whole tag! */ function ae(string){ var all_chars_lowercase = string.toLowerCase(); if(ents[string]) return ents[string]; var all_chars_uppercase = string.toUpperCase(); var RE_res = ""; for(var i=0; i&lt;string.length; i++){ var char_lowercase = all_chars_lowercase.charAt(i); if(charMap[char_lowercase]){ RE_res += charMap[char_lowercase]; continue; } var char_uppercase = all_chars_uppercase.charAt(i); var RE_sub = [char_lowercase]; RE_sub.push("&amp;#0*" + char_lowercase.charCodeAt(0) + entityEnd); RE_sub.push("&amp;#x0*" + char_lowercase.charCodeAt(0).toString(16) + entityEnd); if(char_lowercase != char_uppercase){ RE_sub.push("&amp;#0*" + char_uppercase.charCodeAt(0) + entityEnd); RE_sub.push("&amp;#x0*" + char_uppercase.charCodeAt(0).toString(16) + entityEnd); } RE_sub = "(?:" + RE_sub.join("|") + ")"; RE_res += (charMap[char_lowercase] = RE_sub); } return(ents[string] = RE_res); } /* @name by @description second argument for the replace function. */ function by(match, group1, group2){ /* Adds a data-prefix before every external pointer */ return group1 + "data-" + group2 } /* @name cr @description Selects a HTML element and performs a search-and-replace on attributes @param String selector HTML substring to match @param String attribute RegExp-escaped; HTML element attribute to match @param String marker Optional RegExp-escaped; marks the prefix @param String delimiter Optional RegExp escaped; non-quote delimiters @param String end Optional RegExp-escaped; forces the match to end before an occurence of &lt;end&gt; when quotes are missing */ function cr(selector, attribute, marker, delimiter, end){ if(typeof selector == "string") selector = new RegExp(selector, "gi"); marker = typeof marker == "string" ? marker : "\\s*="; delimiter = typeof delimiter == "string" ? delimiter : ""; end = typeof end == "string" ? end : ""; var is_end = end &amp;&amp; "?"; var re1 = new RegExp("("+att+")("+attribute+marker+"(?:\\s*\"[^\""+delimiter+"]*\"|\\s*'[^'"+delimiter+"]*'|[^\\s"+delimiter+"]+"+is_end+")"+end+")", "gi"); html = html.replace(selector, function(match){ return prefix + match.replace(re1, by); }); } /* @name cri @description Selects an attribute of a HTML element, and performs a search-and-replace on certain values @param String selector HTML element to match @param String attribute RegExp-escaped; HTML element attribute to match @param String front RegExp-escaped; attribute value, prefix to match @param String flags Optional RegExp flags, default "gi" @param String delimiter Optional RegExp-escaped; non-quote delimiters @param String end Optional RegExp-escaped; forces the match to end before an occurence of &lt;end&gt; when quotes are missing */ function cri(selector, attribute, front, flags, delimiter, end){ if(typeof selector == "string") selector = new RegExp(selector, "gi"); flags = typeof flags == "string" ? flags : "gi"; var re1 = new RegExp("("+att+attribute+"\\s*=)((?:\\s*\"[^\"]*\"|\\s*'[^']*'|[^\\s&gt;]+))", "gi"); end = typeof end == "string" ? end + ")" : ")"; var at1 = new RegExp('(")('+front+'[^"]+")', flags); var at2 = new RegExp("(')("+front+"[^']+')", flags); var at3 = new RegExp("()("+front+'(?:"[^"]+"|\'[^\']+\'|(?:(?!'+delimiter+').)+)'+end, flags); var handleAttr = function(match, g1, g2){ if(g2.charAt(0) == '"') return g1+g2.replace(at1, by); if(g2.charAt(0) == "'") return g1+g2.replace(at2, by); return g1+g2.replace(at3, by); }; html = html.replace(selector, function(match){ return prefix + match.replace(re1, handleAttr); }); } /* &lt;meta http-equiv=refresh content=" ; url= " &gt; */ html = html.replace(new RegExp("&lt;meta"+any+att+"http-equiv\\s*=\\s*(?:\""+ae("refresh")+"\""+any+etag+"|'"+ae("refresh")+"'"+any+etag+"|"+ae("refresh")+"(?:"+ae(" ")+any+etag+"|"+etag+"))", "gi"), "&lt;!-- meta http-equiv=refresh stripped--&gt;"); /* Stripping all scripts */ html = html.replace(new RegExp("&lt;script"+any+"&gt;\\s*//\\s*&lt;\\[CDATA\\[[\\S\\s]*?]]&gt;\\s*&lt;/script[^&gt;]*&gt;", "gi"), "&lt;!--CDATA script--&gt;"); html = html.replace(/&lt;script[\S\s]+?&lt;\/script\s*&gt;/gi, "&lt;!--Non-CDATA script--&gt;"); cr(tag+any+att+"on[-a-z0-9:_.]+="+any+etag, "on[-a-z0-9:_.]+"); /* Event listeners */ cr(tag+any+att+"href\\s*="+any+etag, "href"); /* Linked elements */ cr(tag+any+att+"src\\s*="+any+etag, "src"); /* Embedded elements */ cr("&lt;object"+any+att+"data\\s*="+any+etag, "data"); /* &lt;object data= &gt; */ cr("&lt;applet"+any+att+"codebase\\s*="+any+etag, "codebase"); /* &lt;applet codebase= &gt; */ /* &lt;param name=movie value= &gt;*/ cr("&lt;param"+any+att+"name\\s*=\\s*(?:\""+ae("movie")+"\""+any+etag+"|'"+ae("movie")+"'"+any+etag+"|"+ae("movie")+"(?:"+ae(" ")+any+etag+"|"+etag+"))", "value"); /* &lt;style&gt; and &lt; style= &gt; url()*/ cr(/&lt;style[^&gt;]*&gt;(?:[^"']*(?:"[^"]*"|'[^']*'))*?[^'"]*(?:&lt;\/style|$)/gi, "url", "\\s*\\(\\s*", "", "\\s*\\)"); cri(tag+any+att+"style\\s*="+any+etag, "style", ae("url")+s+ae("(")+s, 0, s+ae(")"), ae(")")); /* IE7- CSS expression() */ cr(/&lt;style[^&gt;]*&gt;(?:[^"']*(?:"[^"]*"|'[^']*'))*?[^'"]*(?:&lt;\/style|$)/gi, "expression", "\\s*\\(\\s*", "", "\\s*\\)"); cri(tag+any+att+"style\\s*="+any+etag, "style", ae("expression")+s+ae("(")+s, 0, s+ae(")"), ae(")")); return html.replace(new RegExp("(?:"+prefix+")+", "g"), prefix); } </code></pre> <h3>Explanation of the code</h3> <p>The <code>sanitiseHTML</code> function is based on my <code>replace_all_rel_by_abs</code> function (see <a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg278167" rel="nofollow noreferrer">this answer</a>). The <code>sanitiseHTML</code> function is completely rewritten though, in order to achieve maximum efficiency and reliability.</p> <p>Additionally, a new set of RegExps are added to remove all scripts and event handlers (including CSS <code>expression()</code>, IE7-). To make sure that all tags are parsed as expected, the adjusted tags are prefixed by <code>&lt;!--'"--&gt;</code>. This prefix is necessary to correctly parse nested "event handlers" in conjunction with unterminated quotes: <code>&lt;a id="&gt;&lt;input onclick="&lt;div onmousemove=evil()&gt;"&gt;</code>.</p> <p>These RegExps are dynamically created using an internal function <code>cr</code>/<code>cri</code> (<strong>C</strong>reate <strong>R</strong>eplace [<strong>I</strong>nline]). These functions accept a list of arguments, and create and execute an advanced RE replacement. To make sure that HTML entities aren't breaking a RegExp (<code>refresh</code> in <code>&lt;meta http-equiv=refresh&gt;</code> could be written in various ways), the dynamically created RegExps are partially constructed by function <code>ae</code> (<strong>A</strong>ny <strong>E</strong>ntity).<br /> The actual replacements are done by function <code>by</code> (replace <strong>by</strong>). In this implementation, <code>by</code> adds <code>data-</code> before all matched attributes.</p> <ol> <li>All <code>&lt;script&gt;//&lt;[CDATA[ .. //]]&gt;&lt;/script&gt;</code> occurrences are striped. This step is necessary, because <code>CDATA</code> sections allow <code>&lt;/script&gt;</code> strings inside the code. After this replacement has been executed, it's safe to go to the next replacement:</li> <li>The remaining <code>&lt;script&gt;...&lt;/script&gt;</code> tags are removed.</li> <li>The <code>&lt;meta http-equiv=refresh .. &gt;</code> tag is removed</li> <li><p><strong>All</strong> event listeners and external pointers/attributes (<code>href</code>, <code>src</code>, <code>url()</code>) are prefixed by <code>data-</code>, as described previously.</p></li> <li><p>An <code>IFrame</code> object is created. IFrames are less likely to leak memory (contrary to the htmlfile ActiveXObject). The IFrame becomes invisible, and is appended to the document, so that the DOM can be accessed. <code>document.write()</code> are used to write HTML to the IFrame. <code>document.open()</code> and <code>document.close()</code> are used to empty the previous contents of the document, so that the generated document is an exact copy of the given <code>html</code> string.</p></li> <li>If a callback function has been specified, the function will be called with two arguments. The <em>first</em> argument is a reference to the generated <code>document</code> object. The <em>second</em> argument is a function, which destroys the generated DOM tree when called. This function should be called when you don't need the tree any more.<br />If the callback function isn't specified, the function returns an object consisting of two properties (<code>doc</code> and <code>destroy</code>), which behave the same as the previously mentioned arguments.</li> </ol> <h3>Additional notes</h3> <ul> <li>Setting the <code>designMode</code> property to "On" will stop a frame from executing scripts (not supported in Chrome). If you have to preserve the <code>&lt;script&gt;</code> tags for a specific reason, you can use <code>iframe.designMode = "On"</code> instead of the script stripping feature.</li> <li>I wasn't able to find a reliable source for the <code>htmlfile activeXObject</code>. According to <a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg278167" rel="nofollow noreferrer">this source</a>, <code>htmlfile</code> is slower than IFrames, and more susceptible to memory leaks.<br /><br /></li> <li>All affected attributes (<code>href</code>, <code>src</code>, ...) are prefixed by <code>data-</code>. An example of getting/changing these attributes is shown for <code>data-href</code>:<br /><code>elem.getAttribute("data-href")</code> and <code>elem.setAttribute("data-href", "...")</code><br /><code>elem.dataset.href</code> and <code>elem.dataset.href = "..."</code>.</li> <li>External resources have been disabled. As a result, the page may look completely different:<br/><strike><code>&lt;link rel="stylesheet" href="main.css" /&gt;</code></strike> <em>No external styles</em><br /><strike><code>&lt;script&gt;document.body.bgColor="red";&lt;/script&gt;</code></strike> <em>No scripted styles</em><br /><code>&lt;img src="128x128.png" /&gt;</code> <em>No images: the size of the element may be completely different.</em></li> </ul> <h3>Examples</h3> <p><strong><code>sanitiseHTML(html)</code></strong><br /> Paste this bookmarklet in the location's bar. It will offer an option to inject a textarea, showing the sanitised HTML string.</p> <pre><code>javascript:void(function(){var s=document.createElement("script");s.src="http://rob.lekensteyn.nl/html-sanitizer.js";document.body.appendChild(s)})(); </code></pre> <p><strong>Code examples - <code>string2dom(html)</code></strong>:</p> <pre><code>string2dom("&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;&lt;/head&gt;&lt;/html&gt;", function(doc, destroy){ alert(doc.title); /* Alert: "Test" */ destroy(); }); var test = string2dom("&lt;div id='secret'&gt;&lt;/div&gt;"); alert(test.doc.getElementById("secret").tagName); /* Alert: "DIV" */ test.destroy(); </code></pre> <h3>Notable references</h3> <ul> <li><a href="https://stackoverflow.com/questions/7544550/javascript-regex-to-change-all-relative-urls-to-absolute/7544757#7544757">SO: JS RE to change all relative to absolute URLs</a> - Function <code>sanitiseHTML(html)</code> is based on my previously created <code>replace_all_rel_by_abs(html)</code> function.</li> <li><a href="http://www.w3.org/wiki/HTML/Elements#Embedded_content" rel="nofollow noreferrer">Elements - Embedded content</a> - A full list of standard embedded elements</li> <li><a href="http://www.w3.org/wiki/HTML/Elements#Previous_HTML_html.2FElement" rel="nofollow noreferrer">Elements - Previous HTML elements</a> - An additional list of (deprecated) elements (such as <code>&lt;applet&gt;</code>)</li> <li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg278167" rel="nofollow noreferrer">The htmlfile ActiveX object</a> - <em>"Slower than iframe sandboxes. Leaks memory if not managed"</em></li> </ul>
    singulars
    1. This table or related slice is empty.
    1. POCan I load an entire HTML document into a document fragment in Internet Explorer?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USRob W
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POCan I load an entire HTML document into a document fragment in Internet Explorer?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO+1 from me, too. I had already come to the same conclusions regarding fragments (after extensive researching and testing). The interesting part is setting `designMode` to `on` to prevent script execution. Anyway, thanks a lot... this is more the kind of answer I was after. The only real shame is the many potential holes so I need to give this a bit more thought.
      singulars
      1. PO
      1. USAndy E
    2. COSee point 3 (+ the corresponding replace function) and the first two references at the end. If you're absolutely certain that a certain tag (`<applet>`?) won't appear, there's not need to implement it. If you don't have to keep the embedded elements for a specific goal, removing them through a RE is easy. Eg.: `.replace(/<object[\S\s]+?<\/object\s*>/gi, "")`. Some embedded objects may have an omitted close tag. In that case, use: `.replace(/<embed[^>]+>[\S\s]*?<\/embed\s*>/gi, "").replace(/<embed[^>]*>/gi, "")`.
      singulars
      1. PO
      1. USRob W
    3. CO@AndyE I'm currently at an advanced stage of developing a function to reliably parse external sources. Does it matter if (example) the `src` attribute has to be referenced through `data-src` instead of `src`? I could modify native `Element` objects, although they're not very reliable.
      singulars
      1. PO
      1. USRob W
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload