CODEWITHSUNDEEP
javascriptauthorizationclient-side
Ricardo Gomes
Ricardo Gomes

Reputation: 1266

Strategies to filter UI by role in a client side app

I was wondering what are the strategies that people are using to filter UI elements based on authorization in a client side app.

Basically I have an API that provides the security for the data and business logic (through user and role auth), but on the UI front it seams weird to simply hide options (and even routes) at runtime.

For example

The url/api/staff api endpoint is accessible only to hr-managers role but the web app has a page in the url/rh/staff (with links to it in the navigation).

I could filter the navigation, and even the state transition based on the current user. But this is client side code, ultimately anyone can mess with it.

Is there a better way?

I'm using Node/Express for the API, and Angular for the UI, but I'm more interested in generic strategies than on specific workarounds for these frameworks.

Upvotes: 0

Views: 850

Answers (3)

bvaughn
bvaughn

Reputation: 13487

Here's an overview I wrote for role/permissions management within an Angular application: https://gist.github.com/bvaughn/90343c06467e9bcb8d27

Outlines everything from routing to state hierarchy and is based on my own experiences writing a couple of large Angular apps.

Of course, since this is client side code it does essentially boil down to "hiding things at runtime" --- though the things that are being hidden are only buttons or links. None of the remote data on the server should be accessible for unauthorized users, and that's the important part.

Upvotes: 0

dandavis
dandavis

Reputation: 16726

since the info hiding is not critical (the server provides ultimate security), you just need a simple presentation-focused way of hiding the links to the no-go zones as a convenience to the end-user. CSS is perfect for that, and it's a lot simpler than trying to hide a laundry list of sections with JS or playing nice with any given framwork; CSS has very few compatibility problems for basic show/hide effects.

I needed the exact same task done at work, and this is basic strategy i implemented, and it's worked out well; i like it enough to share and recommend.

  1. inject the ROLE as a class (or data-attribute) on <html> or <body>. example: <html class=user> or <body class=admin>
  2. add "admin" or other specific role-only classes to the links/sections to be hidden. example: <a href=/nogo/ class=admin>CP</a>
  3. add a small bit of CSS that hides certain combos of "root role" and "element role":

CSS:

html .admin { display: none; }
html.admin .admin { display: inherit; }

or using data-attributes:

html .admin { display: none; }
html[data-role='admin'] .admin { display: inherit; }

you can also create a tier, and use a bit more css to allow more specific access, for example to allow admins see all, and managers see user+manager sections:

html .admin,
html .manager{ display: none; }

html.manager .manager,
html.admin .manager,
html.admin .admin, { display: inherit; }

with the attribute injected and the CSS rules added to the site's style, all you need to do is add apropos attribs/classes to the tags you want to control. this means there are virtually no conflicts, it works without JS, is pre-hidden before page is shown (no FOUC), and is easy to alter without a prep course in your site's inner-working.

Upvotes: 1

SGD
SGD

Reputation: 1716

You basically answer the question yourself, you can always mess with any logic in the client use the console to call methods etc. So if there is any critical you should place it on the server side.

My recommendation would be to publish (a subset) of the permissions to the client and filter the menu. If you mess with the UI you might be able to get the screen but not the data.

Upvotes: 0

Related Questions