javascript - 如何防止用户从查询参数访问 JSON 数据？

Question

我正在开发一个非常简单的网络应用程序来搜索公司的股票。

JS代码如下(使用AJAX从服务器获取公司股票):

document.getElementById("requestQuoteBtn").addEventListener("click", function createQuoteRequest(){
    var quoteSymbol = document.getElementById("requestedSymbol").value;
    var quoteRequest = createAJAX();

    quoteRequest.open('GET', '/quote?sym='+quoteSymbol);
    quoteRequest.send();

    quoteRequest.onload = function getQuoteRequest(){
        if(quoteRequest.status == 200){ // SUCCESSFUL
            displayQuoteData(false, JSON.parse(quoteRequest.response)); // basically shows a hidden div with the data
        }
        else // NO COMPANY W/ THIS SYMBOL FOUND
            displayQuoteData(true, null);
    };
});

这是 Flask 代码:

@app.route("/quote", methods=["GET"])
@login_required
def quote():
    requestedSymbol = request.args.get("sym")
    if not requestedSymbol:
        return "no symbol"

    quoteData = lookup(requestedSymbol) # USES AN API TO FETCH COMPANY'S STOCK

    if quoteData is None:
        return "NONE", 404
    else:
        return quoteData

问题是，如果用户访问，例如，这个 URL:

www.mywebsite.com/quote?sym=AAPL

它会直接显示带有 JSON 数据的原始 HTML，而不是带有数据的我的网站:

{"name":"Apple, Inc.","price":"$245.18","symbol":"AAPL"}

我怎样才能避免这种情况？

Answer 1

如果您只是想确保用户在尝试访问您的网站时不会意外访问您的 api 端点(也就是关于用户体验，您不关心向您的 API 端点添加身份验证)

最简单的方法是为您的 api 和客户端路由创建单独的路由

更新:

@app.route("/api/quote", methods=["GET"])

同样更新:

quoteRequest.open('GET', '/api/quote?sym='+quoteSymbol);

您的客户端路由仍然是:

@app.route("/quote", methods=["GET"])

如果您想确保没有人可以访问您的 api 端点，那么您需要向您的端点添加某种授权。

如果您没有通过某种授权来保护您的 API，那么任何人都可以通过访问路由来访问您从服务器 API 返回的数据。

无论哪种方式，为您的 API 端点和客户端路由设置单独的路由都应该可以解决访问时显示 API 数据而不是您的客户端模板的问题:

mywebsite.com/quote?sym=AAPL