How can I protect my endpoints?

[xiayulu]

Hello, I am using svelteKit building my app. I ran into a problem: How can I protect endpoints?

Here is my folder structure:

src:.
│  app.css
│  app.html
│  global.d.ts
│  hooks.js
│  stores.js
├─lib
│      db.js
│      helpers.js
│      logger.js
│      Login.svelte
│      Register.svelte
└─routes
    │  index.svelte
    │  login.svelte
    │  __layout.svelte
    ├─api
    │  │  captcha.js
    │  │  login.js
    │  ├─auths
    │  │      index.js
    │  └─profiles
    │          index.js
    │          [profileId].js
    └─profile
            index.svelte

I put my endpoints under the folder routes/api. When a page need data:

fetch("/api/profiles")
.then(res=>res.json())
.then(data=>{
    // using data
})
.catch(err=>{
    // handle err
})

This works fine, But the problem is: Everybody can open api/profiles directly in the browser.

How can I protect my endpoints?

[benthillerkus]

Either in the endpoint or in hooks.js you can check if the request is authorised - for example by using the Authorization HTTP header

[xiayulu]

Authorization is a nice idea. Besides, I want set CORS and only my own domain is allowed to access the endpoints.

[benthillerkus]

Keep in mind that only browsers are respecting CORS

[carlosfernandezcabrero]

And setting allowed domains?