Go to content
The Codest
  • About Us
  • Services
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
  • About Us
  • Services
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
2019-08-26
Software Development

XSS Security in popular Javascript libraries. Should I still be concerned?

Daniel Grek

XSS Security in popular Javascript libraries. Should I still be concerned? - Image

One must admit in terms of most popular Javascript libraries that in their history of development (9, 6 and 5 years for Angular, React and Vue, respectively), lots of good things happened in terms of security, especially related with vulnerability for XSS attacks. However, this article will discuss the small traps and principles that developers should still be aware of.

XSS

We live in the age of frameworks, not languages. This implicates that programmers should be able to worry less about many aspects of development, including security. The majority of current backend frameworks implement security modules, which are being tested by external, specialized companies and large societies. Therefore, declining security awareness could be apparent, for example between young programmers, who take more responsibility for the products, especially in terms of freelancing.

One of the common attacks on the client-side of the application is XSS (Cross-Site Scripting). It is performed by injecting runnable client-side scripts into web applications [1] and uses implemented HTML rendering methods or Javascript code evaluators that execute it. XSS is relatively lucrative as many different data may be gathered, including session cookies or user data, and it can install a tracking application such as a keylogger, making it dangerous for both users and business owners. Sometimes, other forms of attack are performed to allow XSS on the page, such as SQL injection.

Example

Login form on page renders loginName parameter send within GET request in login name input. Value is not processed neither by server or client-side of the application. By requesting: http://localhost:8080/login?name=<script>alert(document.cookies)</script> code is being executed and data is exposed

This is an example of a reflected XSS attack, where scripts are being injected through specially prepared URL address submitted to the victim and reflected by the server response. Other known popular forms of attacks are as follows:

  • Stored XSS performed with injected data stored on the server-side, usually by forms available in the application. The client application renders code that is stored, for example, in a database.
  • DOM XSS performs an XSS attack with no use of the server-side. In the further part of article, we will focus on this form of attack.

Current vulnerabilities in React and Vue libraries

For the current React/Vue versions, two major problems had been detected and not yet officially fixed. The first vulnerability has the same nature for every framework and is related to methods allowing raw HTML rendering within templates: v-html and dangerouslySetInnerHTML, respectively, for Vue and React. Each documentation [2] informs readers that unwise usage may expose users to XSS attack. If no other options allow for resolving the problem, ensure that the data is filtered and escaped. Although they are dangerous, you should not expect those methods to be fixed. Use them at your own risk.

In the first quarter of 2018, a large bug was detected in React, allowing direct code execution by setting the property for tag element. Passing example code within attributes, such as javascript:alert(1) and running a rendered link will execute the code. This issue [4] is still open and no fix has been prepared and merged, so make sure your code is safe. Examples proposed in official discussion suggest some ways to overcome this problem.

If updating to the latest versions is not possible, make sure that old issues don’t cause problems for you by ensuring that your code is not exposed for:

  • child node injection - React**,** usage of React.createElement [5]
  • server-side rendering - React/Vue [6]
  • CSS injection [8]

It is still about Javascript. It is still about front-end

Do not forget that in addition to frameworks or libraries themselves, Javascript as a language has some dangerous functions, which must be avoided or used with caution. They are generally related to DOM manipulation or script execution. eval() represents flagship functions of this kind and is extremely dangerous because it executes given stringified code directly [9]. Also,  take a better look at your code when finding one of these functions:

  • document.write
  • document.writeln
  • (element).innerHTML
  • (element).outerHTML
  • (element).insertAdjacentHTML

Here, using linters with proper rules set may be helpful in finding such vulnerable points. There are also plenty of open or commercial code analyzers that may help you detect security gaps in developed code.

No matter which library/framework is chosen, we still have to remember basic principles related to front-end development. First, always ensure that the external code you inject comes from a trusted source. Audit your dependencies, and choose them wisely. Some can contain serious vulnerabilities, exposing your code even if everything is fine with the code itself. You can read more about dependencies security here:

https://thecodest.co/blog/security-in-javascript-packages/

So… should you still be concerned?

Yes  - and I strongly encourage everyone to never trust external libraries or yourself in terms of security. No matter how safe you expect your software to be, always make an effort to test it as much as possible in terms of common attack forms [10].

  1. https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
  2. https://vuejs.org/v2/guide/syntax.html#Raw-HTML
  3. https://github.com/facebook/react/issues/12441
  4. http://danlec.com/blog/xss-via-a-spoofed-react-element
  5. https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0
  6. https://github.com/dotboris/vuejs-serverside-template-xss
  7. https://frontarm.com/james-k-nelson/how-can-i-use-css-in-js-securely/
  8. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#Do_not_ever_use_eval!

Read more:

Read more:

5 Mistakes You Should Avoid While Maintaining a Project in PHP

PHP Development. Symfony Console Component - Tips & Tricks

Why do we need Symfony Polyfill (... and why we shouldn't)

Related articles

Software Development

3 Useful HTML Tags You Might Not Know Even Existed

Nowadays, accessibility (A11y) is crucial on all stages of building custom software products. Starting from the UX/UI design part, it trespasses into advanced levels of building features in code. It provides tons of benefits for...

Jacek Ludzik
Software Development

5 examples of Ruby’s best usage

Have you ever wondered what we can do with Ruby? Well, the sky is probably the limit, but we are happy to talk about some more or less known cases where we can use this powerful language. Let me give you some examples.

Pawel Muszynski
Software Development

Maintaining a Project in PHP: 5 Mistakes to Avoid

More than one article has been written about the mistakes made during the process of running a project, but rarely does one look at the project requirements and manage the risks given the technology chosen.

Sebastian Luczak
Software Development

5 reasons why you will find qualified Ruby developers in Poland

Real Ruby professionals are rare birds on the market. Ruby is not the most popular technology, so companies often struggle with the problem of finding developers who have both high-level skills and deep experience; oh, and by the...

Jakub
Software Development

9 Mistakes to Avoid While Programming in Java

What mistakes should be avoided while programming in Java? In the following piece we answers this question.

Rafal Sawicki
Software Development

A quick dive into Ruby 2.6. What is new?

Released quite recently, Ruby 2.6 brings a bunch of conveniences that may be worth taking a glimpse of.  What is new? Let’s give it a shot!

Patrycja Slabosz

Subscribe to our knowledge base and stay up to date on the expertise from industry.

About us

We are an agile software development company dedicated to empowering our clients' digital transformation projects and ensuring successful IT project delivery.

    United Kingdom - Headquarters

  • Office 303B, 182-184 High Street North E6 2JA London, England

    Poland - Local Tech Hubs

  • Business Link High5ive, Pawia 9, 31-154 Kraków, Poland
  • Brain Embassy, Konstruktorska 11, 02-673 Warsaw, Poland
  • Aleja Grunwaldzka 472B, 80-309 Gdańsk, Poland

    The Codest

  • Home
  • About us
  • Services
  • Case studies
  • Know how
  • Careers

    Services

  • PHP development
  • Java development
  • Python development
  • Ruby on Rails development
  • React Developers
  • Vue Developers
  • TypeScript Developers
  • DevOps
  • QA Engineers

    Resources

  • What are top CTOs and CIOs Challenges? [2022 updated]
  • Facts and Myths about Cooperating with External Software Development Partner
  • From the USA to Europe: Why do American startups decide to relocate to Europe
  • Privacy policy
  • Website terms of use

Copyright © 2022 by The Codest. All rights reserved.

We use cookies on the site for marketing, analytical and statistical purposes. By continuing to use, without changing your privacy settings, our site, you consent to the storage of cookies in your browser. You can always change the cookie settings in your browser. You can find more information in our Privacy Policy.