skip to Main Content

I’m doing a MERN stack (MongoDB, Express, React, Node) project in which I need to make a HTTP request, in a React component, to the database to get a field of a model. I’m using Axios (could use any other method) but the thing is I want to hide the URL but don’t know how.

The important thing for me is to get the "category" field and display it in the component

import React, {useState, useEffect} from "react"
import Heading from "../../common/Heading"

import "./Location.css"
import axios from 'axios'


const Location = () => {

  const [locations, setLocations] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios.get('http://localhost:5000/properties/categories'//this is what I want to hide);
      setLocations(result.data);
    };
    fetchData();
  }, []);


  return (
    <>
      <section className='location padding'>
        <div className='container'>
          <Heading title='Explore By Location' subtitle='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.' />

          <div className='content grid3 mtop'>
            {locations.map((item, index) => (
              <div className='box' key={index}>
                <img src={} alt='' />
                <div className='overlay'>
                  <h5>{}</h5>
                  <p>
                    <label>{}</label>
                    <label>{}</label>
                    <label>{}</label>
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  )
}

export default Location

This code isn’t finished just in case. Server is set up with Express and Mongoose as a way to interact with MongoDB.

Someone told me that they make only POST requests without URLs, send always the same JSON, then encrypt the JSON parse used in the backend in base 64 and point all requests to the same URL.

I know leaving a URL like that in the frontend isn’t a good idea even though it doesn’t GET any sensitive info, just don’t know if when finished it’ll pass the SSL certificate test.

Also my app doesn’t have and use sensitive information at all and all requests are GETs to see info that is stored in DB

2

Answers


  1. You can find workarounds to generate your URL string on the runtime, but that really does not worth the efforts, as you’ll be sending these requests from the client’s browser to your backend, they can inspect the network tab and see the outgoing requests to your backend, and that’s fine.

    You can shift your focus, to working on having a better and more secure communication between your front-end and backend. For example:

    • Use HTTPS so you encrypt your POST request bodies, if you still didn’t get one, you may want to use Let’s encrypt for now.
    • Protect your API endpoints with authentication, rate limiting, API keys and CORS (see recommendations from OWASP).
    • Do not expose any secrets on the front-end, React does not need to know anything about your database (host, ip, username, etc). Your backend express application is your proxy to the database, and (express) should communicate in a secure way with MongoDB.
    Login or Signup to reply.
  2. Use environment variables
    Use a proxy server or a backend platform as a service (BaaS)
    Use a secure hosting platform

    const API_KEY = import.meta.env.VITE_API_KEY
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search