Issue 1527 - Properly escape generated CSS selectors

include.postload.js

Index: include.postload.js
===================================================================
--- a/include.postload.js
+++ b/include.postload.js
@@ -24,9 +24,39 @@
 var clickHideFiltersDialog = null;
 var lastRightClickEvent = null;
 
+var ctrlChar = /[\x00-\x1F\x7F]/g;
+
+function escapeLiteral(chr)
+{
+  return "\\" + chr;
+}
+
+function escapeWithCharCode(chr)
+{
+  return "\\" + chr.charCodeAt(0).toString(16) + " ";
+}
+
 function quote(value)
 {
-  return '"' + value.replace(/(["\\])/g, "\\$1") + '"';
+  value = value.replace(/["\\]/g, escapeLiteral);
+  value = value.replace(ctrlChar, escapeWithCharCode);
+
+  return '"' + value + '"';
+}
+
+function escapeToken(s)
+{
+  return s.replace(
+    /^\d|^-(?![^\d-])|[^\w-\u0080-\uFFFF]/g,

[Wladimir Palant, 2014/11/05 19:56:52]

Constructing character classes that deal with large ranges was highly
inefficient last time I tried using them. However,
http://jsperf.com/character-classes-performance seems to confirm that there is
no significant performance difference in modern browsers (anything below factor
10 doesn't really matter here, performance of this code isn't critical).

[Sebastian Noack, 2014/11/06 08:25:14]

You forgot to run the regex, but there still isn't a notable difference:
http://jsperf.com/character-classes-performance/2

[Wladimir Palant, 2014/11/06 14:13:59]

No, I didn't intend to run it - the slowdown I know happened during
initialization.

+
+    function(chr)
+    {
+      if (ctrlChar.test(chr) || /\d/.test(chr))
+        return escapeWithCharCode(chr);
+
+      return escapeLiteral(chr);
+    }
+  );
 }
 
 function supportsShadowRoot(element)
@@ -376,10 +406,6 @@
   else if (elt.src)
     url = elt.src;
 
-  // Construct filters. The popup will retrieve these.
-  // Only one ID
-  var elementId = elt.id ? elt.id.split(' ').join('') : null;
-
   clickHideFilters = new Array();
   selectorList = new Array();
 
@@ -389,15 +415,15 @@
     selectorList.push(selector);
   };
 
-  if (elementId)
-    addSelector("#" + elementId);
+  if (elt.id)
+    addSelector("#" + escapeToken(elt.id));
 
   if (elt.classList.length > 0)
   {
     var selector = "";
 
     for (var i = 0; i < elt.classList.length; i++)
-      selector += "." + elt.classList[i].replace(/([^\w-])/g, "\\$1");
+      selector += "." + escapeToken(elt.classList[i]);
 
     addSelector(selector);
   }
@@ -405,7 +431,7 @@
   if (url)
   {
     var src = elt.getAttribute("src");
-    var selector = src && elt.localName + '[src=' + quote(src) + ']';
+    var selector = src && escapeToken(elt.localName) + '[src=' + quote(src) + ']';
 
     if (/^https?:/i.test(url))
     {
@@ -427,7 +453,7 @@
   {
     var style = elt.getAttribute("style");
     if (style)
-      addSelector(elt.localName + '[style=' + quote(style) + ']');
+      addSelector(escapeToken(elt.localName) + '[style=' + quote(style) + ']');
   }
 
   // Show popup