Dedupe warning and add the unsafe URL to the warning message

Author: sebmarkbage

packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.internal.js

@@ -27,8 +27,16 @@ function runTests(itRenders, itRejectsRendering, expectToReject) {
   });
 
   itRejectsRendering('a javascript protocol href', async render => {
-    const e = await render(<a href="javascript:notfine">p0wned</a>, 1);
-    expect(e.href).toBe('javascript:notfine');
+    // 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(
@@ -162,7 +170,7 @@ describe('ReactDOMServerIntegration - Untrusted URLs', () => {
     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.\n' +
+        'dangerouslySetInnerHTML instead. React was passed "javascript:notfine".\n' +
         '    in a (at **)',
     ),
   );

packages/react-dom/src/shared/sanitizeURL.js

@@ -29,19 +29,23 @@ if (__DEV__) {
 /* eslint-disable max-len */
 const isJavaScriptProtocol = /^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*\:/i;
 
+let didWarn = false;
+
 function sanitizeURL(url: string) {
   if (disableJavaScriptURLs) {
     invariant(
       !isJavaScriptProtocol.test(url),
       'React has blocked a javascript: URL as a security precaution.%s',
       __DEV__ ? ReactDebugCurrentFrame.getStackAddendum() : '',
     );
-  } else if (__DEV__) {
+  } else if (__DEV__ && !didWarn && isJavaScriptProtocol.test(url)) {
+    didWarn = true;
     warning(
-      !isJavaScriptProtocol.test(url),
+      false,
       '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.',
+        'using dangerouslySetInnerHTML instead. React was passed %s.',
+      JSON.stringify(url),
     );
   }
 }