Hiding Source Code from ViewSource

Wappler General Need Help
1

I've seen other posts about hiding the source code and only showing it to logged in users. Currently in my project I'm not using the security provider feature, as Auth is handled by an API call and then saving the cookies to the user's browser.

The way Auth works is by running a App Connect check upon every page load, which then verifies if the user is authenticated, otherwise it directs the user to the login page.

This works for the visual aspect of the application however the source code is still shown. Even though the Server Connect code is run on the backend, and public users can't access this code, the Front End code reveals a lot about our operations and current usage.

Is there a way that I can hide the source code of the page from showing on the ViewSource of a web browser, unless the user is verified and logged in??

2

In general, web browsers don't provide a built-in way to hide the source code of a webpage from being viewed by users. The source code of a webpage is essential for browsers to render and display the content correctly, so it's typically accessible through browser developer tools.

3

The best method is to have the login page pretty much just a form with your username and password fields and use a route for the Action (which doesn't expose the endpoint) and then upon successful login redirect to a another page which in turn checks the User privileges and redirects from there accordingly. This page would also be protected (allowing only authenticated Users) and checks if the User is authenticated and if not redirects them back to the login page otherwise redirects them to the 'internal' page for authenticated Users... Nothing is fail safe and pretty much everything can be exposed source-wise. You can obscure and encrypt any JavaScript files to aid in making them difficult to interpret but this is not something built in to Wappler by default (nor is it entirely fail-safe). To do this you'll have to create your own script to implement this approach. Run the script against your JavaScript files, output them, then include them (the obfuscated files) in to your pages (the rest of the source will be plain text of-course).

4

Under the assumption you're using the NodeJS server target, you should attach a Server Action to the page, and in that Server Action you use the Security Restrict step. This will cause the page to be redirected to your login page if the user is not logged-in. An advanced use is using the Globals steps instead of attaching a Server Action to each page.

You can also explore server-side rendering:

1 Like
5

@Apple The server side rendering would, IMO be the best way to proceed.

Now I've put in the template the ServerConnect function to validate the user's authentication. It give me either a false or a true statement, see below:
image

Now, how do I make sure that if this is false, the "Layout Body Content" doesn't show?

6

Could you please show in screenshots what you did? Your description is a bit ambiguous, it's best I see exactly what you did

7

This is the Server Side Server Connect:
image

This will run and then it will either give me a false or true if the user is authenticated.

I then want to be able to put a condition on the Layout Body Content, that way if the result is false for the user auth, then the page content won't load
image

8

You have to switch to HTML view and place:

<% if (_('userAuthenticated')) { %>
View content 
Layout Body Content
<% } %>
9

Perfect. That works!