I am creating a JS API that is made to fetch data from my website. To use the API, user is required to include the script in their website html. The API will then display data from my website into their website accordingly. I am using ajax to call the endpoint url of my website.
However, insecurity concern is that, malicious user can create their own API and call the endpoint url.
I was thinking of checking server HTTP_REFERER, getting script id then checking the src of the script. However, the server HTTP_REFERER can be changed programmatically.
Is there a way to prevent user from changing JS script location or checking if the script src has been changed? Or in general, how can I prevent user from using their own script or cURL to call my endpoint url?
I am using PHP LARAVEL as backend language.
I think there is no certain way to prevent this on the client side. It's always right to secure the backend. To authorize users, try using OAuth 2.0; Laravel passport is a good implementation. This will secure your APIs.
Related
I have a Wordpress site with users, and a separate Flask app with logic for responding to Get/Post requests from the WordPress site.
I am able to get the current user into a JavaScript variable on the WP site and send to the Flask app - however how do I ensure that someone cannot pretend to be a different current user, or make this secure to other potential vulnerabilities?
Is there some way of exposing a token or suchlike to JavaScript on the WP side, which then the Flask app can verify, say by using the WordPress API?
We would likely need a little bit more detail to be sure the best way to solve, but it seems there are a few ways of approaching this.
You've said that you can get the user id into JavaScript. I'm presuming this means the browser is needing to make the connection to the Flask app. If you have the option of doing this with the WordPress site calling the Flask app directly (server-to-server) you can avoid a lot of hassle.
If you are able to send the request directly from the WordPress server to the Flask app, and the Flask app can check that the source of the request is the WordPress site (either by a shared secret, by checking the IP address the request came from, or just by filtering the traffic to the Flask app to only permit the WordPress server) then do that and you can be sure of the identity of the user making the request.
But if the request has to be made to the Flask app from the browser, then you could do this in a couple of general ways:
Encrypt the value from WP to Flask -- Create a shared secret on the server(s) which is used to encrypt or sign the user id. The WP site would generate the encrypted/signed version of the user id and send that to the browser. The browser javascript code would send this to the Flask app, which would (knowing the shared secret) decrypt the id or verify the signature. This is the simpliest method.
Use an opaque ID -- Generate a random number in the server-side code of the WP site, and record the user id that it was generated for. Send the random number to the browser, which sends it on to the Flask app. Flask then asks WordPress what the user id associated with that random number is.
You need to send the data directly from backend side, but if it depends on a frontend trigger, you can then send an AJAX request from JavaScript to backend in WP side.
jQuery.post( admin_ajax_url, { action: 'get_current_user' } );
and without the nopriv, This function will be triggered only for logged in users.
add_action( 'wp_ajax_get_current_user', 'ajax_get_current_user' );
inside the function, you can get the current user WP_User object and the user ID.
function ajax_get_current_user() {
$current_user_object = wp_get_current_user();
$current_user_id = get_current_user_id();
// Send the User details to flash App here...
}
This is a quick walkthrough of how it should be done. sure, AJAX request will need a nonce check, and sanitization for any passed data, etc.
More details about AJAX request in WP
https://developer.wordpress.org/plugins/javascript/ajax/
https://developer.wordpress.org/plugins/javascript/enqueuing/
https://jackreichert.com/2013/03/24/using-ajax-in-wordpress-development-the-quickstart-guide/
and the WP HTTP API for sending the data to the flask app
https://developer.wordpress.org/plugins/http-api/
You need WordPress Application Passwords. It's essentially a password for APIs.
In your case, you need to define the application password of the WordPress user in Flask, then Flask can send requests to the WordPress REST API as an authenticated user.
I'm building a website using ruby on rails which is hosted separately which makes requests to another backend api rails app which is again hosted separately. Obviously i've setup the backend api with token based oauth authentication.
Now since im not dealing with sessions, and it being stateless n all, How can I stop users from accessing certain view pages in my front end web app? For example, I have a consumer/booking page. I don't want the user to access this page without being logged in. But anyone can just enter the url and open any page they want right now.
On user login (ajax call from .js.erb files), im getting the token and storing it in localStorage variable for every future request to the api. I know I should use this token somehow to stop users from access restricted pages. But I just dont know how.
Now as you have stored the token in the localStorage, you will need to pass this token with the request to the page where you want to restrict access and check if the user is authorized to access the page or not.
TL;DR: there is no standard method or library for this; you must implement such functionality as you see fit.
I'm assuming you're using some sort of front end framework like react; if so, then any request to change the current view should be terminated if there is no valid token in localStorage. Check out this post regarding conditional rendering in React; if you're using something else, the methodology is still pretty much the same.
Otherwise, I would build a small script to include in the beginning of every page that checks whether or not there is a valid token and if there isn't, calls window.history.back() to return the user to the previous page.
(Another way of doing it is to intercept every call to a static HTML file on the server, check if there's a token, and send the file if there is. Otherwise, you can send a custom error page or whatever).
Background on the Application:
Embedded system that will connect to nest-api as a client to retrieve required data. This embedded system can connect to a wifi network and provides a web interface through which user can carry out authentication.
For authentication, currently the user is directed to
https://home.nest.com/login/oauth2...
and user can carry out the authorization procedure and get an 8-char PIN.
The user is then asked to input this PIN in a text box and submit it to the embedded web server which then requests the access_token (using C platform).
There are two questions related to this issue:
1) Is there a way to carry out request for access_token also from the client browser, and only return the access_token back to the embedded system? Any Javascript code that can request access_token after user inputs the PIN and submits?
2) The second issue is related to lack of automation. The user needs to type the PIN back in the web interface. Is there a way to extract the PIN from the website automatically using some script. For example, open the /login/oauth2 page embedded within another page and run a script on the main page to keep scanning the embedded page until the PIN becomes available (i.e. the user logs in and grants permissions). As soon as it becomes available, it can be copied and returned back to device web and access_token requested automatically.
I understand that this type of automation can be achieved by web-based authentication, but from my understanding that would require a proxy server for redirect URI. The idea is to make the device self-sufficient without a need for maintaining another server.
Yes, see the control-jquery sample code for an example of how to work with OAuth tokens in JavaScript
Nest allows you to use addresses that start with http://localhost or https:// as the OAuth Redirect URI. You can either run a web server locally, or monitor the WebView for a redirect URI pattern of your choice and parse the results.
I have a django app which need to receive post requests from another site using html+javascript.
For example i have mydjangosite.com and smallhtmlsite.com
What i want is : user visit smallhtmlsite.com and fill a form, then he pushing submit button and mydjangosite.com receive request and create objects(form saving models actually).
So i will have a view which will handle this requests. But how can these been done securely?
I have a django app which need to receive post requests from another
site using html+javascript.
You don't have to ! You can build an API instead ;)
You create an API call - small site calls the API of main site. In that situation, the form is handled by a view in small site and the API is called via the server. Check out Django REST Framework.
Note: That solution wouldn't stop you from using AJAX but it would avoid cross domain issues.
I am creating a chrome extension, rather a chrome webapp. This application just contains the html, js, image and css files. The application connects to a server to fetch data. I chose to do this as it would reduce the amount of files downloaded by the user. Using Backbone.js I have an MVC architecture in my application. Thus the application just sends json.
Now having said this, I need a session management. I plan to use Google authentication as the organization has Google Apps. I need a method that once the user has logged in using google auth the server get the user name every time the application makes a request.
Is it a good idea to add the user name in request header, if possible. Or should I use cookies? Can any one tell me how I could go about using cookies in this case?
This might be a late response but I want to present a more elegant solution to you given that the user has cookies enabled in their browser.
First read my answer on another question.
Now that you can send cross origin xhr from your content scripts all you need to do is store all your authentication and session management at server only. That is right, you just need to display whether the user is logged in or not and a logout button at client based on server response.
Just follow these steps.
At client Whenever user accesses your chrome web app, blindly make XmlHttpRequests to your server without worrying about authentication, just keep a tab on response from server which I describe below.
At server whenever you receive a request check for valid sessions or session cookie. If session is valid send proper response, if not send error, 401 or any other response to communicate to your client that session is not valid. It is better if you send an error code like 401 since then you can put a generic script at client to inform them that they are not logged in.
At Client If response from server is proper, display it, else display login link to your website.
IMPORTANT: Display logout button if user is logged in.
Check out my implementation of this in my extension
For help using Google authentication in your app take a look at Google's OAuth tutorial which comes with all you need (took me no time to set it up using this).
As for session management. The implementation of OAuth used by Google stores the tokens in localStorage. Also, as briefly mentioned in the extensions overview we are expected to use localStorage to store data. Thus, I suggest you store the users name here as it will be accessible throughout the app's lifetime (until it is uninstalled). However, you may need to manage the name stored here and consider what should happen when users log in and out. That said; I'm not sure if sessionStorage would be a better option as I've never used it before, let alone in an extension.
Note
localStorage and its counterparts only store strings so I suggest using a wrapper which uses JSON to parse and stringify to get and set your values respectively.