How to Secure HTML Based Websites: Comprehensive Guide to Browser-Side and Server-Side Security Measures

In today's digital world, cyber threats are a constant concern. When enhancing website security, two critical dimensions must be addressed: browser-side and server-side security. While server-side security shields the backend infrastructure, browser-side security is vital for safeguarding user interactions with your website. This guide focuses on both browser-side and server security, empowering you to implement essential features that safeguard user interactions and bolster your website's overall defensive posture.

Essential Browser-Side Security Measures for Website Protection

• HSTS
• CSP
• Permission policy
• X-Content-Type-Options
• Strict-transport-security
• X-XSS
• X-Frame
• Referrer-Policy

Now, you don’t need Wordfence or any plugin for security, except IP blocking in real-time. Just follow these steps for your website.
Note: I have used them for Apache servers. They are different in terms of syntax on Nginx servers.

1. HSTS 

Properties : HTTP Strict Transport Security (HSTS) is a valuable attribute to incorporate into your website, enhancing your TLS implementation by prompting the user agent to mandate HTTPS usage.

Code: Strict-Transport-Security: max-age=31536000; includeSubDomains
Insert this code to .htaccess file
This directive ensures that all current and future subdomains will operate under HTTPS for a duration of one year. This measure restricts access to pages or subdomains that are exclusively served over HTTP.

2. CSP

Properties : The Content-Security-Policy header is a component of HTTP response that contemporary browsers utilize to heighten document (or webpage) security. The Content- Security-Policy (CSP) is a crucial HTTP response header utilized by modern browsers to bolster document or webpage security. It enables you to control the loading of various resources like JavaScript, CSS, and images, specifying the permitted URLs for loading. Essentially, CSP restricts any resources not explicitly mentioned within its directives.

Code: Add the following code to the .htaccess file:

It can be added to header file, only the syntax or format may differ slightly:

3. Permission policy

Properties: Permissions Policy is an emerging header empowering websites to manage browser features and APIs access.

Code: You need to add the following code to the .htaccess file:

This code sets the Permissions Policy to restrict the use of certain features, such as the microphone, to 'none'.

4. X-Content-Type-Options

Properties: X-Content-Type-Options stops a browser from attempting to MIME-sniff the content type and enforces it to adhere to the declared content type.

Code: Add the following code to the .htaccess file:

5. Strict-Transport-Security

Properties: HTTP Strict Transport Security (HSTS) is a valuable attribute to incorporate into your website, enhancing your TLS implementation by prompting the user agent to mandate HTTPS usage.

Code: By implementing HSTS, you will achieve this.

6. X-XSS

Properties: X-XSS-Protection configures the settings for the XSS Auditor present in outdated web browsers. It prevents the injection of scripts into websites through old browsers via comments or other methods.

Code: Add the following code to the .htaccess file:

7. X-Frame

Properties: X-Frame-Options informs the browser about whether to permit framing of your site or not.By preventing a browser from framing your site, you can defend against attacks like clickjacking.

Code: Use the following code on .htaccess file

8. Referrer policy

Properties: When a user clicks a link on one site (the origin) that takes them to another site (the destination), the destination site receives information about the origin the user came from. This is how we obtain metrics like those provided by Google Analytics, indicating the sources of our traffic. For instance, I can track that 4,000 visitors originated from Twitter this week. This is evident as their visit to my site triggers the inclusion of the referrer header in their request.

Code: There are various types of referrer policies, but I would like to share two of them:

•  Use the following code in your .htaccess file if you are not using the referrer or if it's limited to your domain only:                

• Use the following code if you don’t want to be referred from HTTPS to HTTP:      

Now, keep track of all of these settings using free and popular websites like https://securityheaders.com/.

Crucial Server-Side Security Practices for Website Protection

• TLS
• Server side encryption
• Vulnerable open ports
• SSL

1. TLS

Check if TLS is running on version 1.2 or 1.3; anything below that is considered outdated. It's crucial to ensure compatibility with all browsers by maintaining TLS handshakes. For assistance, we may need to contact the server service provider.

2. Encryption

Ensure that all TLS encryptions use 256-bit encryption. 128-bit encryption is not considered best practice for security. Again, the server service provider can assist in implementing this.

3. Vulnerable Open Ports

Close any unwanted ports and regularly check for vulnerabilities. The server service provider can help in this regard.

4. SSL

Avoid using SSL from free sources. It's recommended to use SSL from either the server provider or the domain provider to avoid potential issues and security risks.

5. SRI Hash

SRI hash, which stands for Subresource Integrity, can have different bit lengths like 128 or 256. SRI hash helps you track third-party resources. If the resource sends a response different from when you implemented the script with SRI hash, it will automatically block the script. Implementing it is simple: just provide your script to the URL https://www.srihash.org/, and it will generate a hash for you. Note that it may revoke access to GTM/Hubspot as they frequently change their responses and perform internal modifications.

6. Open directories

If a user can see your directory listing via .com/wp-includes or .com/wp-content, then it's a security issue. Please close them by adding the following command to your .htaccess file:

Options -Indexes

Now, track your website regularly to monitor your server's health via https://www.ssllabs.com/.

In conclusion, in the ever-evolving digital landscape, safeguarding your website against cyber threats is imperative. This guide has delved into two fundamental dimensions of website security: browser-side and server-side. By implementing essential features such as HSTS, CSP, X-Content-Type-Options, and others for browser-side security, and adhering to crucial practices like TLS version checks, encryption, and SSL for server-side security, you can fortify your website's defenses comprehensively. Regular monitoring and updates are essential to maintain the integrity of these security measures and protect your online presence effectively. Remember to track your website regularly to monitor server health and stay ahead of potential vulnerabilities.