Improving Website Security: Creating a Toolbox

There is a vast amount of valuable and private data that can be accessed from insecure sites and applications. Attackers know this and take advantage of the vulnerabilities they find.
As the number of cyberattacks continues to rise, application and website security should be a top priority for any modern developer.

Successfully implementing security can be hard, however. Especially if developers are just starting and are not yet familiar with common vulnerabilities. In this article, you’ll be introduced to tools and resources you can use to improve your understanding of vulnerabilities and security practices.

Why Should You Care About Application and Site Security?

You can create perfectly functional applications and sites that rely fully on device security features and tools. Due to this ability, it’s tempting to think that external security measures or incident response tools alone can keep your projects secure.

You should incorporate tools as a complement to intrinsically secure applications. By applying a combination of both, you can reduce the attack surface of the device or system your application or site is hosted on. You can use this guide when creating your incident response steps.

When developing projects you should incorporate security measures to protect host systems and data. It is easier to prevent security issues when you include secure coding best practices and testing from the start.

Addressing issues earlier can also reduce or eliminate future efforts needed to correct vulnerabilities. Early attention to security can help protect you from data loss or system breach. It can also protect you from liability for damages caused to your customers and reputation.

Resources and Tools for Improving the Security of Your Sites

There is a variety of open-source tools and resources you can use to audit and improve the security of your applications and sites. When using these tools and resources, make sure to only download or access files from trusted, source sites. Installing libraries or applications from third-party sites can introduce malicious code into your projects.

Resources

The following resources can help improve your understanding of security issues in websites and applications. These resources are created and provided by independent groups and are all free to access.

OWASP Top 10
The OWASP Top 10 is a curated list of the most common vulnerabilities in web applications. It provides you with information on each vulnerability, how to audit your application for it, and recommendations for addressing any issues. Each vulnerability entry also contains links to resources for more information.

MDN Web Security Docs
MDN Web Security Docs provides a wide range of documentation on common security issues in websites and applications. Each doc describes the issue and provides recommended fixes, including code samples.

4 Tools

Below are several tools you can use to audit and improve your application and site code. These tools can help you identify vulnerabilities and provide recommendations for fixes.

1. Lighthouse
Lighthouse is an open-source tool you can use to audit and detect JS libraries with known vulnerabilities. You can also use it to create an inventory of front-end JS libraries in use on a page. It works by comparing libraries in use to snyk’s vulnerability database.

Lighthouse includes features for auditing performance, progressive web apps, SEO, and accessibility. You can run it from Chrome DevTools, as a Node module, from a web UI, or the command line.

Pros of Lighthouse include:

• Performs a full site analysis
• Provides significant amount of information that you can use to improve site

Cons of Lighthouse include:

• Doesn’t differentiate between site types or purposes
• Interpreting results requires technical knowledge

2. SonarQube
SonarQube is an open-source Static Code Analysis Tool (SAST) you can use to automatically scan your code. You can use it to detect bugs, security issues and possible vulnerabilities, and code smells. Code smells are indications of possible logical or other issues in code.

SonarQube integrates with a variety of tools and can be extended via plugins. It supports a variety of languages, including JS, TypeScript, HTML, and CSS. You can also use SonarQube with React JSX, Flow, and Vue frameworks.

Pros of SonarQube include:

• Integrates easily with Integrated Development Environments (IDEs)
• Provides a complete code review

Cons of SonarQube include:

• Plugins cost money and licensing can be expensive for enterprise edition

3. Flow
Flow is an open-source tool you can use to check static types in JS. It enables you to analyze the data flow of your code and provides real-time feedback. You can use Flow to ensure code clarity, avoid issues caused by refactoring, and better understand old code.

You can integrate Flow with Babel, React, and a variety of code editors, including Atom, Sublime, and Visual Studio Code. Flow works on Windows, macOS, and Linux machines.

Pros of Flow include:

• Simple and easy to learn
• Efficiently inferences types

Cons of Flow include:

• Lacks robust library and IDE support
• Releases often include breaking changes

4. DOMPurify
DOMPurify is an open-source library you can use to sanitize HTML5, SVG, and MathML to prevent Cross-Site Scripting (XSS). It works by converting code in HTML to strings. DOMPurify converts technologies provided by a user’s browser into an XSS filter which is then applied to HTML.

You can use DOMPurify with all modern browsers and Node.js v8-v11.0.0. After you run the library functions, you can inspect changed elements to determine what risk was present.

Pros of DOMPurify include:

• Has real tests and descriptions based on actual XSS attacks
• Works in all browsers

Cons of DOMPurify include:

• Effectiveness is limited by the capabilities of a user’s browser

Framework Security Features

If you are using frameworks in your application, it’s important to understand what security features are built-in. Some frameworks have better documentation for security than others so it’s best to check third-party sources for a full understanding of your risks.

Vue Security Features
Vue includes features for automatic escaping and preventing the rendering of style tags in templates. You can also integrate a variety of security tools into Vue frameworks.

The automatic escaping functionality works for HTML content and attribute bindings.
For example, if user input contains scripting or commands, it is automatically escaped to a string to prevent script injection. This escaping is accomplished with native browser APIs such as textContent and setAttribute. Vulnerabilities caused by malicious inputs are restricted as long as the browser itself isn’t vulnerable.

Prevention of style tag rendering in templates prevents attackers from hiding links in your pages to redirect visitors. For example, a user could apply a custom style that places an invisible link over a button. When the user clicks the “button” they’re redirected to the attacker’s site. Vue recommends only allowing users to custom style specific-properties, not entire pages, to avoid this.

React Security Features
React recently included a feature that escapes values embedded in JSX scripts before rendering.
JSX is a syntax extension to Javascript that you can use in React to describe User Interfaces (UI). This feature converts values to strings to prevent XSS similar to Vue’s functionality.

Although React provides escaping, it does not otherwise address security, either in its documentation or functionality. To include security features with React projects or to understand what security issues exist, you must turn to external documentation.

Conclusion

Hopefully, this article provided you with some tools you can use to improve the security of your applications and sites. Using these tools and resources, you should be able to identify many of the vulnerabilities commonly faced by JS projects. Identifying and addressing these issues early can help protect both you and your users.