Skip to content

Commit

Permalink
Escape bootstrapScriptContent for javascript embedding into HTML
Browse files Browse the repository at this point in the history
The previous escape was for Text into HTML and breaks script contents. The new escaping ensures that the script contents cannot prematurely close the host script tag by escaping script open and close string sequences using a unicode escape substitution.
  • Loading branch information
gnoff committed Apr 15, 2022
1 parent 726ba80 commit 11483ce
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 1 deletion.
107 changes: 107 additions & 0 deletions packages/react-dom/src/__tests__/escapeScriptForBrowser-test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @emails react-core
*/

'use strict';

let React;
let ReactDOMFizzServer;
let Stream;

function getTestWritable() {
const writable = new Stream.PassThrough();
writable.setEncoding('utf8');
const output = {result: '', error: undefined};
writable.on('data', chunk => {
output.result += chunk;
});
writable.on('error', error => {
output.error = error;
});
const completed = new Promise(resolve => {
writable.on('finish', () => {
resolve();
});
writable.on('error', () => {
resolve();
});
});
return {writable, completed, output};
}

describe('escapeScriptForBrowser', () => {
beforeEach(() => {
jest.resetModules();
React = require('react');
ReactDOMFizzServer = require('react-dom/server');
Stream = require('stream');
});

it('"<[Ss]cript" strings are replaced with unicode escaped lowercase s or S depending on case', () => {
const {writable, output} = getTestWritable();
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<div />, {
bootstrapScriptContent:
'"prescription pre<scription preScription pre<Scription"',
});
pipe(writable);
jest.runAllTimers();
expect(output.result).toMatch(
'<div></div><script>"prescription pre<\\u0073cription preScription pre<\\u0053cription"</script>',
);
});

it('"</[Ss]cript" strings are replaced with encoded lowercase s or S depending on case', () => {
const {writable, output} = getTestWritable();
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<div />, {
bootstrapScriptContent:
'"prescription pre</scription preScription pre</Scription"',
});
pipe(writable);
jest.runAllTimers();
expect(output.result).toMatch(
'<div></div><script>"prescription pre</\\u0073cription preScription pre</\\u0053cription"</script>',
);
});

it('"[Ss]cript", "/[Ss]cript", "<[Ss]crip", "</[Ss]crip" strings are not escaped', () => {
const {writable, output} = getTestWritable();
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<div />, {
bootstrapScriptContent:
'"Script script /Script /script <Scrip <scrip </Scrip </scrip"',
});
pipe(writable);
jest.runAllTimers();
expect(output.result).toMatch(
'<div></div><script>"Script script /Script /script <Scrip <scrip </Scrip </scrip"</script>',
);
});

it('matches case insensitively', () => {
const {writable, output} = getTestWritable();
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<div />, {
bootstrapScriptContent: '"<sCrIpT <ScripT </scrIPT </SCRIpT"',
});
pipe(writable);
jest.runAllTimers();
expect(output.result).toMatch(
'<div></div><script>"<\\u0073CrIpT <\\u0053cripT </\\u0073crIPT </\\u0053CRIpT"</script>',
);
});

it('does not escape <, >, &, \\u2028, or \\u2029 characters', () => {
const {writable, output} = getTestWritable();
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<div />, {
bootstrapScriptContent: '"<, >, &, \u2028, or \u2029"',
});
pipe(writable);
jest.runAllTimers();
expect(output.result).toMatch(
'<div></div><script>"<, >, &, \u2028, or \u2029"</script>',
);
});
});
3 changes: 2 additions & 1 deletion packages/react-dom/src/server/ReactDOMServerFormatConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ import {validateProperties as validateUnknownProperties} from '../shared/ReactDO
import warnValidStyle from '../shared/warnValidStyle';

import escapeTextForBrowser from './escapeTextForBrowser';
import escapeScriptForBrowser from './escapeScriptForBrowser';
import hyphenateStyleName from '../shared/hyphenateStyleName';
import hasOwnProperty from 'shared/hasOwnProperty';
import sanitizeURL from '../shared/sanitizeURL';
Expand Down Expand Up @@ -102,7 +103,7 @@ export function createResponseState(
if (bootstrapScriptContent !== undefined) {
bootstrapChunks.push(
inlineScriptWithNonce,
stringToChunk(escapeTextForBrowser(bootstrapScriptContent)),
stringToChunk(escapeScriptForBrowser(bootstrapScriptContent)),
endInlineScript,
);
}
Expand Down
37 changes: 37 additions & 0 deletions packages/react-dom/src/server/escapeScriptForBrowser.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

import {checkHtmlStringCoercion} from 'shared/CheckStringCoercion';

const scriptRegex = /(<\/|<)(s)(cript)/gi;
const scriptReplacer = (match, prefix, s, suffix) =>
`${prefix}${substitutions[s]}${suffix}`;
const substitutions = {
s: '\\u0073',
S: '\\u0053',
};

/**
* Escapes javascript for embedding into HTML.
*
* @param {*} scriptText Text value to escape.
* @return {string} An escaped string.
*/
function escapeScriptForBrowser(scriptText) {
if (typeof scriptText === 'boolean' || typeof scriptText === 'number') {
// this shortcircuit helps perf for types that we know will never have
// special characters, especially given that this function is used often
// for numeric dom ids.
return '' + scriptText;
}
if (__DEV__) {
checkHtmlStringCoercion(scriptText);
}
return ('' + scriptText).replace(scriptRegex, scriptReplacer);
}

export default escapeScriptForBrowser;

0 comments on commit 11483ce

Please sign in to comment.