Home
Support Forums

Block people from surfing to assets folder

site name: worthashot.netlify.app
domain: https://www.worthashot.be/

Hi,

I would like to block people from using the browser to surf to my assets folder.
Mainly so the JSON files like https://www.worthashot.be/assets/i18n/en.json aren’t visible by visiting the URL.

I have tried adding following redirects to the src/_redirects file:
/assets/* /index.html 301
/assets/* /index.html 200
/assets/* /index.html 400
/assets/* /index.html

This did not help, is there any way to do this?

Kind regards
Ruben

Hi @rubenszeker

I guess my first question is how people are going to know you have a JSON file (or other files) in that location?

Rather than worrying about trying to hide/block files, you store data in a database (for instance) and use APIs and functions to retrieve when required. Perhaps a service such as Sanity could work. Here is the Jamstack Explorers Mission using Sanity and Nuxt.

Hi @coelmay,

  1. People with bad intentions / competitors can just go to the network tab and see the the requested files there.

  2. On long term that is indeed what we plan to do, but it’s kind of low down our priority list because of various reasons but I assume there’s an easier solution such as just simply adding a blocking statement. Which is a better fit solution for our use case.

@rubenszeker Does your src/_redirects file get written to a _redirects file at the top level of your project files? That’s where it needs to be.

Yes, _redirects file works properly because other redirects work.

Hi, @rubenszeker. All site access for Netlify sites is client side access. In other words, it is always access via a browser from the point of view of our hosting.

If you block “browser” access to those URLs they files won’t be accessible at all. Are you sure that is what you really want to do? If so, you can “force” the URLs to return 404 like so:

/assets/* /index.html 404!

Again though, if you do so, those files will completely stop working at all - regardless of how that are accessed.

If you want to make sure only logged in people can access the files you can use Netlify identity and role based access control:

If there are other questions, reply anytime.

1 Like

Not exactly what I’m looking for. I want the website itself to be able to access the files, but not allow clients to view the raw files, but maybe that’s not possible then? Regardless of the technology used? However, I’m fairly sure I’ve seen it on a website before.

You could create a serverless function that reads this file and returns the data. get-data.js

const data = require('./data/somedatafile.json');

exports.handler = async () => {
  return {
    statusCode: 200,
    body: JSON.stringify(data),
  };
};

Thus the JSON file itself it not directly accessible via the browser.

You the have a client-side script along the lines of load-data.js

export async function loadData() {
    const data = await fetch('/.netlify/functions/get-data')
        .then((res) => res.json())
        .catch((err) => console.error(err));

  // Rest of your script
}

You could of course write the serverless function to only return a portion of the JSON data.

2 Likes

Hi, @rubenszeker. If you are using server side processing then, yes, it is possible for site code to access files on the server which are not available via public URLs. However, Netlify is designed for Jamstack sites and there is no server side processing with Jamstack sites. (Note, there are limited exceptions to this with examples being Functions and Edge Handlers.) We have a support guide about this here.

@coelmay, the one issue I see with your solution is that it just changes the URL where the JSON data can be accessed but it doesn’t prevent it. It doesn’t make finding the JSON data any harder to do. It just changes the URL. The information can still be accessed with external HTTP requests. The new URL will be discoverable in the network tab of devtools in the exact same way that the original request for the JSON file was.

Now, it is possible to gate that behind authentication but that requires some sort of sign-up, login, and session tracking which is typically done with our service using JWTs as described above.

@rubenszeker, you might also consider creating APIs to send the only the data needed for an individual page.

If you want to further gate access to an API because it requires an API key and you don’t want the API key in the client side javascript (because now all site visitors would have your key), the is another support guide about keeping API keys private using Functions here:

2 Likes