Fix mistyped script arbitrary code execution vulnerability (#18660)

* add test to trustedTypes-test.internal.js

* fix mistyped script arbitrary code execution

* Removed redundant .toLowerCase() call

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>

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 <SVG> or <mATH>.
-      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');

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(<script>alert("I am not executed")</script>, container);
   });
+
+  it('should warn twice when rendering scRipt tag and prevent code execution on mistyped tag', () => {
+    expect(() => {
+      ReactDOM.render(<scRipt>alert("I am not executed")</scRipt>, container);
+    }).toErrorDev([
+      'Warning: <scRipt /> 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 **)',
+    ]);
+  });
 });