So i am writing a little app that compares a user's position against a database on web-based server written
using Django and performs some functions with it.
Accessing the browser's geolocation data (in supported browsers ) is fairly trivial using JavaScript. But what is the best way to allow
the Django server to access the longitude and latitude variables? Is it best to wrap them up as a JSON object and
send to the server via POST? Or is there some easier (Geo)Django-based way to access the Navigator.geolocation browser
object.
Please forgive a newbie a question like this, but my Google-Fuing only seems to find ways to insert variables into
JavaScript via template tag, whereas I need it to work the other way!
Any advice or code snippets greatly appreciated. Feel free to talk to me like I am an idiot.
You will indeed need to POST your location data to a Django view.
If all you need is simple distance calculations, take a look at Geopy.
If you want to interact with the ORM and filter/search based on location, you'll want to look at GeoDjango.
Navigator.geolocation is only available on the client side. You'll have to send the data back to the server using Javascript, such as via a POST (as you surmised).
Related
I need to develop a simple webapp with a login system, users and data saved to each one of those users, with no knowlege of PHP or Data bases, only HTML, JavaScript/JQuery and JSON.
I must be able to sign up, log in and save some data (it's an online store, i must be able to save purchases historic, list of avourite products, user preferences, etc), all this locally only.
What is the best way to do this?
Security issues are not relevant.
I'm sorry for the bad english, I'm not a native speaker.
Hope you can help me!
You can use localstorage to use it as a db engine, but it is really limited,
You can use IndexedDB to use a localdb for you webapp.
Than will help you yo achieve your goals.
Remember that only moderm browser support IndexedDB, so you can check if your browser support it, else you can send a message for the user, to update the browser or fallback to localstorage
Since you are not using PHP, i would Recommend looking into using Node.js for the server-side part of your app. Node.js is written with javascript, so it will be relatively easy to learn.
On the website, you can use HTML forms to send data to the server using JSON. The other parts of your app can be built using HTML, CSS and javascript.
Although i recommend using SQL, there are other ways to store data like using MongoDB.
Right now I am writing a client-side javascript app that makes a request to the USPS Price Calculator API. In order to make this request, I need to provide my API User ID in the xml of the request. The tag looks like this:
<RateV4Request USERID="ThisIsWhereMyUserIdGoes">. My question is this: is there any way I can provide my user ID to the javascript, while still hiding it from users who look at the client-side files. Right now, the only solution I have is to create a PHP file in my server that has the User ID, then using an AJAX request in the client-side javascript to store it in a global variable. It looks like this:
var userID;
$.get("/secrets.php", function( data ) {
userID = data;
});
Is this an adequate way of keeping my API User ID from being seen by the users of my app? What else could I do?
In short: No, you can't secure your API key in a client-side app.
This article goes into some more detail
Two options
Make the API calls server-side and then serve information to the client from there
Require the client use their own API keys
If you are reading this page in 2020 and don’t want to develop server-side code for whatever reasons(saving hosting cost, etc), severless function might be the solution.
This also calls 3rd party API from the server-side, but you don’t have to develop a full-fledged server-side API proxy.
Netlify has documentation on this. I guess other providers like AWS lambda, Google cloud function offers similar things but not sure.
https://github.com/netlify/code-examples/tree/master/function_examples/token-hider
Pros
No server management
Cons
Vendor lock-in
Even with your PHP solution you can't hide your userId. It can be easily printed in browser console by accessing consle.log(userId);. As far as I know anything that is available to client-side is vulnerable and can easily be decoded. Even if you obfuscate your api key it can still be decoded from clientside.
The right thing to do is to create a PHP wrapper around the API calls that require keys, and then call that wrapper from Javascript.
In the past, I usually have just embedded the values I need passed into html data elements and then read them from there via JavaScript. However, I know there's a more proper way to do so. In particular, I'd like to learn how implement the first method mentioned in this blog post. However, I'd also like to know what the best way to pass data from server-side to client side is when you're not using ajax.
EDIT: Since I'm still pretty unsure, let me explain what I'm trying do to. I'm creating a page with a lot of dynamic content on it that is dependent on reading from a database. I want to be able to load the page's static content first. Then, using jQuery, I want to make an ayschronous HTTP get request to the server to read from the database and retrieve the information I need. Finally, if I need more information from the database, I want to be able to request the server for more information without having to reload the page.
"When you're not using ajax"!?!? - Start!
If you're dead set on not making a service request to the server, there are the following ways:
Hidden form fields - so <input type=hidden value=xyz >
PageMethods - ok this is ajax, but it's simple, see here http://aspalliance.com/1922_PageMethods_In_ASPNET_AJAX.2>http://aspalliance.com/1922_PageMethods_In_ASPNET_AJAX.2
Best way.... is to do it properly, implement webapi and send down JSON then on the client end interpret that with Javascript.
Edit: your edit paints a different picture. I thought you just wanted a single piece of data, but it sounds like you need a proper api, so go with webapi, and use jQuery to make the calls, then populate through code, or jQuery templates(the best option).
I have an online storage account that I`m using for my homepage. Basically I have just made an "index.html" and stored there . and no php , asp is possible .
So If I must create a message form on the homepage and store the message in a separate text file in JSON format ,can it be done using javascript ?
also I need to query the Text file whenver I want to display the messages using javascript .
So far , I tried TaffyDB but realised it doesn`t have a way to persist the data after session closes. or maybe I missed something?
Thanks!
Short answer. No.
The JavaScript is client side. So it can do all sorts of cool stuff on the persons computer that visits your site but unless you're running some server side code that takes the JSON encoded data and does something with it then you're out of luck.
There are many alternatives.
If you don't want to run your own server side code then you could use a separate service like Parse.com that does REST and has a comprehensive API.
A mobile website can access Parse data from Javascript.
A webserver can show data from Parse on a website.
You can upload large amounts of data that will later be consumed in a mobile app.
You can download recent data to run your own custom analytics.
Applications written in any programming language can interact with data on Parse.
You can export all of your data if you no longer want to use Parse.
You can try with jQuery/AJAX. To read:
$.get("path_to_file", null, function(fileData) {
alert(fileData);
/* Your code goes here */
}, "text");
But in order to write, I think the only way is with some server-side language (PHP, ASP, etc)
The short answer is no.
You need to have some server-side support to persist the data on that server. You can, however, use client-side javascript to relay the information to a server that DOES support reading and writing of the data of course.
Technically, node.js is javascript that does support file reading and writing - but I assume that's out of the question for your environment :)
One crazy way (just as a thought experiment) to implement persistent storage for your web application without server side support is to have the clients talk to each other through P2P. This is possible with Flash or some java applet..etc. So as long as one client is up (perhaps your own comupter!), you'll have some form of persistent storage. Your server/webpage simply serves up this embedded object which does the actual work.
How can I store data on the clients side securely (not viewable/visible) in javascript.
In particular, I want to grab an array from the database with PHP and then use that array for autosuggestion data. Currently I am setting the array as a JS variable, however it can be seen in the html page source code.
I have looked at autosuggestions online and came across: http://www.brandspankingnew.net/specials/ajax_autosuggest/ajax_autosuggest_autocomplete.html
I cannot find where the autosuggestion data is being stored, which is what I want for my script. Help!
No, what you are trying to do is impossible. Javascript is being run by the client and thus the client has absolute control over the data. If you are trying to store a secret in javascript then an attacker can use a debugger to see it in memory. But this is the worst case. Its easier a lot easier to manipulate the traffic with TamperData, or manipulate the javascript directly with Greasemonkey.
If it is sensitive data like usernames or passwords, you shouldn't auto suggest anything. If it is not sensitive data, the AJAX solution from your link is the obvious way to go, but you could easily store it in a cookie if it is not more than 4kb, or in various cookies otherwise.