__data.json on page load

[hewliyang]

Hi, super beginner here so sorry if this is a dumb question. For reference here is my directory structure

├── lib
│   ├── data
│   │   └── bus_stops.json
│   └── stores
│       └── search.ts
└── routes
    ├── +layout.svelte
    ├── +page.svelte
    └── stop
        └── [stopName]
            ├── +page.server.ts
            └── +page.svelte

I'm using a private auth key to fetch bus arrival times at chosen bus stops in routes/stop/[stopName]/+page.server.ts. I want this to be an internal request only but I realized that users can sniff out the JSON response directly by using the /__data.json endpoint, where others can essentially use this endpoint as a proxy API for the original one without needed their own auth key.

Example is here

Can I avoid this? Can't really wrap my head around this.

Thanks!

[geoffrich]

Not a dumb question -- I had the same concern when first looking at SvelteKit. SvelteKit needs that __data.json endpoint to be available so it can fetch the data for a page when navigating. Other frameworks with client-side navigation and data loading (Remix, Next, Nuxt) do something similar. You can find more info in the glossary section of the docs.

In practice, I'm not sure how much of a concern this is. Though having a JSON endpoint makes it easier, people can still scrape your page's HTML for the data they need. However, there are a couple things you can do to make it more difficult to use the JSON endpoint:

1. Only return the data you need. If you are calling an API that returns a bunch of data, you can make it less useful for others to treat __data.json as a proxy API by only returning the data points the frontend needs instead of the full API response

const response = { stations: ["A", "B", "C"], otherInfo: { big: "object" } };
const data = { stations: response.stations }
return data; // "otherInfo" will not be exposed via __data.json

2. Disable client side navigation entirely. You can do this by adding the data-sveltekit-reload attribute to your root +layout.svelte (which will force a full-page refresh on every navigation). This way, SvelteKit doesn't need to use the __data.json response, though navigation may feel slower and client-side state will be lost on every navigation.

I think the __data.json endpoints will still be deployed, so you can implement a custom handle hook to block requests to __data.json. (Note: I haven't tried this myself, so not 100% sure it will work).

// src/hooks.server.js

/** @type {import('@sveltejs/kit').[Handle](https://kit.svelte.dev/docs/types#public-types-handle)} */
export async function handle({ event, resolve }) {
  // true when the request is for a `__data.json` endpoint
  // https://kit.svelte.dev/docs/types#public-types-requestevent
  if (event.isDataRequest) {
    return new Response(null, { status: 400 });
  }
 
  const response = await resolve(event);
  return response;
}

If it were me, I would do 1 and not worry about 2, though YMMV.

[sonyarianto]

Just noticed this as well, ya our web can be a proxy API of something because of this, but I am agree with you because web is open platform user can see anything (data, markup, storage data etc) via devtools or by scrape.

This is similar like my case, I have a web and I have API that call random photos from Unsplash on +page.server.ts, first I thought __data.json is only happen during development and then I noticed on production it also there.