In attached image button is disabled by default based on access, however if i delete the property highlighted it gets enabled & user can able to perform actions.
Please do provide solution to restrict it.
Please see image attached related to issue with chrome Developer tool
You can't stop the user from doing that. Its their browser, and it's entirely in their control. Any user can manipulate the page in any way they choose, and run any script they choose from the console, etc etc. If the have the knowledge and inclination, they can do as they please. If they want to change the page to try and make a malicious or incorrect submission of they data, they can.
The mitigation you can (and must) put in place is to check and sanitise all data coming into your server-side API to guard against what is coming from the client being malicious or otherwise inappropriate.
Bear in mind your API just accepts HTTP requests, there's nothing to say a client even needs to use your web app to make requests, they could use a tool like PostMan or any other HTTP client to attack it. They can bypass the browser completely. So you have to apply all permissions, data checking etc on the server first to ensure security. If you then apply it on the browser-based web app, that's nice but you have to regard it as just a usability feature - it can never provide any real security.
well, as all html code in the browser you cannot prevent it from being manipulated, never trust the client and check the access of this action in the backend.
Keep in mind that even if the button is disabled, a developer can rebuild the request of this form and send it without using any user interface.
There is an alternative way that you can do in this kind of situation. You must unbind the event when the button is disabled and bind it again when the button is enabled. It will solve your problem.
Much better sanitize it in server side.
Related
I have a React app which has specific fields visible depending on the user's subscription.
On page load the subscription is checked via an API request, however I wanted to check is it a valid concern that someone could modify that response to show elements of the UI that they shouldn't see?
How is this generally handled?
Of course, I could do some additional server side checks, but wondering if I can do something on the the front end that can help?
Any help appreciated.
Thanks.
Nope, you will need to have server checks. The front end checks can easily be modified by the user using his browser developer tools.
Yes, he can view things he is not supposed to. You are to also make sure that you send only necessary details on the API request, because he can view the API response body using the developer tools too.
All the best.
You can send a token from back-end and check the validity in the front-end with a client secret. so if anyone modified your response they can't edit it without the correct secret key.
I am creating an Angular 1 SPA. Certain controls are only visible to users with certain permissions. This is based on scope variables set by server api calls.
It occurred to me that if I could access these variables through a browsers dev console, I could change their values.
I tried this for example:
angular.element($0).scope().$parent.myUserInfo.accessType = "admin"
angular.element($0).scope().$apply()
And sure enough, the admin controls popped up on the page even though I was not logged in as an admin. Is there a best practice to stop this or am I going about it completely wrong?
The authentication always have to be made on the server side.
I don't know what you are trying to do, but if the user interacts with some webService/Rest API, etc... the server should disallow such interactions.
If the accessType property of your scope is just a way for you to know which UI you should display to the user, and the authentication/session mechanism is correctly handled by the server, that should not be a problem.
However, you cannot disallow the user to play with the dev console, so you'd better handle the authentication correctly.
I am not sure if there is a way of protecting values in $scope.
But as JavaScript is executed client-side and it is therefore be possible for users to modify said code, I would always verify permissions server-side. Then it wouldn't matter if users enable the admin controls client-side as they have no permission to use the api calls.
I am new to AngularJS and trying to grasp the concept of implementing an access control layer so that some pages/menus will be hidden from certain users.
I usually implement ACL and all routes on the back-end (PHP/MySQL) but this project require me to do everything on the client side only.
We have a remote server that is in charge of authentication and upon successful login, will return an is_admin flag so that I know whether to display the additional info.
Although not likely, since Angular is also the rendering engine and is in charge of all the logic, I am afraid that users will be able to play with browser developer tools and/or other 3rd party tools and gain access to those areas (since all scripts & logic will be visible to them in the browser).
So if I do something like:
if (user.is_admin === true)
{
//display the additional admin data...
}
A user can potentially set user.is_admin = true in the browser tools and gain access.
With server side rendering such as PHP, the user will never be able to even know about these hidden areas. i.e
<?php
if ($user->is_admin === true) {...}//user will never ever see that or be able to modify $user properties
?>
Of course that the server will keep on authenticating every request so this exploit will only allow limited access, but still seems like a non secure way of hiding sections from certain users.
Am I missing something in Angular or is there a better way of doing it so that it's bullet-proof for client side hacks?
The Angular way of hiding sections is with the ng-if/ng-show/ng-hide directives, as in:
<div ng-if="is_admin">...</div>
You can't hide those divs from people who look at the source, or the resources you make available in your app. So don't provide admin data to those views.
My approach was to make an "admin" app in addition to the "standard" app and link between them. This way, the only things exposed are links to the admin site, which are blocked to non-admin users:
<div ng-if="is_admin">Link</div>
All requests to my /admin/* pages return a 401 status code if they are not an admin. The REST resources also return 401 status codes as appropriate.
(Edit: changed above ng-hide to ng-if to suppress those divs in the resulting DOM.)
I'm working on a 100% ExtJS application; the browser downloads all the JavaScript and a single HTML file once; everything runs in the browser after that.
When all the panels are rendered at startup (i.e., when Ext.onReady() fires) I need some panels to be hidden depending on the user's permissions. Is there a common/best practice for configuring the GUI at startup depending on user permissions?
I think one solution might be to have some panels hidden by default. An AJAX call could be made at startup to get user permissions, and then panels could be un-hidden depending on those permissions. However, I suspect there are better solutions.
Any tips would be greatly appreciated.
Note: I understand that the front-end javascript can't be trusted as the sole mechanism for security checks and that the backend application would need to verify all the actions received from the front-end.
Why not just write a server-side script that outputs privileged client-side code based on the user's authentication status? Instead of having your client-side code fetch permission data and branch on them, just have the client-side hit a script that outputs the appropriate javascript.
So if you've got a special "SuperAdminPanel" component, the only way the client ever sees the code is if they hit your authentication-aware user-js script, and are recognized as a super-admin.
In the general case, such a script could just echo out the appropriate script for the currently-authenticated user's level. It could easily be extended to pass code or configuration specific to individual users, as well.
I am working on a wp7 app and I want to make an https call (sign-in and then post ) to a website which does not have an REST API. So I will have to use it just like a browser adding headers to the https sign in call and parsing the resulting data get the Cookie data and unique id assigned extra and pass that on to a subsequent https calls I make.
Can someone please point me to best way to do this ? Pointers to some samples that comes close to this would be helpful.
thanks
If the site in question doesn't prevent CSRF you could just submit form data to it directly. If it does, you're going to need to screen scrape the forms for the website, then populate the necessary fileds and then submit.
If you have control over the site, you'll probably be better off in the long run and be less vulnerable to changes to the site.
If it's not your site, be sure to check permission from the site owner about automating logging in. You also need to be very careful about what you do with regard to the users login credentials.