{"files":[{"path":"scripts\/fiber\/tests-passing.txt","status":"M"},{"path":"src\/renderers\/art\/ReactARTFiber.js","status":"M"},{"path":"src\/renderers\/dom\/fiber\/ReactDOMFiber.js","status":"M"},{"path":"src\/renderers\/dom\/fiber\/ReactDOMFiberComponent.js","status":"M"},{"path":"src\/renderers\/dom\/shared\/__tests__\/ReactDOMComponent-test.js","status":"M"},{"path":"src\/renderers\/dom\/stack\/client\/ReactDOMComponent.js","status":"M"},{"path":"src\/renderers\/noop\/ReactNoop.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberReconciler.js","status":"M"}],"commit":{"subject":"Merge pull request #8563 from sebmarkbage\/enforcelowercasetags","authorName":"Sebastian Markbåge","revision":"bd425837a4b5e45208e8944257ad40c9d08f04e5","authoredAt":"2016-12-13T14:54:21-08:00","shortRevision":"bd425837a4","authorEmail":"sebastian@calyptus.eu"},"parents":["ec8b94e847fd2f6cdd8d799c5e158d48aaeb66ee","6c1592f3842fb2bee94e82e84d64b17dec39b38b"],"patch":"diff --git a\/scripts\/fiber\/tests-passing.txt b\/scripts\/fiber\/tests-passing.txt\nindex 6eca915bf1..002f3c042f 100644\n--- a\/scripts\/fiber\/tests-passing.txt\n+++ b\/scripts\/fiber\/tests-passing.txt\n@@ -640,6 +640,7 @@ src\/renderers\/dom\/shared\/__tests__\/ReactDOMComponent-test.js\n * should handle dangerouslySetInnerHTML\n * should work error event on element\n * should not duplicate uppercased selfclosing tags\n+* should warn on upper case HTML tags, not SVG nor custom tags\n * should warn against children for void elements\n * should warn against dangerouslySetInnerHTML for void elements\n * should emit a warning once for an unnamed custom component using shady DOM\n@@ -663,6 +664,8 @@ src\/renderers\/dom\/shared\/__tests__\/ReactDOMComponent-test.js\n * should properly escape text content and attributes values\n * unmounts children before unsetting DOM node info\n * should warn about the `onScroll` issue when unsupported (IE8)\n+* should throw when an invalid tag name is used server-side\n+* should throw when an attack vector is used server-side\n * should throw when an invalid tag name is used\n * should throw when an attack vector is used\n * should warn about props that are no longer supported\ndiff --git a\/src\/renderers\/art\/ReactARTFiber.js b\/src\/renderers\/art\/ReactARTFiber.js\nindex c4fa6d7f5e..ffa9cc419c 100644\n--- a\/src\/renderers\/art\/ReactARTFiber.js\n+++ b\/src\/renderers\/art\/ReactARTFiber.js\n@@ -408,7 +408,7 @@ const ARTRenderer = ReactFiberReconciler({\n \/\/ Noop\n },\n \n- commitUpdate(instance, oldProps, newProps) {\n+ commitUpdate(instance, type, oldProps, newProps) {\n instance._applyProps(instance, newProps, oldProps);\n },\n \n@@ -467,7 +467,7 @@ const ARTRenderer = ReactFiberReconciler({\n \/\/ Noop\n },\n \n- prepareUpdate(domElement, oldProps, newProps) {\n+ prepareUpdate(domElement, type, oldProps, newProps) {\n return true;\n },\n \ndiff --git a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\nindex eecdb8181e..4c38e66f6b 100644\n--- a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n+++ b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n@@ -97,20 +97,16 @@ var DOMRenderer = ReactFiberReconciler({\n \n finalizeInitialChildren(\n domElement : Instance,\n+ type : string,\n props : Props,\n rootContainerInstance : Container,\n ) : void {\n- \/\/ TODO: we normalize here because DOM renderer expects tag to be lowercase.\n- \/\/ We can change DOM renderer to compare special case against upper case,\n- \/\/ and use tagName (which is upper case for HTML DOM elements). Or we could\n- \/\/ let the renderer \"normalize\" the fiber type so we don't have to read\n- \/\/ the type from DOM. However we need to remember SVG is case-sensitive.\n- var tag = domElement.tagName.toLowerCase();\n- setInitialProperties(domElement, tag, props, rootContainerInstance);\n+ setInitialProperties(domElement, type, props, rootContainerInstance);\n },\n \n prepareUpdate(\n domElement : Instance,\n+ type : string,\n oldProps : Props,\n newProps : Props\n ) : boolean {\n@@ -119,21 +115,16 @@ var DOMRenderer = ReactFiberReconciler({\n \n commitUpdate(\n domElement : Instance,\n+ type : string,\n oldProps : Props,\n newProps : Props,\n rootContainerInstance : Container,\n internalInstanceHandle : Object,\n ) : void {\n- \/\/ TODO: we normalize here because DOM renderer expects tag to be lowercase.\n- \/\/ We can change DOM renderer to compare special case against upper case,\n- \/\/ and use tagName (which is upper case for HTML DOM elements). Or we could\n- \/\/ let the renderer \"normalize\" the fiber type so we don't have to read\n- \/\/ the type from DOM. However we need to remember SVG is case-sensitive.\n- var tag = domElement.tagName.toLowerCase();\n \/\/ Update the internal instance handle so that we know which props are\n \/\/ the current ones.\n precacheFiberNode(internalInstanceHandle, domElement);\n- updateProperties(domElement, tag, oldProps, newProps, rootContainerInstance);\n+ updateProperties(domElement, type, oldProps, newProps, rootContainerInstance);\n },\n \n shouldSetTextContent(props : Props) : boolean {\ndiff --git a\/src\/renderers\/dom\/fiber\/ReactDOMFiberComponent.js b\/src\/renderers\/dom\/fiber\/ReactDOMFiberComponent.js\nindex 826dcc5b6a..44afff611e 100644\n--- a\/src\/renderers\/dom\/fiber\/ReactDOMFiberComponent.js\n+++ b\/src\/renderers\/dom\/fiber\/ReactDOMFiberComponent.js\n@@ -279,21 +279,6 @@ var voidElementTags = {\n ...omittedCloseTags,\n };\n \n-\/\/ We accept any tag to be rendered but since this gets injected into arbitrary\n-\/\/ HTML, we want to make sure that it's a safe tag.\n-\/\/ http:\/\/www.w3.org\/TR\/REC-xml\/#NT-Name\n-\n-var VALID_TAG_REGEX = \/^[a-zA-Z][a-zA-Z:_\\.\\-\\d]*$\/; \/\/ Simplified subset\n-var validatedTagCache = {};\n-var hasOwnProperty = {}.hasOwnProperty;\n-\n-function validateDangerousTag(tag) {\n- if (!hasOwnProperty.call(validatedTagCache, tag)) {\n- invariant(VALID_TAG_REGEX.test(tag), 'Invalid tag: %s', tag);\n- validatedTagCache[tag] = true;\n- }\n-}\n-\n function isCustomComponent(tagName, props) {\n return tagName.indexOf('-') >= 0 || props.is != null;\n }\n@@ -488,18 +473,23 @@ var ReactDOMFiberComponent = {\n rootContainerElement : Element,\n parentNamespace : string | null\n ) : Element {\n- validateDangerousTag(type);\n- \/\/ TODO:\n- \/\/ const tag = type.toLowerCase(); Do we need to apply lower case only on non-custom elements?\n-\n \/\/ We create tags in the namespace of their parent container, except HTML\n \/\/ tags get no namespace.\n var ownerDocument = rootContainerElement.ownerDocument;\n var domElement : Element;\n var namespaceURI = parentNamespace || getIntrinsicNamespace(type);\n if (namespaceURI == null) {\n- const tag = type.toLowerCase();\n- if (tag === 'script') {\n+ if (__DEV__) {\n+ warning(\n+ type === type.toLowerCase() ||\n+ isCustomComponent(type, props),\n+ '<%s \/> is using uppercase HTML. Always use lowercase HTML tags ' +\n+ 'in React.',\n+ type\n+ );\n+ }\n+\n+ if (type === 'script') {\n \/\/ Create the script via .innerHTML so its \"parser-inserted\" flag is\n \/\/ set to true and it does not execute\n var div = ownerDocument.createElement('div');\ndiff --git a\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMComponent-test.js b\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMComponent-test.js\nindex 2a263cc63d..6c5661e666 100644\n--- a\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMComponent-test.js\n+++ b\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMComponent-test.js\n@@ -14,6 +14,7 @@\n \n describe('ReactDOMComponent', () => {\n var React;\n+ var ReactTestUtils;\n var ReactDOM;\n var ReactDOMFeatureFlags;\n var ReactDOMServer;\n@@ -29,16 +30,11 @@ describe('ReactDOMComponent', () => {\n ReactDOM = require('ReactDOM');\n ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');\n ReactDOMServer = require('ReactDOMServer');\n+ ReactTestUtils = require('ReactTestUtils');\n inputValueTracking = require('inputValueTracking');\n });\n \n describe('updateDOM', () => {\n- var ReactTestUtils;\n-\n- beforeEach(() => {\n- ReactTestUtils = require('ReactTestUtils');\n- });\n-\n it('should handle className', () => {\n var container = document.createElement('div');\n ReactDOM.render(

, container);\n@@ -795,6 +791,7 @@ describe('ReactDOMComponent', () => {\n });\n \n it('should not duplicate uppercased selfclosing tags', () => {\n+ spyOn(console, 'error');\n class Container extends React.Component {\n render() {\n return React.createElement('BR', null);\n@@ -803,6 +800,27 @@ describe('ReactDOMComponent', () => {\n \n var returnedValue = ReactDOMServer.renderToString();\n expect(returnedValue).not.toContain('<\/BR>');\n+ expectDev(console.error.calls.count()).toBe(1);\n+ expectDev(console.error.calls.argsFor(0)[0]).toContain(\n+ '
is using uppercase HTML.'\n+ );\n+ });\n+\n+ it('should warn on upper case HTML tags, not SVG nor custom tags', () => {\n+ spyOn(console, 'error');\n+ ReactTestUtils.renderIntoDocument(\n+ React.createElement('svg', null, React.createElement('PATH'))\n+ );\n+ expectDev(console.error.calls.count()).toBe(0);\n+ ReactTestUtils.renderIntoDocument(\n+ React.createElement('CUSTOM-TAG')\n+ );\n+ expectDev(console.error.calls.count()).toBe(0);\n+ ReactTestUtils.renderIntoDocument(React.createElement('IMG'));\n+ expectDev(console.error.calls.count()).toBe(1);\n+ expectDev(console.error.calls.argsFor(0)[0]).toContain(\n+ ' is using uppercase HTML.'\n+ );\n });\n \n it('should warn against children for void elements', () => {\n@@ -1171,8 +1189,7 @@ describe('ReactDOMComponent', () => {\n .mock('isEventSupported');\n var isEventSupported = require('isEventSupported');\n isEventSupported.mockReturnValueOnce(false);\n-\n- var ReactTestUtils = require('ReactTestUtils');\n+ ReactTestUtils = require('ReactTestUtils');\n \n spyOn(console, 'error');\n ReactTestUtils.renderIntoDocument(

);\n@@ -1190,34 +1207,40 @@ describe('ReactDOMComponent', () => {\n });\n \n describe('tag sanitization', () => {\n- it('should throw when an invalid tag name is used', () => {\n- var ReactTestUtils = require('ReactTestUtils');\n+ it('should throw when an invalid tag name is used server-side', () => {\n var hackzor = React.createElement('script tag');\n expect(\n- () => ReactTestUtils.renderIntoDocument(hackzor)\n+ () => ReactDOMServer.renderToString(hackzor)\n ).toThrowError(\n 'Invalid tag: script tag'\n );\n });\n \n- it('should throw when an attack vector is used', () => {\n- var ReactTestUtils = require('ReactTestUtils');\n+ it('should throw when an attack vector is used server-side', () => {\n var hackzor = React.createElement('div> ReactTestUtils.renderIntoDocument(hackzor)\n+ () => ReactDOMServer.renderToString(hackzor)\n ).toThrowError(\n 'Invalid tag: div> {\n- var ReactTestUtils;\n+ it('should throw when an invalid tag name is used', () => {\n+ var hackzor = React.createElement('script tag');\n+ expect(\n+ () => ReactTestUtils.renderIntoDocument(hackzor)\n+ ).toThrow();\n+ });\n \n- beforeEach(() => {\n- ReactTestUtils = require('ReactTestUtils');\n+ it('should throw when an attack vector is used', () => {\n+ var hackzor = React.createElement('div> ReactTestUtils.renderIntoDocument(hackzor)\n+ ).toThrow();\n });\n+ });\n \n+ describe('nesting validation', () => {\n it('warns on invalid nesting', () => {\n spyOn(console, 'error');\n ReactTestUtils.renderIntoDocument(

<\/div>);\ndiff --git a\/src\/renderers\/dom\/stack\/client\/ReactDOMComponent.js b\/src\/renderers\/dom\/stack\/client\/ReactDOMComponent.js\nindex 13f61ae8c4..b23a736b08 100644\n--- a\/src\/renderers\/dom\/stack\/client\/ReactDOMComponent.js\n+++ b\/src\/renderers\/dom\/stack\/client\/ReactDOMComponent.js\n@@ -413,7 +413,6 @@ var globalIdCounter = 1;\n *\/\n function ReactDOMComponent(element) {\n var tag = element.type;\n- validateDangerousTag(tag);\n this._currentElement = element;\n this._tag = tag.toLowerCase();\n this._namespaceURI = null;\n@@ -524,6 +523,15 @@ ReactDOMComponent.Mixin = {\n namespaceURI = DOMNamespaces.html;\n }\n if (namespaceURI === DOMNamespaces.html) {\n+ if (__DEV__) {\n+ warning(\n+ isCustomComponent(this._tag, props) ||\n+ this._tag === this._currentElement.type,\n+ '<%s \/> is using uppercase HTML. Always use lowercase HTML tags ' +\n+ 'in React.',\n+ this._currentElement.type\n+ );\n+ }\n if (this._tag === 'svg') {\n namespaceURI = DOMNamespaces.svg;\n } else if (this._tag === 'math') {\n@@ -596,6 +604,7 @@ ReactDOMComponent.Mixin = {\n this._createInitialChildren(transaction, props, context, lazyTree);\n mountImage = lazyTree;\n } else {\n+ validateDangerousTag(this._tag);\n var tagOpen = this._createOpenTagMarkupAndPutListeners(transaction, props);\n var tagContent = this._createContentMarkup(transaction, props, context);\n if (!tagContent && omittedCloseTags[this._tag]) {\ndiff --git a\/src\/renderers\/noop\/ReactNoop.js b\/src\/renderers\/noop\/ReactNoop.js\nindex 97cb1578fa..d16b6e7bf2 100644\n--- a\/src\/renderers\/noop\/ReactNoop.js\n+++ b\/src\/renderers\/noop\/ReactNoop.js\n@@ -60,15 +60,15 @@ var NoopRenderer = ReactFiberReconciler({\n parentInstance.children.push(child);\n },\n \n- finalizeInitialChildren(domElement : Instance, props : Props) : void {\n+ finalizeInitialChildren(domElement : Instance, type : string, props : Props) : void {\n \/\/ Noop\n },\n \n- prepareUpdate(instance : Instance, oldProps : Props, newProps : Props) : boolean {\n+ prepareUpdate(instance : Instance, type : string, oldProps : Props, newProps : Props) : boolean {\n return true;\n },\n \n- commitUpdate(instance : Instance, oldProps : Props, newProps : Props) : void {\n+ commitUpdate(instance : Instance, type : string, oldProps : Props, newProps : Props) : void {\n instance.prop = newProps.prop;\n },\n \ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\nindex 46f0fdc94b..5ff31e2d51 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n@@ -373,7 +373,8 @@ module.exports = function(\n const newProps = finishedWork.memoizedProps;\n const oldProps = current.memoizedProps;\n const rootContainerInstance = getRootHostContainer();\n- commitUpdate(instance, oldProps, newProps, rootContainerInstance, finishedWork);\n+ const type = finishedWork.type;\n+ commitUpdate(instance, type, oldProps, newProps, rootContainerInstance, finishedWork);\n }\n detachRefIfNeeded(current, finishedWork);\n return;\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\nindex 84af8a456d..ea85f1fe60 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n@@ -215,6 +215,7 @@ module.exports = function(\n }\n case HostComponent:\n popHostContext(workInProgress);\n+ const type = workInProgress.type;\n let newProps = workInProgress.pendingProps;\n if (current && workInProgress.stateNode != null) {\n \/\/ If we have an alternate, that means this is an update and we need to\n@@ -228,7 +229,7 @@ module.exports = function(\n newProps = workInProgress.memoizedProps || oldProps;\n }\n const instance : I = workInProgress.stateNode;\n- if (prepareUpdate(instance, oldProps, newProps)) {\n+ if (prepareUpdate(instance, type, oldProps, newProps)) {\n \/\/ This returns true if there was something to update.\n markUpdate(workInProgress);\n }\n@@ -249,14 +250,14 @@ module.exports = function(\n \/\/ or completeWork depending on we want to add then top->down or\n \/\/ bottom->up. Top->down is faster in IE11.\n const instance = createInstance(\n- workInProgress.type,\n+ type,\n newProps,\n rootContainerInstance,\n currentHostContext,\n workInProgress\n );\n appendAllChildren(instance, workInProgress);\n- finalizeInitialChildren(instance, newProps, rootContainerInstance);\n+ finalizeInitialChildren(instance, type, newProps, rootContainerInstance);\n \n workInProgress.stateNode = instance;\n if (workInProgress.ref) {\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\nindex 08204a048b..571d9aa921 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n@@ -46,10 +46,10 @@ export type HostConfig = {\n \n createInstance(type : T, props : P, rootContainerInstance : C, hostContext : CX | null, internalInstanceHandle : OpaqueNode) : I,\n appendInitialChild(parentInstance : I, child : I | TI) : void,\n- finalizeInitialChildren(parentInstance : I, props : P, rootContainerInstance : C) : void,\n+ finalizeInitialChildren(parentInstance : I, type : T, props : P, rootContainerInstance : C) : void,\n \n- prepareUpdate(instance : I, oldProps : P, newProps : P) : boolean,\n- commitUpdate(instance : I, oldProps : P, newProps : P, rootContainerInstance : C, internalInstanceHandle : OpaqueNode) : void,\n+ prepareUpdate(instance : I, type : T, oldProps : P, newProps : P) : boolean,\n+ commitUpdate(instance : I, type : T, oldProps : P, newProps : P, rootContainerInstance : C, internalInstanceHandle : OpaqueNode) : void,\n \n shouldSetTextContent(props : P) : boolean,\n resetTextContent(instance : I) : void,\n","body":"Drop runtime validation and lower case coercion of tag names"}

dillon1000/react

Files changed