Forum Academy Marketplace Showcase Pricing Features

Security Best Practices Tips

I am new and loving Bubble!

I need some guidance on best practices for protecting pages and allowing access only to specific user roles.

Example:
Once logged in the workflow directs admin users to admin_home and customers to customer_home

I noticed that if I copy the url of admin_home and re-login as a customer I can paste that url and access the admin page.
I created an action to redirect any user that doesn’t = admin role back to the index and that seems to work well.

Is there a better way to universally secure the data (pages, stored data, pop-up data) found on pages from unwanted users having access to them? I want to ensure that I understand this point before moving on.

Thanks for your help.

2 Likes

This is a really good question. What I do is create a reusable element with the security rules. In the case of this I have three workflows (in the pink).

The workflows check for the appropriate role needed and provide a redirect as needed.

Since they are reusable I can include them in any pages that need them. This way I don’t need to individually update each page and if a rule changes I can immediately have it available for all. You can also add multiple of these to specific pages as needed. (As another point of efficiency, I actually place them in the reusable headers for each particular role I have in the system.)

I also use a “loading” page that only contains a simple spinner gif. This is the page they are navigated to after login. This page has logic to redirect the appropriate user to the correct starting point depending on their role, too. I also include a security rule for if someone is “logged out” which redirects them back to the index page.

Here’s the loading workflow:

And here’s the actual visible. I should add that this happens so quickly I actually never see the loading screen.

24 Likes

Wow. What a helpful and informative post. Thank you. It will take me some time to work through this. If I have questions I will post back in case you may be able to help again.

1 Like

I like the nav page, too. Thanks for the tip!

had exactly the same question, and this is a great answer, so thanks!

hm this is a cool idea. I have those workflows, but they are not in reusable elements. I like the loading page idea and it may solve the issue of temporarliy showing a page before the redirect happens.

cool!

Go nuts with the loading icons here:

:stuck_out_tongue:

3 Likes

I really like the idea of using reusable elements & including them in headers. This makes it esay to quickly secure my site and keep it updated with potential changes. Also minimizes the risk of me forgetting to add something to a new page.

One follow-on question – I have an admin panel on certain pages that makes visible certain admin-only options on pages. What do I need to do to lock these down and ensure nobody can tamper with them?

For example, i’m showing them based on custom-states. Can uses manually tamper with these using JS?

When I set an element to conditionally be hidden if user’s access rights are not admin, is this full proof? Or, can someone just play with the CSS to make these elements visible?

Any other gotchas for having some admin-only content on user accessible pages?

Thanks!

Yes, can be tampered with.

Yes, visibility can be altered from the browser console.

You can hide page content from the average user, but not from someone with intent. It is better to make sure that data access is correct (privacy roles), so if an element is made visible they can only see the controls but not use them or see sensitive data.

3 Likes

The Reusable Element solutions is great. I’ve added the functionality for different roles having a list of allowed pages stored in the database. See:


3 Likes

Pretty nice implementation, thanks for sharing!

What steps will you take to secure the allocation of roles?

The admin is the only one who can use the page to assign roles.

If the assign roles page is modified by the client, it would allow assigning roles … this can be prevented by adding a role check condition on the Save button, i.e. the server would check that the role matches.

Good point!

Super helpful post. Curious, why did you add an exclusion for " doesn’t contain * "?

A * is used to allow a user to view any page. I made it so for connivence.

Realise this is an old post, but lots of useful information here @saeed.t.richardson, thanks!