Please helpe me, I want to show an html element if user is admin else hide the element,
Example:
AngularJS:
$http.get('users.json'})
.success(function(data){
//data user return true and the value true represents admin
$scope.user = data.user;
});
HTML:
<h1 ng-show="user">Hello Admin</h1>
The problem here, anyone can open firebug or devTools and change user scope value.
You are absolutely right in guessing that the above method is not at all secure.
The solution is to either send the local data to the server and get it to return the secure content which is then dynamically injected into the dom.
i.e. Your Admin relevant stuff is not always present on the client side, and only after authentication is it fetched (via AJAX probably) and rendered.
This makes your app a bit more secure.
You might also want to look into the following mechanism for secure authentication on client side apps:
https://auth0.com/blog/2014/01/07/angularjs-authentication-with-cookies-vs-token/
Related
With browser's devtools ability to reload edited javascript overrides, how can you "securely" execute validation-dependent front-end code?
Say you want to conditionally display some sort of proprietary UI element(s) (humor me) dependent on an authorized users permissions. The authorized user data would be validated with a promise, but if the conditional is client side based on the returned promise data, couldn't someone just remove that conditional, save as an override and reload the page?
if (permissionGroup == 'Team'){
return <>{children}</>
}
if (nodeENV !== 'development'){
checkAuth();
}
Edit and run JS override to return children without running auth checks
if (permissionGroup !== 'anything'){
return <>{children}</>
}
Any way to prevent this? Am I mis-informed about devtools security? or is the industry-standard understood that, other than data, anything client side is essentially open source?
The answer is, it is simply not possible to securely control dynamically rendered components on the front end, outside of using possibly some sort of encryption service like JSscrambler
The solution is, only render components to the client side, to user that are authorized to access or view the components, who has been authenticated, validated and authorized on the server.
You never ever trust the client, as you mentioned the client can modify the code and override your "security features".
You will need a backend and need to validate the clients input.
I'm using social authentication using the vue-google-oauth2 library. It works fine as I am able to authenticate my self and I receive a token from the backend too.
When initially I log in, and by using a function that is part of the vue-google-oauth2 library that I'm using to check if it says that I'm authorized or not, it gives the following response in my browser's console:
this.$gAuth.isAuthorized
true
When I then refresh my browser page, and since I've placed a debugger command in my code, and I print the same function again,
I get the following response:
this.$gAuth.isAuthorized
false
What can I do to ensure that switching tabs, reloading page or refreshing it won't make this happen? Or is this what is actually supposed to be happening?
Have you looked at saving it in as session data? Im not to familiar how Angular state works, but when you set original state you can look for the session key "authorized" and if it doesnt exist set auth to false, if it exists set it to the value.
localstorage.getItem(item)
and
localstorage.setItem(item)
There is also the option of making a component that handles the google auth and sends it to the state.
From the library documentation for vue-google-oauth page you linked it says you need to send that code back to your backend server to create a token to stay signed in, so it's behaving as expected. From here (https://www.npmjs.com/package/vue-google-oauth2#usage---getting-authorization-code) it states :
The authCode that is being returned is the one-time code that you can
send to your backend server, so that the server can exchange for its
own access_token and refresh_token
In other words, you need to do something with that code to make it persist in your app, otherwise it's just a one-time code, so looks to be expected.
Previous posts — 1 , 2
What I have now: AngularJS app with two controllers. First works with CouchDB documents and the second perform sign-in requests to example.com/demo/_session.
When I open application, I can't do editing with couchdb (in first controller), because some actions I've limited to logged users only. In second controller I'm sending simple POST over $http, which return Http-only (so no cookie magic there) auth cookie AuthSession. That cookie bound to couchdb address and in theory any request from page to couchdb address must contain that cookie also.
But this no happens. No one call to couchdb, except calls to /_session comes with AuthSession cookie. E.g. example.com/demo/_session getting with AuthSession and example.com/demo/records not.
In learning Angular and CouchDB I came to deadlock.
What I'm doing wrong? I do not want to hide couchdb behind something with custom auth — too complex and not a good way, I think.
UPD: Getting Set-Cookie header also fails — it not available in HttpPromise.success(function (data, status, headers, config)) headers. I'm tried to get it like headers("Set-Cookie") — no luck.
Maybe something wrong in couchdb configuration? I've uploaded it to pastebin.
Check CORS to be enabled (* in my cause)
Check cors/credentials in config, it must be true
Use {withCredentials:true} in Angular $http
Now it works.
I need to retrieve a facebook page's list of posts (feed) using their javascript SDK, just like they explain in their docs: https://developers.facebook.com/docs/graph-api/reference/v2.4/page/feed
/* make the API call */
FB.api(
"/{page-id}/posts",
function (response) {
if (response && !response.error) {
/* handle the result */
}
}
);
I need it to be my website's "news section", so users should see it even if they are not connected to facebook.
The problem
Cool, but there is a problem... It returns: An access token is required to request this resource.
Holy cow... I'd like to get some access token for you #facebook, but my app doesn't make use of your authentication tools/plugins.
ANYWAY, I tried with FB.getLoginStatus(); but doesn't work, because the only way it can return an access_token is if the user is actually connected to the application. My users may not even be logged to facebook!
So, ¿How can I get an access_token to be stored into a variable, and later be used to get /{my-page}/posts?
I've already payed a look to this SO question, but it doesn't solves my problem, simply because there are no such "generic tokens".
I've also read https://developers.facebook.com/docs/facebook-login/access-tokens/ and that also relies on tokens generated through facebook login methods... So, can't I display a list of fb page's posts in my website, without being connected into facebook, hence an application?
ADD: My app is build with angularJS, I'm not dealing with server-side code. I shall rely purely on javascript methods.
You could either use an page or an app access token, but as you'd be using them on the client-side, neither of them are an option.
See
https://developers.facebook.com/docs/facebook-login/access-tokens#apptokens
https://developers.facebook.com/docs/facebook-login/access-tokens#pagetokens
Note that because this request uses your app secret, it must never be made in client-side code or in an app binary that could be decompiled. It is important that your app secret is never shared with anyone. Therefore, this API call should only be made using server-side code.
I'd strongly recommend to build a simple server-side script (PHP for example) to proxy the request to the Graph API. You could then call this via AJAX for example and load the posts asynchronously (and alse get rid of the FB JS SDK!). There is NO way to handle this in a secure manner if you don't want to use FB Login for all of your users (which also doesn't make much sense IMHO).
I think it's straightforward :)
Since pages' posts are always public, it only needs a valid access token to retrieve page posts.
Quoting what you've written:
So, ¿How can I get an access_token to be stored into a variable, and later be used to get /{my-page}/posts?
You only require an access token.
My suggestion would be;
- Generate an access token for yourself (no extra permission needed)
- request page-id/posts
This way you don't require other users to be connected to facebook, you can simply requests page-id/posts to retrieve posts with access token you generated for yourself.
I hope it solves your problem :D
TIP: As long as posts are public, you only require a valid access token, it doesn't need to be user or page specific.
I'm trying to think on approach to do authentication with Angular and remote server. Usually what I do in local server, like what they did in MEAN.IO, check if has user and if it is I put it on the global window and that's how I know that user is authenticated.
for example in laravel:
#if(Auth::check())
<script>
var user= [[[Auth::user()]]]
</script>
#endif
and it survive refresh because im check it at run time too.
but now the server is remotely and i have to do something like get request to some url /getUser. But thats not good since all the AngularJS
components will have to wait for the response to return causing inconsistencies and
development overhead.
So what I should do?
You can use "resolve" in order to avoid changing your current logic.
Define a Security service that performs the check let's say Security.getUser() and add it to the resolve of each route you need to secure. That way, your controller will be loaded only once the user is already checked. In case the server will return an authentication error, redirect to the login screen.
You can check out my slides from a secured angular talk I gave goo.gl/kMvoFj
or go over my github repository (It's still very raw, but the main idea is there) ng-secure, I think it might help you.