Repository: facebook/react
File: packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js (JavaScript)

Code before:
}

const formReplayingRuntimeScript =
  stringToPrecomputedChunk(formReplayingRuntime);

function injectFormReplayingRuntime(
  resumableState: ResumableState,
  renderState: RenderState,
): void {
  // If we haven't sent it yet, inject the runtime that tracks submitted JS actions
  // for later replaying by Fiber. If we use an external runtime, we don't need
  // to emit anything. It's always used.
  if (
    (resumableState.instructions & SentFormReplayingRuntime) === NothingSent &&
    (!enableFizzExternalRuntime || !renderState.externalRuntimeScript)
  ) {
    resumableState.instructions |= SentFormReplayingRuntime;
    const preamble = renderState.preamble;
    const bootstrapChunks = renderState.bootstrapChunks;
    if (
      (preamble.htmlChunks || preamble.headChunks) &&
      bootstrapChunks.length === 0
    ) {
      // If we rendered the whole document, then we emitted a rel="expect" that needs a
      // matching target. If we haven't emitted that yet, we need to include it in this
      // script tag.
      bootstrapChunks.push(renderState.startInlineScript);
      pushCompletedShellIdAttribute(bootstrapChunks, resumableState);
      bootstrapChunks.push(
        endOfStartTag,
        formReplayingRuntimeScript,
        endInlineScript,
      );
    } else {
      // Otherwise we added to the beginning of the scripts. This will mean that it
      // appears before the shell ID unfortunately.
      bootstrapChunks.unshift(
        renderState.startInlineScript,
        endOfStartTag,
        formReplayingRuntimeScript,
        endInlineScript,
      );
    }
  }
}

const formStateMarkerIsMatching = stringToPrecomputedChunk('<!--F!-->');
const formStateMarkerIsNotMatching = stringToPrecomputedChunk('<!--F-->');

export function pushFormStateMarkerIsMatching(
  target: Array<Chunk | PrecomputedChunk>,

Review comment (security):
I'm not following how this doesn't lead to possible duplicate writing of the id.

If we included it as part of the bootstrap scripts and sent the shell and then later we render a form that requires this runtime the bootstrapChunks will be empty and we'll end up emitting it again.

it may just require that we track whether the bootstrap scripts were actually emitted. Or maybe we just do the template trick and never try to use this script as a vehicle for the expected id.

Also, i don't understand how in the above implementation you are deciding whether or not this runtime injection is happening within the shell vs at arbitrary later point. If we knew it was the shell we could then use the bootstrapChunks.length === 0 as the signal that no other thing was about to emit this id but I don't think that actually works here

Code after:
): void {
  // If we haven't sent it yet, inject the runtime that tracks submitted JS actions
  // for later replaying by Fiber. If we use an external runtime, we don't need
  // to emit anything. It's always used.
  if (
    (resumableState.instructions & SentFormReplayingRuntime) === NothingSent &&
    (!enableFizzExternalRuntime || !renderState.externalRuntimeScript)
  ) {
    resumableState.instructions |= SentFormReplayingRuntime;
    const preamble = renderState.preamble;
    const bootstrapChunks = renderState.bootstrapChunks;
    if (
      (preamble.htmlChunks || preamble.headChunks) &&
      bootstrapChunks.length === 0
    ) {
      // If we rendered the whole document, then we emitted a rel="expect" that needs a
      // matching target. If we haven't emitted that yet, we need to include it in this
      // script tag.
      bootstrapChunks.push(renderState.startInlineScript);
      pushCompletedShellIdAttribute(bootstrapChunks, resumableState);
      bootstrapChunks.push(
        endOfStartTag,
        formReplayingRuntimeScript,
        endInlineScript,
      );
    } else {
      // Otherwise we added to the beginning of the scripts. This will mean that it
      // appears before the shell ID unfortunately.
      bootstrapChunks.unshift(
        renderState.startInlineScript,
        endOfStartTag,
        formReplayingRuntimeScript,
        endInlineScript,
      );
    }
  }
}

const formStateMarkerIsMatching = stringToPrecomputedChunk('<!--F!-->');
const formStateMarkerIsNotMatching = stringToPrecomputedChunk('<!--F-->');

export function pushFormStateMarkerIsMatching(
  target: Array<Chunk | PrecomputedChunk>,
) {
  target.push(formStateMarkerIsMatching);
}

export function pushFormStateMarkerIsNotMatching(
  target: Array<Chunk | PrecomputedChunk>,
) {
  target.push(formStateMarkerIsNotMatching);