Where is data stored in Leaflet

Question

I have a leaflet app up and running using plain Leaflet, HTML, CSS and JS. Currently, it's just in a folder with an index.html file, a main.js file, and a folder with all my data. The data is geojson data. I ultimately want the data I'm working with to be inaccessible to users when I put it online. I'm looking for a big picture, outline of how I should solve this problem.

I'm considering using something like MongoDB to store my data, but there are no precedents or tutorials online on how to do exactly this with Leaflet. It also seems to require a lot of changes to my code and trying to add express and node(?) to my app. Any ideas or links to examples would be greatly appreciated.

Answer 1

You are thinking in the wrong direction with MongoDB as this does not protect your data in any additional way.

It is not possible to serve a plain HTML web page, instead the data is hidden - as anyone can find access in the HTML source code.

What you need is a third-party provider that supports OAuth, for example:

• Sign in with Apple
• Google OAuth Access
• Sign in with Amazon
• HUAWEI Account Service

They will issue you a JWT as shown in the Huawei documentation below, then on the server side you need to validate the token and decide whether to provide the data.

Even then, authorized customers may obtain and distribute your data.

I know this stuff because as a hobby developer I wrote 2 web games and I'm using these 4 services (there are more) to authenticate users.

This is my server-side Java code sample for verifying Huawei Account Kit:

private void handleHuaweiAuth(HttpServletRequest httpReq, HttpServletResponse httpResp) throws ServletException, IOException {
    String error            = httpReq.getParameter("error");
    String errorDescription = httpReq.getParameter("error_description");
    String code             = httpReq.getParameter("code");
    String state            = httpReq.getParameter("state");

    // use hash of salt and current month name as CSRF protection
    String month = md5("PUT SOME SECRET HERE"   Calendar.getInstance().getDisplayName(Calendar.MONTH, Calendar.LONG, Locale.ENGLISH));

    if (error != null) {
        throw new ServletException(error   ": "   errorDescription);
        
    } else if (code != null && month.equals(state)) {
        MultiMap postParams = new MultiMap();
        postParams.put("code",          code);
        postParams.put("client_id",     HUAWEI_ID);
        postParams.put("client_secret", HUAWEI_SECRET);
        postParams.put("redirect_uri",  String.format(HUAWEI_REDIRECT_URI, mLanguage));
        postParams.put("grant_type",    "authorization_code");
        
        try {
            String tokenStr = mHttpClient.POST(HUAWEI_TOKEN_URL)
                .headers(httpFields ->
                {
                    httpFields.add(new HttpField(HttpHeader.ACCEPT, APPLICATION_JSON));
                    httpFields.add(new HttpField(HttpHeader.CONTENT_TYPE, APPLICATION_URLENCODED));
                })
                .body(new StringRequestContent(UrlEncoded.encode(postParams, StandardCharsets.UTF_8, false)))
                .send().getContentAsString();
            LOG.info("handleHuaweiAuth tokenStr = {}", tokenStr);
            Map tokenMap = (Map) new JSON().fromJSON(tokenStr);
            //String accessToken = tokenMap.get("access_token");
            //String refreshToken = tokenMap.get("refresh_token");

            // NOTE: the code is only valid for 1 usage.
            // If the user reloads this page, then the following will be returned:
            // {"sub_error":20156,"error_description":"code used twice","error":1101}
            // parsing token will result in NPE caught below and redirect to front page

            String idToken = tokenMap.get("id_token");
            Map idMap = parseJwt(idToken);
            String sid    = idMap.get("sub"); 
            String photo  = idMap.get("picture");
            String given  = idMap.get("given_name");
            String family = idMap.get("family_name");

            printGameApp(httpReq, httpResp, HUAWEI, sid, given, family, photo);
            return;
        } catch (InterruptedException | TimeoutException | ExecutionException | NullPointerException ex) {
            LOG.warn("handleHuaweiAuth", ex);
            // redirect to the front page
            httpResp.sendRedirect("/");
            return;
        }
    }
}