Consider a business case where you have to develop a webpage to expose a functionality to the user. While discussing the tech stack, the first thing that will occur to our mind is HTML,CSS and JavaScript. However, there are security vulnerabilities that can be caused due to these tools or technologies. In this tech-savvy world, there are wide capabilities brought by modern web technologies that can be used for malicious purposes. Hence, security is difficult to attain. This checklist will help you learn industry best security standards and avoid any future threats. 

HTML Guidelines: 

1. Add rel= ‘noopener noreferrer’ on external links

When you open the link to an external website which might be affected by the malicious code, then that website can make use of the window.opener JavaScript property to steal digital information by running on the same process of your page. By setting the attribute rel=”noopener” one can prevent passing the window object to the new window. In an older browser, rel=”noreferrer” was used that kept the referrer through the same method.

2. Importance of autofill of attributes on forms and password fields.

If someone is filling the forms multiple times it becomes irritating for the user to enter the values again. The Autocomplete attribute can be used in order to automatically complete the form based on previous user values. This becomes more vulnerable when applied to password fields as it is highly sensitive data. As a developer it is important to judge if this attribute should be enabled or not. It should also be discussed with business owners in detail before you enable this on your form.

3. Prevent sensitive data from flowing into automatically generated links

Links can automatically be created by applications from the email content like email address, phone numbers, URL, location etc. This might not be the appropriate behaviour as we are exposing user sensitive data to the outer world. To prevent this you can add invisible or non-recognisable characters into the displayed string to break the recognition.

4. Sandbox your iFrames

It is considered that the entire browser window is just one big iframe. iFrames are added to separate the content onto several pages for better readability and user experience. However, injection in iFrame is a common thing especially when using widgets which can cause cross-site scripting which could result in phishing attacks. It is recommended to set restrictions so that it is made certain that they can’t do anything harmful.Try to always use a sandbox attribute or additional flags like allow-forms, allow-popups, etc.

5. Restricted Database

It is important to implement abstraction between the front-end and your middleware or back-end program. Any page developed or exposed to users should never be able to talk to database, avoid storing or accessing database credentials. It is best practice to use APIs or microservices for communicating with the database. 

CSS Guidelines: 

1. Don’t hide sensitive content with CSS

To hide content in CSS there are many ways. You can easily be able to visually hide content of your page with opacity, visibility, display, transform etc.

But be careful about the content you’re hiding. It should be made certain that any sensitive data or actions should not be leaked.

2. Sensitive actions should not be prevented with pointer-events property

The element that can be the target of mouse events can easily be decided by the property pointer-events. To set pointer-events:none to disable the behavior of an element is very common. Blocking action should be done from the backend side in case of sensitive actions.

3. Coding done here should not have direct access to the database.

4. All the coding should not be done on a local host machine. It is always advisable to host it on servers so that copy, paste and modification of code by multiple people at the same time can be avoided.

JAVASCRIPT Guidelines:

1. JavaScript Inline – You should not have any JavaScript code inline (mixed with your HTML code)

2. noscript tag – `<noscript>` tag in the HTML body should be used if scripting is currently turned off in the browser or if scripting is turned off in the browser which will help in client-side rendering heavy apps such as React.js.

3. Some major vulnerabilities that occur are :

a. Cross- Site Scripting (XSS)

These vulnerabilities enable attackers and give them a chance to manipulate websites that would return malicious scripts to visitors. The malicious script gets executed in a manner determined by the attacker on the client side. When browser or application authors fail to implement the same origin policy, XSS vulnerabilities can exist.

This can be prevented by incorporating and following correct development techniques. XSS vulnerabilities can result in account tampering, user data theft, remote control over a user’s browser, malware spreading etc if they are not controlled.

Preventive Measures to be taken:

1. Avoid using sources whenever possible.

2. Avoid using sinks whenever possible.

3. If the above two cannot be avoided, then white-list based filtering on sources should be performed               

4. Before sending data to a sink, proper encoding should be performed additionally.

b. Cross-Site Request Forgery (CSRF)- 

These kinds of vulnerabilities help attackers to take control and manipulate victims browsers which results in unintended action on other sites.The moment target sites authenticate requests solely using cookies and when attackers find a way to send these requests carrying users’ cookies, this becomes possible.

Many issues like data theft, fraud, account tampering etc can be caused due to JavaScript security issues. Both CSS and CSRF type vulnerabilities require correct development techniques to be followed in order to avoid them and they both exist in the application layer.

Preventive Measures to be taken:

1. Unique tokens inside hidden fields or URLs should be used.

2. Referrer Header or Origin must be verified.

3. Incorporating captcha.

  c. Server-side JavaScript Injection – 

As Client-side XSS is definitely a threat and poses a problem, server-side JavaScript injection is also a huge threat and much more dangerous problem in an application. Among many vulnerabilities, SSJI is among one of the most severe web vulnerabilities on the web today.

Among several difficult aspects of writing secure JavaScript code, one of them is how easy it is to introduce accidentally proneness into an application just because of simple misconfiguration.

Preventive measures to be taken: 

1. SSJI is an injection vulnerability. Any vulnerabilities and symptoms associated with it must be carefully handled and mitigated. 

2. Most of the time concatenation of string of unsanctioned dynamic user input results in a vulnerability and Javascript injection is no different. 

3. For a server-side command, if user input is required then proper validation needs to be done. Eval function should be avoided which will significantly reduce the risk of such vulnerabilities.The main use of eval function is the speed it offers but any JS code it can compile and execute which will significantly increase the security risk of the application.