React/Security - Can React routes be inspected?

Question

I'm using react-router-dom to support routing. I want to take a shortcut for supporting an admin screen, but want to know that it's relatively safe to do so.

I want to support a route similar to /admin12345 (so admin with a random pre-defined string). Could this be somehow made visible if someone were inspecting the website?

See code below:

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/admin12345" component={AdminPage} />
        <Route path="/" component={HomePage} />
      </Switch>
    </Router>
  )
}

This would be seen by inspection. You could make an API endpoint on the server side to fetch the admin url if the user has permission. Also why see so much effort with hiding the url, as long as it's not the default and you have solid authentication it shouldn't be a big secret. — rrebase, May 03 '20 at 05:56

score 1 · Answer 1 · answered May 03 '20 at 05:57

If a client is able to access your admin page w/ react-router from a page, you MUST be serving that client the route names.

So, to answer the question: Yes, absolutely -- a determined bad actor would be able to find your admin route. Depending on your build pipeline, that path is likely to be in un-obfuscated plaintext in your served source files. If you don't implement any rate limiting, a determined bad actor could also make requests to your potential admin paths to find your route (well, unless the route name is really long, but if you're serving that route to the client w/ react-router, a determined bad actor will find it).

You need some kind of password protection OR IP whitelisting in front of your admin page functionality.

This StackOverflow answer has some general principles for securing sensitive pages What are best practices for securing the admin section of a website?

React/Security - Can React routes be inspected?

1 Answers1