diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js index 1517264cb8..be97a0252d 100644 --- a/packages/react-dom/src/client/ReactDOMComponent.js +++ b/packages/react-dom/src/client/ReactDOMComponent.js @@ -430,11 +430,13 @@ export function createElement( namespaceURI = getIntrinsicNamespace(type); } if (namespaceURI === HTML_NAMESPACE) { + const lowerCaseType = type.toLowerCase(); + if (__DEV__) { isCustomComponentTag = isCustomComponent(type, props); // Should this check be gated by parent namespace? Not sure we want to // allow or . - if (!isCustomComponentTag && type !== type.toLowerCase()) { + if (!isCustomComponentTag && type !== lowerCaseType) { console.error( '<%s /> is using incorrect casing. ' + 'Use PascalCase for React components, ' + @@ -444,7 +446,7 @@ export function createElement( } } - if (type === 'script') { + if (lowerCaseType === 'script') { // Create the script via .innerHTML so its "parser-inserted" flag is // set to true and it does not execute const div = ownerDocument.createElement('div'); diff --git a/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js b/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js index f74186f87d..f07816b14f 100644 --- a/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js +++ b/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js @@ -242,4 +242,20 @@ describe('when Trusted Types are available in global object', () => { // check that the warning is printed only once ReactDOM.render(, container); }); + + it('should warn twice when rendering scRipt tag and prevent code execution on mistyped tag', () => { + expect(() => { + ReactDOM.render(, container); + }).toErrorDev([ + 'Warning: is using incorrect casing. ' + + 'Use PascalCase for React components, ' + + 'or lowercase for HTML elements.\n' + + ' in scRipt (at **)', + 'Warning: Encountered a script tag while rendering React component. ' + + 'Scripts inside React components are never executed when rendering ' + + 'on the client. Consider using template tag instead ' + + '(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n' + + ' in scRipt (at **)', + ]); + }); });