Skip to content

Commit 96cdeaf

Browse files
authored
[Fizz Node] Fix null bytes written at text chunk boundaries (#26228)
We encode strings 2048 UTF-8 bytes at a time. If the string we are encoding crosses to the next chunk but the current chunk doesn't fit an integral number of characters, we need to make sure not to send the whole buffer, only the bytes that are actually meaningful. Fixes #24985. I was able to verify that this fixes the repro shared in the issue (be careful when testing because the null bytes do not show when printed to my terminal, at least). However, I don't see a clear way to add a test for this that will be resilient to small changes in how we encode the markup (since it depends on where specific multibyte characters fall against the 2048-byte boundaries).
1 parent ca2cf31 commit 96cdeaf

File tree

2 files changed

+18
-3
lines changed

2 files changed

+18
-3
lines changed

packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -635,4 +635,17 @@ describe('ReactDOMFizzServerNode', () => {
635635
expect(rendered).toBe(false);
636636
expect(isComplete).toBe(true);
637637
});
638+
639+
it('should encode multibyte characters correctly without nulls (#24985)', () => {
640+
const {writable, output} = getTestWritable();
641+
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
642+
<div>{Array(700).fill('ののの')}</div>,
643+
);
644+
pipe(writable);
645+
jest.runAllTimers();
646+
expect(output.result.indexOf('\u0000')).toBe(-1);
647+
expect(output.result).toEqual(
648+
'<div>' + Array(700).fill('ののの').join('<!-- -->') + '</div>',
649+
);
650+
});
638651
});

packages/react-server/src/ReactServerStreamConfigNode.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,12 +75,14 @@ function writeStringChunk(destination: Destination, stringChunk: string) {
7575
writtenBytes += written;
7676

7777
if (read < stringChunk.length) {
78-
writeToDestination(destination, (currentView: any));
78+
writeToDestination(
79+
destination,
80+
(currentView: any).subarray(0, writtenBytes),
81+
);
7982
currentView = new Uint8Array(VIEW_SIZE);
8083
writtenBytes = textEncoder.encodeInto(
8184
stringChunk.slice(read),
82-
// $FlowFixMe[incompatible-call] found when upgrading Flow
83-
currentView,
85+
(currentView: any),
8486
).written;
8587
}
8688

0 commit comments

Comments
 (0)