Skip to content
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.

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

Convert ReactDOMServerIntegrationUntrustedURL-test.js to createRoot #28105

Merged
merged 4 commits into from
Jan 26, 2024
Merged
Changes from 1 commit
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,10 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio

let React;
let ReactDOM;
let ReactDOMClient;
let ReactDOMServer;
let ReactTestUtils;
let act;

const EXPECTED_SAFE_URL =
"javascript:throw new Error('React has blocked a javascript: URL as a security precaution.')";
Expand All @@ -34,8 +36,10 @@ describe('ReactDOMServerIntegration - Untrusted URLs', () => {
jest.resetModules();
React = require('react');
ReactDOM = require('react-dom');
ReactDOMClient = require('react-dom/client');
ReactDOMServer = require('react-dom/server');
ReactTestUtils = require('react-dom/test-utils');
act = require('internal-test-utils').act;

// Make them available to the helpers.
return {
Expand Down Expand Up @@ -167,11 +171,16 @@ describe('ReactDOMServerIntegration - Untrusted URLs', () => {
},
);

it('rejects a javascript protocol href if it is added during an update', () => {
it('rejects a javascript protocol href if it is added during an update', async () => {
const container = document.createElement('div');
ReactDOM.render(<a href="thisisfine">click me</a>, container);
expect(() => {
ReactDOM.render(<a href="javascript:notfine">click me</a>, container);
const root = ReactDOMClient.createRoot(container);
await act(async () => {
root.render(<a href="thisisfine">click me</a>);
});
await expect(async () => {
await act(() => {
root.render(<a href="javascript:notfine">click me</a>);
});
}).toErrorDev(
'Warning: A future version of React will block javascript: URLs as a security precaution. ' +
'Use event handlers instead if you can. If you need to generate unsafe HTML try using ' +
Expand All @@ -195,7 +204,6 @@ describe('ReactDOMServerIntegration - Untrusted URLs - disableJavaScriptURLs', (
ReactFeatureFlags.disableJavaScriptURLs = true;

React = require('react');
ReactDOM = require('react-dom');
mattcarrollcode marked this conversation as resolved.
Show resolved Hide resolved
ReactDOMServer = require('react-dom/server');
ReactTestUtils = require('react-dom/test-utils');

Expand Down Expand Up @@ -325,11 +333,16 @@ describe('ReactDOMServerIntegration - Untrusted URLs - disableJavaScriptURLs', (
},
);

it('rejects a javascript protocol href if it is added during an update', () => {
it('rejects a javascript protocol href if it is added during an update', async () => {
const container = document.createElement('div');
ReactDOM.render(<a href="http://thisisfine/">click me</a>, container);
const root = ReactDOMClient.createRoot(container);
await act(()=>{
root.render(<a href="http://thisisfine/">click me</a>);
})
expect(container.firstChild.href).toBe('http://thisisfine/');
ReactDOM.render(<a href="javascript:notfine">click me</a>, container);
await act(()=>{
root.render(<a href="javascript:notfine">click me</a>);
})
expect(container.firstChild.href).toBe(EXPECTED_SAFE_URL);
});

Expand Down Expand Up @@ -369,15 +382,22 @@ describe('ReactDOMServerIntegration - Untrusted URLs - disableJavaScriptURLs', (
expect(e.href).toBe('https://reactjs.org/');
});

it('rejects a javascript protocol href if it is added during an update twice', () => {
it('rejects a javascript protocol href if it is added during an update twice', async () => {
const container = document.createElement('div');
ReactDOM.render(<a href="http://thisisfine/">click me</a>, container);
const root = ReactDOMClient.createRoot(container);
await act(async () => {
root.render(<a href="http://thisisfine/">click me</a>);
});
expect(container.firstChild.href).toBe('http://thisisfine/');
ReactDOM.render(<a href="javascript:notfine">click me</a>, container);
await act(async () => {
root.render(<a href="javascript:notfine">click me</a>);
});
expect(container.firstChild.href).toBe(EXPECTED_SAFE_URL);
// The second update ensures that a global flag hasn't been added to the regex
// which would fail to match the second time it is called.
ReactDOM.render(<a href="javascript:notfine">click me</a>, container);
await act(async () => {
root.render(<a href="javascript:notfine">click me</a>);
});
expect(container.firstChild.href).toBe(EXPECTED_SAFE_URL);
});
});