Skip to content

Commit

Permalink
Fix escaping in action error URL
Browse files Browse the repository at this point in the history
  • Loading branch information
sebmarkbage committed Aug 22, 2023
1 parent 31034b6 commit c5f1dfa
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -501,7 +501,7 @@ function setProp(
// eslint-disable-next-line no-script-url
"javascript:throw new Error('" +
'A React form was unexpectedly submitted. If you called form.submit() manually, ' +
"consider using form.requestSubmit() instead. If you're trying to use " +
"consider using form.requestSubmit() instead. If you\\'re trying to use " +
'event.stopPropagation() in a submit event handler, consider also calling ' +
'event.preventDefault().' +
"')",
Expand Down
64 changes: 64 additions & 0 deletions packages/react-dom/src/__tests__/ReactDOMForm-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,8 @@ describe('ReactDOMForm', () => {
(submitter && submitter.getAttribute('formaction')) || form.action;
if (!/\s*javascript:/i.test(action)) {
throw new Error('Navigate to: ' + action);
} else {
Function(action.substr(11))();
}
});
}
Expand Down Expand Up @@ -922,4 +924,66 @@ describe('ReactDOMForm', () => {
await act(() => resolveText('Wait'));
assertLog(['Async action finished', 'No pending action']);
});

function emulateForceSubmit(submitter) {
const form = submitter.form || submitter;
const action =
(submitter && submitter.getAttribute('formaction')) || form.action;
if (!/\s*javascript:/i.test(action)) {
throw new Error('Navigate to: ' + action);
} else {
Function(action.substr(11))();
}
}

// @gate enableFormActions
it('should error if submitting a form manually', async () => {
const ref = React.createRef();
let foo;

function action(formData) {
foo = formData.get('foo');
}

let error = null;
let result = null;

function emulateForceSubmit(submitter) {
const form = submitter.form || submitter;
const action =
(submitter && submitter.getAttribute('formaction')) || form.action;
if (!/\s*javascript:/i.test(action)) {
throw new Error('Navigate to: ' + action);
} else {
try {
result = Function(action.substr(11))();
} catch (x) {
error = x;
}
}
}

const root = ReactDOMClient.createRoot(container);
await act(async () => {
root.render(
<form
action={action}
ref={ref}
onSubmit={e => {
e.preventDefault();
emulateForceSubmit(e.target);
}}>
<input type="text" name="foo" defaultValue="bar" />
</form>,
);
});

// This submits the form, which gets blocked and then resubmitted. It's a somewhat
// common idiom but we don't support this pattern unless it uses requestSubmit().
await submit(ref.current);
expect(result).toBe(null);
expect(error.message).toContain(
'A React form was unexpectedly submitted. If you called form.submit()',
);
});
});

0 comments on commit c5f1dfa

Please sign in to comment.