Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Fix DFL-3650 - need to escape control characters before parsing with innerHTML #107

Merged
merged 3 commits into from

4 participants

@hzr
hzr commented

No description provided.

src/syntaxhighlight/js/tokenizer.js
((23 lines not shown))
+ '\u0010': '\\u0010',
+ '\u0011': '\\u0011',
+ '\u0012': '\\u0012',
+ '\u0013': '\\u0013',
+ '\u0014': '\\u0014',
+ '\u0015': '\\u0015',
+ '\u0016': '\\u0016',
+ '\u0017': '\\u0017',
+ '\u0018': '\\u0018',
+ '\u0019': '\\u0019',
+ '\u001a': '\\u001a',
+ '\u001b': '\\u001b',
+ '\u001c': '\\u001c',
+ '\u001d': '\\u001d',
+ '\u001e': '\\u001e',
+ '\u001f': '\\u001f'
@hzr
hzr added a note

This would obviously be nicer with a replace function, but I followed the old format to mitigate the risk of messing up something deep down in the tokenizer.

@chriskr Owner
chriskr added a note

\u0009, \u000A and \u000D are valid characters in XML, they don't need to be escaped.

Has someone tried to run DFL in text/html? There are some unknown elements, but that shouldn't be really a problem technically?

Also this change would break the tooltip after such a char. Matching is done on the real source based on character count offset. An alternative approach would be to replace with a small markup snippet, e.g. for \u0004 <span data-control-char="EOT"> </span> and display that with CSS similar to how e.g. Sublime Text displays control chars, a black box with the ASCI name (content: attr(data-control-char);.

(Actually that wouldn't work either, i think.)

@hzr
hzr added a note

About those characters, right, thanks!

I'm not sure if it's worth special-casing these for tooltips as they will appear very rarely. But I can think of some other way of doing it.

Also, back on vacation with you! ;)

@hzr
hzr added a note

Tried running it as text/html now. Works mostly fine, only found minor issues with some styling and no being able to resize panels (maybe because some parent element check fails now, I dunno).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@danfooo

Good!

@p01

Note sure what's the best approach. But that will do as a quick-fix

@hzr
hzr commented

Fixed the tooltip issue. The spans contains the control pictures as "fallback" (not that this will ever be needed).

@hzr
hzr commented

And yes, this is totally ugly.

@danfooo

Should those control pictures be used in escape_html too?

@hzr
hzr commented

@danfooo I tried that, but that would require lots of changes to DOM editing. More than it's worth.

@danfooo

Ah, I see. Seems like a good enough solution then.

@p01
Owner
p01 commented

Looks better.

@hzr hzr merged commit 63f57d1 into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Oct 8, 2012
  1. @hzr
Commits on Oct 9, 2012
  1. @hzr
  2. @hzr

    Fix issue with inspection tooltip by showing the character with gener…

    hzr authored
    …ated content instead of the escaped character.
This page is out of date. Refresh to see the latest.
View
7 src/ecma-debugger/helpers.js
@@ -118,11 +118,18 @@ window.cls.Helpers = function()
var re_amp = /&/g;
var re_lt = /</g;
var re_cd_end = /]]>/g;
+ var re_control_characters = /[\u0000-\u0008\u000b\u000c\u000e-\u001f]/g;
return function(str)
{
return str ? str.replace(re_amp, "&amp;")
.replace(re_lt, "&lt;")
.replace(re_cd_end, "]]&gt;")
+ .replace(re_control_characters, function(c) {
+ // We can't set innerHTML with these characters in XML.
+ // Just replace them with blank, since they are very
+ // seldomly used.
+ return "";
+ })
: str;
}
})();
View
33 src/syntaxhighlight/js/tokenizer.js
@@ -356,7 +356,38 @@ cls.SimpleJSParser.prototype = new function()
{
'<': '&lt;',
'>': '&gt;',
- '&': '&amp;'
+ '&': '&amp;',
+ // The following control characters need to be escaped in XML.
+ // U+0000-U+001F excluding U+0009, U+000A and U+000D.
+ '\u0000': '<span style="content: \'\\0000\'">␀</span>',
+ '\u0001': '<span style="content: \'\\0001\'">␁</span>',
+ '\u0002': '<span style="content: \'\\0002\'">␂</span>',
+ '\u0003': '<span style="content: \'\\0003\'">␃</span>',
+ '\u0004': '<span style="content: \'\\0004\'">␄</span>',
+ '\u0005': '<span style="content: \'\\0005\'">␅</span>',
+ '\u0006': '<span style="content: \'\\0006\'">␆</span>',
+ '\u0007': '<span style="content: \'\\0007\'">␇</span>',
+ '\u0008': '<span style="content: \'\\0008\'">␈</span>',
+ '\u000b': '<span style="content: \'\\000b\'">␋</span>',
+ '\u000c': '<span style="content: \'\\000c\'">␌</span>',
+ '\u000e': '<span style="content: \'\\000e\'">␎</span>',
+ '\u000f': '<span style="content: \'\\000f\'">␏</span>',
+ '\u0010': '<span style="content: \'\\0010\'">␐</span>',
+ '\u0011': '<span style="content: \'\\0011\'">␑</span>',
+ '\u0012': '<span style="content: \'\\0012\'">␒</span>',
+ '\u0013': '<span style="content: \'\\0013\'">␓</span>',
+ '\u0014': '<span style="content: \'\\0014\'">␔</span>',
+ '\u0015': '<span style="content: \'\\0015\'">␕</span>',
+ '\u0016': '<span style="content: \'\\0016\'">␖</span>',
+ '\u0017': '<span style="content: \'\\0017\'">␗</span>',
+ '\u0018': '<span style="content: \'\\0018\'">␘</span>',
+ '\u0019': '<span style="content: \'\\0019\'">␙</span>',
+ '\u001a': '<span style="content: \'\\001a\'">␚</span>',
+ '\u001b': '<span style="content: \'\\001b\'">␛</span>',
+ '\u001c': '<span style="content: \'\\001c\'">␜</span>',
+ '\u001d': '<span style="content: \'\\001d\'">␝</span>',
+ '\u001e': '<span style="content: \'\\001e\'">␞</span>',
+ '\u001f': '<span style="content: \'\\001f\'">␟</span>'
}
var default_parser=function(c)
{
Something went wrong with that request. Please try again.