As a frontend web developer, not only creating websites and adding functionalities is important. Securing Websites is also paramount and the responsibility of that comes under the shoulders of developers. Even a small bug in code can lead to private information leakage and bad people out there can steal the information of those website's users.
Web security refers to the protection of websites, web applications, and web services from unauthorized access, data breaches, and other cyber threats.
So here we will be discussing types of web securities and how can we secure them from data leakage or theft.
We will be discussing Content Security, Connection Security, and Data Security.
Content Security
Content Security Policy is a layer of security that helps in detecting and mitigating certain types of attacks including cross-site scripting (XSS) and data injection attacks.
To enable this policy we need to configure the web server to return the Content security policy. For doing so we can define it using a meta element.
Let's see some common use cases
Example 1
A website administrator wants all content to come from the site's origin excluding other subdomains.
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self';"
/>
Now except its own domain administrator can not use other subdomains or any third-party domain.
Example 2
A website administrator wants to allow content from a trusted domain and all its subdomains (It need not be the same domain that the CSP is set on)
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; example.com *.example.com;"
/>
Example 3
A website administrator wants to allow video and audio from anywhere and images from a trusted domain and all its subdomains.
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; media-src *; img-src unsplash.com;"
/>
Connection Security
Transport Layer Security
Transport layer security is a protocol to enable connection security between two networked applications or devices to exchange information privately and robustly.
HTTP (HyperText Transfer Protocol)
HTTP (HyperText Transfer Protocol) is the underlying network protocol by which the transfer of hypermedia documents can be done on the web that is between the browser and the server so that humans can read them. It uses port number 80 for communication. It sends all the data in plain text format so basically no security or less secure.
e.g example.com
HTTPS (HyperText Transfer Protocol Secure)
HTTP is an encrypted version of the HTTP protocol. It uses TLS to encrypt all communication between a client and a server. When we enable HTTPS any information we transmit, like passwords or credit card numbers, becomes difficult for anyone to intercept. It uses port number 443 for communication. It uses Encryption which results in better security than HTTP.
e.g google.com
Data Security
Data security on the web refers to protecting sensitive and confidential data transmitted and stored on websites from unauthorized access, data breaches, and manipulation. Achieving data security involves implementing various measures to ensure the confidentiality, integrity, and availability of the data.
Using HTTP Cookies
An HTTP cookie (browser or web cookie) is a small piece of data that a server sends to the user's web browser. The browser may store it and send it back to the server and the server for example while logging checks if the request is made from the same browser and then gets it logged in if it's logged in initially on the browser keeping the user logged in. So basically the cookies are used to check if the two requests come from the same browser or not.
Cookies are mainly used for three purposes
Session management -> Logins, shopping carts, etc.
Personalization -> User preference, settings, themes.
Tracking -> Recording and analyzing user behavior.
With javascript, a cookie can be created like this
document.cookie = "username=Ram Singh;"
An expiry date can be added to this for cookie data to be deleted. By default, the cookies are deleted when the browser is closed.
document.cookie = "username=Ram Singh;expires=Thu, 18 Dec 2023 12:00:00 UTC"
To get the cookie we can use
let allCookies = document.cookie;
// return all the cookies which is set
e.g: cookie1=value; cookie2=value; cookie3=value;
Using Local Storage
Local storage is the read-only property of browser storage where we can store data in the form of objects. Local storage is similar to session storage except that it has no expiration time. Session data get cleared once the session is expired.
To set the data in local storage we have a property called setItem and to get a property we can use getItem.
Example
localStorage.setItem("myCat", "Tom");
localStorage.getItem("myCat");
// set data in localstorage in JSON format i.e "myCat": "Tom"
I hope you enjoyed reading this. Thanks for staying up to here with me. See you in the next blog 😇😇. Until That
