Secure data on server without installing Server side language

In some cases, site speed is more important than dynamic content but in the same case, the user wants to secure content based on the different user bases. In this case, the developer has limited options.

One option is to install server-side script and check the content, load content based on server-side call but if you don’t want to do this and want to do it without using the server-side technology then one option is given below.

To do it using pure HTML and JS site with few API calls to validate the user and based on that secure the site’s data with server-side configuration.

Let me explain it with a simple example given below,

• I have one HTML informational site which is having a different type of information and video tutorials. It has a total of 10 chapters in the tutorial.
• I created the site with the builder easily and now generated the HTML using the builder. It is hosted on the Nginx server with the provided source code in the HTML, Jquery, and JS.
• It is having the login module to check the user’s level to access different chapters.
• It easily checks the login access on the page through the ajax API call before page load. It will show data if a valid user else redirects to the home page. But nowhere the concern is if the user is not validated and he using the view source in the browser then the user can easily check the source code and get the content of the page.
  So, here for the security concern, we have to do 2 points,

1. Hide the secure content to get disclosed directly to the front user

• • • For this, we need to divide the content into 2 files.
      1) In the main HTML file which will contain all the data except the inner body content or secure content as “page1.html”.
      2) Inner body secure content in one folder “content” as the “page1.txt” file.Now, our secure content is in the second file so it is automatically preventing the content to disclose to the front user by view source on loading “page1.html” file and before verification call.
      After doing this, we need to secure the call to direct browser access of “page1.txt” file by adding the below code in the server domain configuration file
      Nginx:

          server {
            listen 80;
            server_name website.com;
            root /var/www/website.com/html ;
              location ~* content/ { 
                  valid_referers server_names; 
                  if ($invalid_referer) { 
                       return 403; 
                  } 
              }
          }
    
  

  Apache:

        RewriteCond %{HTTP_REFERER} !^$ 
        RewriteCond %{HTTP_REFERER} !^http://%{HTTP_HOST}%{REQUEST_URI}*$ 
        RewriteRule .(txt) - [F,NC]
  

• After adding this code it will prevent direct access of the “.txt” file from the site’s folder

2. Allow the secure content load after the successful user verification
   Now, after verification, we can use the below JS code in the HTML file to load the content in the page1.html body tag.

   $.get("content/page1.txt", function (data) {
   $(body).html(data);
   //------Your other code here-------
   });
   

Here, we have secured the code using the server configuration and HTML, JS, Jquery client-side technologies.