When src or srcSet is a data URI we should not preload the image

facebook · Aug 11, 2023 · f62c901 · f62c901
1 parent 4e3618a
commit f62c901
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 3 deletions.
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -2392,14 +2392,31 @@ function pushImg(
   props: Object,
   resources: Resources,
 ): null {
+  const {src, srcSet} = props;
   if (
     props.loading !== 'lazy' &&
-    typeof props.src === 'string' &&
-    props.fetchPriority !== 'low'
+    typeof src === 'string' &&
+    props.fetchPriority !== 'low' &&
+    // We exclude data URIs in src and srcSet since these should not be preloaded
+    !(
+      src[4] === ':' &&
+      (src[0] === 'd' || src[0] === 'D') &&
+      (src[1] === 'a' || src[1] === 'A') &&
+      (src[2] === 't' || src[2] === 'T') &&
+      (src[3] === 'a' || src[3] === 'A')
+    ) &&
+    !(
+      typeof srcSet === 'string' &&
+      srcSet[4] === ':' &&
+      (srcSet[0] === 'd' || srcSet[0] === 'D') &&
+      (srcSet[1] === 'a' || srcSet[1] === 'A') &&
+      (srcSet[2] === 't' || srcSet[2] === 'T') &&
+      (srcSet[3] === 'a' || srcSet[3] === 'A')
+    )
   ) {
     // We have a suspensey image and ought to preload it to optimize the loading of display blocking
     // resources.
-    const {src, srcSet, sizes} = props;
+    const {sizes} = props;
     const key = getImagePreloadKey(src, srcSet, sizes);
     let resource = resources.preloadsMap.get(key);
     if (!resource) {

diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -3969,6 +3969,36 @@ body {
     );
   });
 
+  it('should not preload images that have a data URIs for src or srcSet', async () => {
+    function App() {
+      return (
+        <html>
+          <body>
+            <img src="data:1" />
+            <img src="data:2" srcSet="ss2" />
+            <img srcSet="data:3a, data:3b 2x" />
+            <img src="4" srcSet="data:4a, data4b 2x" />
+          </body>
+        </html>
+      );
+    }
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <img src="data:1" />
+          <img src="data:2" srcset="ss2" />
+          <img srcset="data:3a, data:3b 2x" />
+          <img src="4" srcset="data:4a, data4b 2x" />
+        </body>
+      </html>,
+    );
+  });
+
   describe('ReactDOM.prefetchDNS(href)', () => {
     it('creates a dns-prefetch resource when called', async () => {
       function App({url}) {