Warn for javascript: URLs in DOM sinks (#15047)

* Prevent javascript protocol URLs * Just warn when disableJavaScriptURLs is false This avoids a breaking change. * Allow framesets * 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. * Detect leading and intermediate characters and test mixed case These are considered valid javascript urls by browser so they must be included in the filter. This is an exact match according to the spec but maybe we should include a super set to be safer? * Test updates to ensure we have coverage there too * Fix toString invocation and Flow types Right now we invoke toString twice when we hydrate (three times with the flag off). Ideally we should only do it once even in this case but the code structure doesn't really allow for that right now. * s/itRejects/itRejectsRendering * Dedupe warning and add the unsafe URL to the warning message * Add test that fails if g is added to the sanitizer This only affects the prod version since the warning is deduped anyway. * Fix prod test
facebook · Mar 11, 2019 · 103378b · 103378b
1 parent 5d0c3c6
commit 103378b
Show file tree

Hide file tree

Showing 14 changed files with 451 additions and 22 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.internal.js
@@ -0,0 +1,271 @@
+/**
+ * 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
+ */
+
+/* eslint-disable no-script-url */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let React;
+let ReactDOM;
+let ReactDOMServer;
+
+function runTests(itRenders, itRejectsRendering, expectToReject) {
+  itRenders('a http link with the word javascript in it', async render => {
+    const e = await render(
+      <a href="http://javascript:0/thisisfine">Click me</a>,
+    );
+    expect(e.tagName).toBe('A');
+    expect(e.href).toBe('http://javascript:0/thisisfine');
+  });
+
+  itRejectsRendering('a javascript protocol href', async render => {
+    // Only the first one warns. The second warning is deduped.
+    const e = await render(
+      <div>
+        <a href="javascript:notfine">p0wned</a>
+        <a href="javascript:notfineagain">p0wned again</a>
+      </div>,
+      1,
+    );
+    expect(e.firstChild.href).toBe('javascript:notfine');
+    expect(e.lastChild.href).toBe('javascript:notfineagain');
+  });
+
+  itRejectsRendering(
+    'a javascript protocol with leading spaces',
+    async render => {
+      const e = await render(
+        <a href={'  \t \u0000\u001F\u0003javascript\n: notfine'}>p0wned</a>,
+        1,
+      );
+      // We use an approximate comparison here because JSDOM might not parse
+      // \u0000 in HTML properly.
+      expect(e.href).toContain('notfine');
+    },
+  );
+
+  itRejectsRendering(
+    'a javascript protocol with intermediate new lines and mixed casing',
+    async render => {
+      const e = await render(
+        <a href={'\t\r\n Jav\rasCr\r\niP\t\n\rt\n:notfine'}>p0wned</a>,
+        1,
+      );
+      expect(e.href).toBe('javascript:notfine');
+    },
+  );
+
+  itRejectsRendering('a javascript protocol area href', async render => {
+    const e = await render(
+      <map>
+        <area href="javascript:notfine" />
+      </map>,
+      1,
+    );
+    expect(e.firstChild.href).toBe('javascript:notfine');
+  });
+
+  itRejectsRendering('a javascript protocol form action', async render => {
+    const e = await render(<form action="javascript:notfine">p0wned</form>, 1);
+    expect(e.action).toBe('javascript:notfine');
+  });
+
+  itRejectsRendering(
+    'a javascript protocol button formAction',
+    async render => {
+      const e = await render(<input formAction="javascript:notfine" />, 1);
+      expect(e.getAttribute('formAction')).toBe('javascript:notfine');
+    },
+  );
+
+  itRejectsRendering('a javascript protocol input formAction', async render => {
+    const e = await render(
+      <button formAction="javascript:notfine">p0wned</button>,
+      1,
+    );
+    expect(e.getAttribute('formAction')).toBe('javascript:notfine');
+  });
+
+  itRejectsRendering('a javascript protocol iframe src', async render => {
+    const e = await render(<iframe src="javascript:notfine" />, 1);
+    expect(e.src).toBe('javascript:notfine');
+  });
+
+  itRejectsRendering('a javascript protocol frame src', async render => {
+    const e = await render(
+      <html>
+        <head />
+        <frameset>
+          <frame src="javascript:notfine" />
+        </frameset>
+      </html>,
+      1,
+    );
+    expect(e.lastChild.firstChild.src).toBe('javascript:notfine');
+  });
+
+  itRejectsRendering('a javascript protocol in an SVG link', async render => {
+    const e = await render(
+      <svg>
+        <a href="javascript:notfine" />
+      </svg>,
+      1,
+    );
+    expect(e.firstChild.getAttribute('href')).toBe('javascript:notfine');
+  });
+
+  itRejectsRendering(
+    'a javascript protocol in an SVG link with a namespace',
+    async render => {
+      const e = await render(
+        <svg>
+          <a xlinkHref="javascript:notfine" />
+        </svg>,
+        1,
+      );
+      expect(
+        e.firstChild.getAttributeNS('http://www.w3.org/1999/xlink', 'href'),
+      ).toBe('javascript:notfine');
+    },
+  );
+
+  it('rejects a javascript protocol href if it is added during an update', () => {
+    let container = document.createElement('div');
+    ReactDOM.render(<a href="thisisfine">click me</a>, container);
+    expectToReject(() => {
+      ReactDOM.render(<a href="javascript:notfine">click me</a>, container);
+    });
+  });
+}
+
+describe('ReactDOMServerIntegration - Untrusted URLs', () => {
+  function initModules() {
+    jest.resetModuleRegistry();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMServer = require('react-dom/server');
+
+    // Make them available to the helpers.
+    return {
+      ReactDOM,
+      ReactDOMServer,
+    };
+  }
+
+  const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+
+  beforeEach(() => {
+    resetModules();
+  });
+
+  runTests(itRenders, itRenders, fn =>
+    expect(fn).toWarnDev(
+      '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 ' +
+        'dangerouslySetInnerHTML instead. React was passed "javascript:notfine".\n' +
+        '    in a (at **)',
+    ),
+  );
+});
+
+describe('ReactDOMServerIntegration - Untrusted URLs - disableJavaScriptURLs', () => {
+  function initModules() {
+    jest.resetModuleRegistry();
+    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.disableJavaScriptURLs = true;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMServer = require('react-dom/server');
+
+    // Make them available to the helpers.
+    return {
+      ReactDOM,
+      ReactDOMServer,
+    };
+  }
+
+  const {
+    resetModules,
+    itRenders,
+    itThrowsWhenRendering,
+    clientRenderOnBadMarkup,
+    clientRenderOnServerString,
+  } = ReactDOMServerIntegrationUtils(initModules);
+
+  const expectToReject = fn => {
+    let msg;
+    try {
+      fn();
+    } catch (x) {
+      msg = x.message;
+    }
+    expect(msg).toContain(
+      'React has blocked a javascript: URL as a security precaution.',
+    );
+  };
+
+  beforeEach(() => {
+    resetModules();
+  });
+
+  runTests(
+    itRenders,
+    (message, test) =>
+      itThrowsWhenRendering(message, test, 'blocked a javascript: URL'),
+    expectToReject,
+  );
+
+  itRenders('only the first invocation of toString', async render => {
+    let expectedToStringCalls = 1;
+    if (render === clientRenderOnBadMarkup) {
+      // It gets called once on the server and once on the client
+      // which happens to share the same object in our test runner.
+      expectedToStringCalls = 2;
+    }
+    if (render === clientRenderOnServerString && __DEV__) {
+      // The hydration validation calls it one extra time.
+      // TODO: It would be good if we only called toString once for
+      // consistency but the code structure makes that hard right now.
+      expectedToStringCalls = 2;
+    }
+
+    let toStringCalls = 0;
+    let firstIsSafe = {
+      toString() {
+        // This tries to avoid the validation by pretending to be safe
+        // the first times it is called and then becomes dangerous.
+        toStringCalls++;
+        if (toStringCalls <= expectedToStringCalls) {
+          return 'https://fb.me/';
+        }
+        return 'javascript:notfine';
+      },
+    };
+
+    const e = await render(<a href={firstIsSafe} />);
+    expect(toStringCalls).toBe(expectedToStringCalls);
+    expect(e.href).toBe('https://fb.me/');
+  });
+
+  it('rejects a javascript protocol href if it is added during an update twice', () => {
+    let container = document.createElement('div');
+    ReactDOM.render(<a href="thisisfine">click me</a>, container);
+    expectToReject(() => {
+      ReactDOM.render(<a href="javascript:notfine">click me</a>, container);
+    });
+    // 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.
+    expectToReject(() => {
+      ReactDOM.render(<a href="javascript:notfine">click me</a>, container);
+    });
+  });
+});