Skip to content

Warn for javascript: URLs in DOM sinks #15047

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.

Sign up for GitHub

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

Merged
merged 11 commits into from
Mar 11, 2019
Merged

Warn for javascript: URLs in DOM sinks #15047

Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d56a22f
Allow framesets
sebmarkbage Mar 7, 2019
38a27cb
Allow <html> to be used in integration tests
sebmarkbage Mar 7, 2019
968e0a0
Prevent javascript protocol URLs
sebmarkbage Mar 6, 2019
3c7e4d4
Just warn when disableJavaScriptURLs is false
sebmarkbage Mar 6, 2019
8f89a99
Detect leading and intermediate characters and test mixed case
sebmarkbage Mar 7, 2019
b9af765
Test updates to ensure we have coverage there too
sebmarkbage Mar 7, 2019
138f834
Fix toString invocation and Flow types
sebmarkbage Mar 11, 2019
8d9b293
s/itRejects/itRejectsRendering
sebmarkbage Mar 11, 2019
38d6287
Dedupe warning and add the unsafe URL to the warning message
sebmarkbage Mar 11, 2019
be4f5c8
Add test that fails if g is added to the sanitizer
sebmarkbage Mar 11, 2019
c8979c0
Fix prod test
sebmarkbage Mar 11, 2019
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
Prev Previous commit
Next Next commit
Allow <html> to be used in integration tests 
Full document renders requires server rendering so the client path
just uses the hydration path in this case to simplify writing these tests.
  • Loading branch information
@sebmarkbage
sebmarkbage committed Mar 11, 2019
commit 38a27cb98541dd5c9fea8a985d03ace4cf9cfb57
77 changes: 57 additions & 20 deletions packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,28 @@ module.exports = function(initModules) {
({ReactDOM, ReactDOMServer} = initModules());
}

function shouldUseDocument(reactElement) {
// Used for whole document tests.
return reactElement && reactElement.type === 'html';
}

function getContainerFromMarkup(reactElement, markup) {
if (shouldUseDocument(reactElement)) {
const doc = document.implementation.createHTMLDocument('');
doc.open();
doc.write(
markup ||
'<!doctype html><html><meta charset=utf-8><title>test doc</title>',
);
doc.close();
return doc;
} else {
const container = document.createElement('div');
container.innerHTML = markup;
return container;
}
}

// Helper functions for rendering tests
// ====================================

Expand Down Expand Up @@ -97,9 +119,7 @@ module.exports = function(initModules) {
// Does not render on client or perform client-side revival.
async function serverRender(reactElement, errorCount = 0) {
const markup = await renderIntoString(reactElement, errorCount);
const domElement = document.createElement('div');
domElement.innerHTML = markup;
return domElement.firstChild;
return getContainerFromMarkup(reactElement, markup).firstChild;
}

// this just drains a readable piped into it to a string, which can be accessed
Expand Down Expand Up @@ -133,27 +153,28 @@ module.exports = function(initModules) {
// Does not render on client or perform client-side revival.
async function streamRender(reactElement, errorCount = 0) {
const markup = await renderIntoStream(reactElement, errorCount);
const domElement = document.createElement('div');
domElement.innerHTML = markup;
return domElement.firstChild;
return getContainerFromMarkup(reactElement, markup).firstChild;
}

const clientCleanRender = (element, errorCount = 0) => {
const div = document.createElement('div');
return renderIntoDom(element, div, false, errorCount);
if (shouldUseDocument(element)) {
// Documents can't be rendered from scratch.
return clientRenderOnServerString(element, errorCount);
}
const container = document.createElement('div');
return renderIntoDom(element, container, false, errorCount);
};

const clientRenderOnServerString = async (element, errorCount = 0) => {
const markup = await renderIntoString(element, errorCount);
resetModules();

const domElement = document.createElement('div');
domElement.innerHTML = markup;
let serverNode = domElement.firstChild;
let container = getContainerFromMarkup(element, markup);
let serverNode = container.firstChild;

const firstClientNode = await renderIntoDom(
element,
domElement,
container,
true,
errorCount,
);
Expand All @@ -178,19 +199,35 @@ module.exports = function(initModules) {

const clientRenderOnBadMarkup = async (element, errorCount = 0) => {
// First we render the top of bad mark up.
const domElement = document.createElement('div');
domElement.innerHTML =
'<div id="badIdWhichWillCauseMismatch" data-reactroot="" data-reactid="1"></div>';
await renderIntoDom(element, domElement, true, errorCount + 1);

let container = getContainerFromMarkup(
element,
shouldUseDocument(element)
? '<html><body><div id="badIdWhichWillCauseMismatch" /></body></html>'
: '<div id="badIdWhichWillCauseMismatch" data-reactroot="" data-reactid="1"></div>',
);

await renderIntoDom(element, container, true, errorCount + 1);

// This gives us the resulting text content.
const hydratedTextContent = domElement.textContent;
const hydratedTextContent =
container.lastChild && container.lastChild.textContent;

// Next we render the element into a clean DOM node client side.
const cleanDomElement = document.createElement('div');
await asyncReactDOMRender(element, cleanDomElement, true);
let cleanContainer;
if (shouldUseDocument(element)) {
// We can't render into a document during a clean render,
// so instead, we'll render the children into the document element.
cleanContainer = getContainerFromMarkup(element, '<html></html>')
.documentElement;
element = element.props.children;
} else {
cleanContainer = document.createElement('div');
}
await asyncReactDOMRender(element, cleanContainer, true);
// This gives us the expected text content.
const cleanTextContent = cleanDomElement.textContent;
const cleanTextContent =
cleanContainer.lastChild && cleanContainer.lastChild.textContent;

// The only guarantee is that text content has been patched up if needed.
expect(hydratedTextContent).toBe(cleanTextContent);
Expand Down