Merge pull request #714 from syranide/escapekey

Escape component keys used in reactid

src/core/__tests__/ReactIdentity-test.js

@@ -137,7 +137,8 @@ describe('ReactIdentity', function() {
   });
 
   it('should not allow scripts in keys to execute', function() {
-    var h4x0rKey = '"><script>window.YOUVEBEENH4X0RED=true;</script><div id="';
+    var h4x0rKey =
+      '"><script>window[\'YOUVEBEENH4X0RED\']=true;</script><div id="';
 
     var attachedContainer = document.createElement('div');
     document.body.appendChild(attachedContainer);

src/utils/__tests__/ReactChildren-test.js

@@ -288,7 +288,10 @@ describe('ReactChildren', function() {
     var mappedForcedKeys = Object.keys(mappedChildrenForcedKeys);
     expect(mappedForcedKeys).toEqual(expectedForcedKeys);
 
-    var expectedRemappedForcedKeys = ['{{keyZero}}{giraffe}', '{{keyOne}}[0]'];
+    var expectedRemappedForcedKeys = [
+      '{{keyZero^C}{giraffe}',
+      '{{keyOne^C}[0]'
+    ];
     var remappedChildrenForcedKeys =
       ReactChildren.map(mappedChildrenForcedKeys, mapFn);
     expect(

src/utils/traverseAllChildren.js

@@ -30,6 +30,18 @@ var invariant = require('invariant');
  * });
  */
 
+var userProvidedKeyEscaperLookup = {
+  '^': '^X',
+  '.': '^D',
+  '}': '^C'
+};
+
+var userProvidedKeyEscapeRegex = /[.^}]/g;
+
+function userProvidedKeyEscaper(match) {
+  return userProvidedKeyEscaperLookup[match];
+}
+
 /**
  * Generate a key string that identifies a component within a set.
  *
@@ -46,6 +58,19 @@ function getComponentKey(component, index) {
   return '[' + index + ']';
 }
 
+/**
+ * Escape a component key so that it is safe to use in a reactid.
+ *
+ * @param {*} key Component key to be escaped.
+ * @return {string} An escaped string.
+ */
+function escapeUserProvidedKey(text) {
+  return ('' + text).replace(
+    userProvidedKeyEscapeRegex,
+    userProvidedKeyEscaper
+  );
+}
+
 /**
  * Wrap a `key` value explicitly provided by the user to distinguish it from
  * implicitly-generated keys generated by a component's index in its parent.
@@ -54,7 +79,7 @@ function getComponentKey(component, index) {
  * @return {string}
  */
 function wrapUserProvidedKey(key) {
-  return '{' + key + '}';
+  return '{' + escapeUserProvidedKey(key) + '}';
 }
 
 /**