.dev/tech

Best practices

Security

Secure websites help protect against unauthorized access, data breaches, and other cyber attacks that can compromise the confidentiality, integrity, and availability of web applications and user data.

OWASP

The Open Web Application Security Project® (OWASP) is a nonprofit foundation that works to improve the security of software (explanation taken from https://owasp.org/).

There is a lot of information on web security on their website and we can especially recommend checking out the "cheat sheets" (https://cheatsheetseries.owasp.org/) where you can get quick tips on specific areas and tech stacks on how to keep them secure.

Laravel Cheat Sheet: https://cheatsheetseries.owasp.org/cheatsheets/Laravel_Cheat_Sheet.html

Keep your website secure

These are hands-on tips on how to keep your site secure.

HTTPS

Make sure your website is using HTTPS (Hypertext Transfer Protocol Secure). This will make sure that all traffic (except for the URL) is encrypted. Making sure that man-in-the-middle attacks can be prevented.

Debug mode

When in production, make sure your app is not in any debug mode and is not displaying any error messages that can give an attacker information regarding your environment.

If you have any staging or development environment, make sure that it is password protected.

No secrets in client code

Make sure that any keys or passwords that shouldn't be available for any unauthorized person are not exposed within your client (JavaScript) code.

Vite only exposes environment variables prefixed with VITE_, read more at https://vitejs.dev/guide/env-and-mode.html.

Also, make sure that files that include secrets (like .env) is not readable from the web browser (like https://www.itiden.se/.env).

Authentication

Make sure to handle users and logins with care. Create rules for strong passwords (read more about strong password recommendations) and make sure only authorized persons have access to admin accounts.

When building web applications, make sure only the persons that should be able to access specific routes and functionality has that possibility. Read more about Laravel Authorization with gates and policies.

Also, make sure that any password is stored in a way that any attacker can't use it. Read more about storing passwords in a secure way.

SQL Injections

Make sure any query to your database is handled in a secure way. Most frameworks today have secure ways of managing your SQL queries. But sometimes you might reach for a more "raw" query. In that case, make sure that the parameters inserted into the query is handled secure.

// ?userId=105 OR 1=1
const userId = getRequestString("userId");
const query = `DELETE FROM users WHERE id = ${userId}`;
// Not secure!

Cross-Site Scripting (XSS)

If you have any insecure data (data inputted from a user that is saved in the database or fetched from the query string or form input, or fetched from an unhandled endpoint) make sure that you output it in a secure way on your website.

In PHP you can use htmlspecialchars.
In React, this is handled automatically when rendering a string with { text }. But be careful when using <p dangerouslySetInnerHTML={{__html:text}}></p>, in that case, make sure that you can trust the content of the text-variable or sanitize it first with something like DOMPurify.

A user could potentially inject JavaScript snippets into your site if it is not handled in a secure way. And that could potentially run insecure scripts, like sending information about other authenticated users that can compromise the security of your website.

Security headers

To tighten the security of your website you can add some security headers to inform the web browser on what should and shouldn't be possible for your website to access and perform.

Content-Security-Policy
This header can inform the browser from where scripts, styles, images, and other assets can be fetched from. Adding only intended sources can make sure wanted assets are not loaded.

// Only allow from current site
Content-Security-Policy: default-src 'self'

Strict-Transport-Security
Enforces the use of HTTPS connections.

Strict-Transport-Security: max-age=63072000; includeSubDomains; preload

X-Frame-Options
Make sure that the site can not be loaded into an <iframe> from another domain.

X-Frame-Options: deny

X-Content-Type-Options
Make sure the browser follows the MIME types specified in Content-Type headers. This can protect against Cross-Site Scripting attacks that abuse MIME sniffing.

X-Content-Type-Options: nosniff

Secure SSH and database connections

Make sure to setup the server so that SSH and database connections are handled safe. Make sure that the database is only reachable from secure origins (like the webserver) and make sure that you use SSH keys to access the servers through SSH. Only authorizes persons should be able to access the server and sensitive data.

Keeping your codebase and server updated

It's important to continuously maintain both your server and codebase with security updates.

To do

  • Follow best practices on security for the tech stack used.

  • The website uses HTTPS.

  • The website uses production mode in production and displays no sensitive error output.

  • There are no secrets available in the client code.

  • Authentication and users are managed in a secure way.

  • SQL injections are not possible.

  • Cross-Site Scripting is not possible.

  • Secure headers are used and configured in the best way for the website.

  • SSH and database connections are handled securely.

  • Server and codebase are kept updated.