Best way to handle API calls from frontend

问题

Okay, so atm i have a frontend application built with Nuxt JS using Axios to do requests to my REST API(separate).

If a user does a search on the website the API URL is visible in XMLHttprequests so everyone could use the API if they want to.

What is the best way of making it so that only users that search through my website gets access to the API and people that just directly to the URL gets denied. I suppose using some sort of token system, but what is the best way to do it? JWT? (Users never log in so there is no "authentication")

Thanks!

回答1:

1. IMO, you CANNOT block other illegal clients accessing your backend as you describe that the official client and other illegal have the same knowledge about your backend.
2. But you can make it harder for illegal clients to accessing your backend through some approach such as POST all requests, special keys in header, 30-minutes-changed token in header and server-side API throttling by client IP.
3. If the security of the search API is really important, authenticate it by login; if not, just let it go since it is not in your critical path. Let's focus on other important things.

回答2:

I'm in the same "boat" and my current setup is actually in VueJs but before even come to StackOverflow I developed a way to actually, the frontend calls the server and then the server calls the API, so in the browser, you will only see calls to the server layer that, the only constraint is that the call must come from the same hostname.

backend is handled with expressJs and frontend with VueJs

// protect /api calls to only be originated from 'process.env.API_ALLOW_HOST'
app.use(api.allowOnlySameDomainRequests());

...

const allowHostname = process.env.API_ALLOW_HOST ||'localhost';

exports.api = {
    ...
    allowOnlySameDomainRequests: (req, res, next) => {
        if(req.url.startsWith('/api') && req.hostname === allowHostname) {
            // an /api call, only if request is the same
            return next();
        } else if (!req.url.startsWith('/api')) {
            // not an /api call
            return next();
        }

        return res.redirect('/error?code=401');
    },
    ...
};

In our case, we use Oauth2 (Google sign through passportJs) to log in the user, I always have a user id that was given by the OAuth2 successful redirect and that user id is passed to the API in a header, together with the apikey... in the server I check for that userid permissions and I allow or not the action to be executed.

But even I was trying to find something better. I've seen several javascript frontend apps using calls to their backend but they use Bearer tokens.

As a curious user, you would see the paths to all the API and how they are composed, but in my case, you only see calls to the expressJs backend, and only there I forward to the real API... I don't know if that's just "more work", but seemed a bit more "secure" to approach the problem this way.

来源：https://stackoverflow.com/questions/47841937/best-way-to-handle-api-calls-from-frontend