Security - Restricting Access to Your Page

Wappler helps you easily restrict access to your pages and redirect users with insufficient privileges
After you created your login page, now you will learn how to restrict access to your pages.

If you are using NodeJS server model, please folow: Applying Security to your NodeJS pages


 
Step 1: First create a PHP or ASP page (depending on your server model) and save it. A security restrict page does not work on plain HTML pages:


 
Step 2: Select App in the App Structure(1) and click the “Security Provider Enforcer” button(2):


 
Step 3: When the dialog appears enable the “Restrict Access” toggle:


 
Step 4: And select your security provider from the dropdown. Only the security providers which are linked for the entire project will appear here:


 
Step 5: If you need to restrict access and enable access only for users belonging to a certain access level, then select it.
We want to allow access for all the logged in users, so we don’t select any permission here:


 
Step 6: Select a page, where the Not logged in users should be redirected to if they try to load this page:


 
Step 7: Then select a page, where the Unauthorised (with no access permissions) users should be redirected to if they try to load this page:

Click OK and you are done. Your page is now fully secured and cannot be accessed from unauthorised users.


WapplerPrevious   WapplerNext


4 Likes

A post was split to a new topic: Applying security page restrictions

What if the server model has been set to NodeJS? Do I have a way to secure pages under this server model or my only option is to create my full project using a server model type PHP or ASP.NET? It does sound strange to me, that we cannot secure pages if we use NodeJS, is there something that I am missing?

Hi Marco,

Short answer, yes you can secure pages under Node, but it is done differently than the others.

Have a look here to get started: Applying Security to your NodeJS pages

Thanks for the pointer, I have tried to implement it and while I had great results with the protection of a database query, I am struggling to protect a whole STATIC page, where the page content itself should not be shown to unauthorized users, again I am referring to the page itself, not the dynamic data generated by an SQL query.

Please have a look to my simple example:

As you can easily see, I am trying to restrict access to the page called “staticSecretContent.html”.
In order to achieve my expected result, I have used Server Connect and connected the page to the Action “redirectUnauthorized”, NOTE that I have set the property Login URL to the login page, so I am EXPECTING (but it does not work) that if the user is not authorized, the user is redirected to the login page. The action is very simple and it consists in a simple Security Provider step and the following step is the Security Restrict. For simplicity, the Security Provider is of Type Single and the user and password is declared within the Security Provider as follow:

Unfortunately, instead of having unauthorized users redirected to the login page, the “staticSecretContent.html” is shown in full.

From the browser developer tools I can see that the application is calling the page login as expected, however it is using an XHR redirect that is not returning any visible content as such the restriction is not effective and it is not producing the expected result, which I repeat is to fully protect the static page content.

As you can see from the Inspect tab, all seems fine, my example should work, instead I am getting the secret content fully disclosed…

Please help.

You won’t be able to restrict access with vanilla html pages. You need to use .ejs files as shown in the tutorial.

I have tried with EJS files as well, but with the same results, I can only Restrict Database queries so a portion of the page, the dynamic content portion, is not shown, but the static one is still fully displayed and that’s exactly what I need to restrict.
Furthermore, the Security Restrict is EXECUTED and ENFORCED, so it is not a problem of EJS or HTML pages, the problem is that instead of loading the /login page, it is called in the background and the Security Restrict is not REDIRECTING as it should do to the /login page.

Same result with EJS page:

Here the page in Wappler:

Unfortunately, despite accordingly to the Security Restrict step, this page should not be shown and the user should be redirected to /login, the page is fully displayed and user is NOT redirected to /login.

Securing the page is not done with a server connect element… click on the app element and attach using the server side properties, as shown in the tutorial.

I assume you are referring to this:

Unfortunately the “Security Provider Enforcer” is not available for HTML or EJS pages, have a look to the following screenshot as formal evidence:

I cannot believe there is no simple way to secure a HTML and/or EJS page, so the page is not displayed at all and the user is redirected to a login page first…

I’m actually referring to the node version of security enforcer, which looks a bit different. There’s a screenshot in the tutorial.

But you might also be running into this bug. Adding a layout to an existing content page does not expose Server Side data

I use this method to secure pages, but I always use layouts.