Skip to content

Float: Stringify crossorigin="anonymous" #28958

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

Float: Stringify crossorigin="anonymous" #28958

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
48b7d8e
Current behavior for Float ignoring crossorigin on img
eps1lon Apr 30, 2024
4685e50
Float: Add support for `crossOrigin="anonymous"`
eps1lon Apr 30, 2024
82d10cf
Add test to verify crossOrigin does not factor into keying
eps1lon Apr 30, 2024
d5bdae7
Use something other than anon to showcase keying
eps1lon Apr 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/react-dom-bindings/src/shared/crossOriginStrings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export opaque type CrossOriginString: string = string;

export function getCrossOriginString(input: ?string): ?CrossOriginString {
if (typeof input === 'string') {
return input === 'use-credentials' ? input : '';
return input === 'use-credentials' || input === 'anonymous' ? input : '';
}
return undefined;
}
Expand All @@ -24,7 +24,7 @@ export function getCrossOriginStringAs(
return '';
}
if (typeof input === 'string') {
return input === 'use-credentials' ? input : '';
return input === 'use-credentials' || input === 'anonymous' ? input : '';
}
return undefined;
}
16 changes: 13 additions & 3 deletions packages/react-dom/src/__tests__/ReactDOMFizzStaticFloat-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,12 @@ describe('ReactDOMFizzStaticFloat', () => {
crossorigin="use-credentials"
integrity="module-hash"
/>,
<link rel="preload" as="style" href="style anon" crossorigin="" />,
<link
rel="preload"
as="style"
href="style anon"
crossorigin="anonymous"
/>,
<link rel="preload" as="script" href="script anon" crossorigin="" />,
<link
rel="modulepreload"
Expand Down Expand Up @@ -207,7 +212,7 @@ describe('ReactDOMFizzStaticFloat', () => {
rel="stylesheet"
data-precedence="default"
href="style anon"
crossorigin=""
crossorigin="anonymous"
/>
</head>
<body>
Expand All @@ -231,7 +236,12 @@ describe('ReactDOMFizzStaticFloat', () => {
crossorigin="use-credentials"
integrity="module-hash"
/>
<link rel="preload" as="style" href="style anon" crossorigin="" />
<link
rel="preload"
as="style"
href="style anon"
crossorigin="anonymous"
/>
<link rel="preload" as="script" href="script anon" crossorigin="" />
<link
rel="modulepreload"
Expand Down
85 changes: 85 additions & 0 deletions packages/react-dom/src/__tests__/ReactDOMFloat-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3918,6 +3918,88 @@ body {
);
});

it('should handle crossOrigin on image preload', async () => {
function App() {
return (
<html>
<body>
<img src="foo.png" crossOrigin="anonymous" />
<img src="bar.png" crossOrigin="" />
</body>
</html>
);
}

await act(() => {
renderToPipeableStream(<App />).pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
<html>
<head>
<link
rel="preload"
as="image"
crossorigin="anonymous"
href="foo.png"
/>
<link rel="preload" as="image" crossorigin="" href="bar.png" />
</head>
<body>
<img src="foo.png" crossorigin="anonymous" />
<img src="bar.png" crossorigin="" />
</body>
</html>,
);

ReactDOMClient.hydrateRoot(document, <App />);
await waitForAll([]);
expect(getMeaningfulChildren(document)).toEqual(
<html>
<head>
<link
rel="preload"
as="image"
crossorigin="anonymous"
href="foo.png"
/>
<link rel="preload" as="image" crossorigin="" href="bar.png" />
</head>
<body>
<img src="foo.png" crossorigin="anonymous" />
<img src="bar.png" crossorigin="" />
</body>
</html>,
);
});

it('does not include crossOrigin when keying image preloads', async () => {
function App() {
return (
<html>
<body>
<img src="foo.png" crossOrigin="" />
<img src="foo.png" crossOrigin="use-credentials" />
</body>
</html>
);
}

await act(() => {
renderToPipeableStream(<App />).pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
<html>
<head>
<link rel="preload" as="image" crossorigin="" href="foo.png" />
</head>
<body>
<img src="foo.png" crossorigin="" />
<img src="foo.png" crossorigin="use-credentials" />
</body>
</html>,
);
});

it('can emit preloads for non-lazy images that are rendered', async () => {
function App() {
ReactDOM.preload('script', {as: 'script'});
Expand Down Expand Up @@ -5307,6 +5389,7 @@ body {
<link rel="preconnect" href="foo" />
<link rel="preconnect" href="foo" crossorigin="" />
<link rel="preconnect" href="foo" crossorigin="use-credentials" />
<link rel="preconnect" href="foo" crossorigin="anonymous" />
</head>
<body>hello world</body>
</html>,
Expand All @@ -5324,8 +5407,10 @@ body {
<link rel="preconnect" href="foo" />
<link rel="preconnect" href="foo" crossorigin="" />
<link rel="preconnect" href="foo" crossorigin="use-credentials" />
<link rel="preconnect" href="foo" crossorigin="anonymous" />
<link rel="preconnect" href="bar" />
<link rel="preconnect" href="bar" crossorigin="" />
<link rel="preconnect" href="bar" crossorigin="anonymous" />
<link rel="preconnect" href="bar" crossorigin="use-credentials" />
</head>
<body>hello world</body>
Expand Down
44 changes: 32 additions & 12 deletions packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1407,22 +1407,32 @@ describe('ReactFlightDOM', () => {
<head>
<link rel="dns-prefetch" href="d before" />
<link rel="preconnect" href="c before" />
<link rel="preconnect" href="c2 before" crossorigin="" />
<link rel="preconnect" href="c2 before" crossorigin="anonymous" />
<link rel="preload" as="style" href="l before" />
<link rel="modulepreload" href="lm before" />
<link rel="modulepreload" href="lm2 before" crossorigin="" />
<link rel="modulepreload" href="lm2 before" crossorigin="anonymous" />
<script async="" src="i before" />
<script type="module" async="" src="m before" />
<script type="module" async="" src="m2 before" crossorigin="" />
<script
type="module"
async=""
src="m2 before"
crossorigin="anonymous"
/>
<link rel="dns-prefetch" href="d after" />
<link rel="preconnect" href="c after" />
<link rel="preconnect" href="c2 after" crossorigin="" />
<link rel="preconnect" href="c2 after" crossorigin="anonymous" />
<link rel="preload" as="style" href="l after" />
<link rel="modulepreload" href="lm after" />
<link rel="modulepreload" href="lm2 after" crossorigin="" />
<link rel="modulepreload" href="lm2 after" crossorigin="anonymous" />
<script async="" src="i after" />
<script type="module" async="" src="m after" />
<script type="module" async="" src="m2 after" crossorigin="" />
<script
type="module"
async=""
src="m2 after"
crossorigin="anonymous"
/>
</head>
<body />
</html>,
Expand Down Expand Up @@ -1599,22 +1609,32 @@ describe('ReactFlightDOM', () => {
<head>
<link rel="dns-prefetch" href="d before" />
<link rel="preconnect" href="c before" />
<link rel="preconnect" href="c2 before" crossorigin="" />
<link rel="preconnect" href="c2 before" crossorigin="anonymous" />
<link rel="dns-prefetch" href="d after" />
<link rel="preconnect" href="c after" />
<link rel="preconnect" href="c2 after" crossorigin="" />
<link rel="preconnect" href="c2 after" crossorigin="anonymous" />
<script async="" src="i before" />
<script type="module" async="" src="m before" />
<script type="module" async="" src="m2 before" crossorigin="" />
<script
type="module"
async=""
src="m2 before"
crossorigin="anonymous"
/>
<script async="" src="i after" />
<script type="module" async="" src="m after" />
<script type="module" async="" src="m2 after" crossorigin="" />
<script
type="module"
async=""
src="m2 after"
crossorigin="anonymous"
/>
<link rel="preload" as="style" href="l before" />
<link rel="modulepreload" href="lm before" />
<link rel="modulepreload" href="lm2 before" crossorigin="" />
<link rel="modulepreload" href="lm2 before" crossorigin="anonymous" />
<link rel="preload" as="style" href="l after" />
<link rel="modulepreload" href="lm after" />
<link rel="modulepreload" href="lm2 after" crossorigin="" />
<link rel="modulepreload" href="lm2 after" crossorigin="anonymous" />
</head>
<body>
<p>hello world</p>
Expand Down