Navigating to http://localhost// causes a security exception

[f0rk]

Originally from: remix-run/react-router#3168

When attempting to set pathname to "//" you will receive a security error similar to the following:

Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'http:' cannot be created in a document with origin 'http://localhost'.

This is because it attempts to push // onto the history, which is interpreted as a scheme-relative URL.

[mjackson]

Well, either the browsers throw or we will. You probably shouldn't be pushing that path.

[taion]

We should probably handle this on our side to keep consistent behavior between what happens with the History API and what happens when using the full refresh fallback.

[f0rk]

So close this issue and reopen remix-run/react-router#3168 ?

[taion]

No – it still needs to be handled on the history side. Among other things, this limitation only arises with browser history (or other histories that use the HTML5 history API). It won't arise with hash history or memory history.

Among other things, history.push doesn't even go through any code in the router.

[mjackson]

All I'm saying is we should probably just throw here if you try and push a path like that. So it's either we throw or the browser does.

[taion]

Via an invariant, of course, so we can have an error message that gets stripped out for production builds 😀

[mjackson]

I decided to handle this via a warning instead. We already warn about paths with protocols and/or domains attached. Protocol-relative URLs are just another case of the same problem.

[necolas]

The drawback with only warning is that it doesn't account for weird URLs linking to your app or site. So we've had to patch this issue in our wrapper around history.

[mjackson]

@necolas What does your patch do? Do you try to guess the right URL and redirect?

[necolas]

This is what we do:

import { useRouterHistory } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import useScroll from '../scroll-behavior';

const REGEX_LEADING_SLASHES = /^\/\/+/;
/**
 * Fixes relative paths with multiple leading slashes
 */
export const fixProtocolRelativeUrls = (history, location) => {
  const { pathname, search, hash } = location;
  if (pathname && REGEX_LEADING_SLASHES.test(pathname)) {
    const normalizedPathname = pathname.replace(leadingSlashes, '/');
    const newPath = normalizedPathname + search + hash;
    history.replace(newPath);
  }
};

let history;
const _createBrowserHistory = () => {
  if (!history) {
    history = useScroll(useRouterHistory(createBrowserHistory));
    fixProtocolRelativeUrls(history, window.location);
  }
  return history;
};

export default _createBrowserHistory();