Javascript to API Bugs

Introduction

With the advancement of technology, traditional web applications are being replaced by more modern web applications. The limitations of traditional Multi Page Application (MPA) and the performance issues they create have led to the rise of the new-generation Single Page Application (SPA). MPA applications retrieve different HTML pages for each resource from the server, loading a new HTML document with each page transition. However, SPA applications update the web interface in real-time using Virtual DOM and render only the necessary components without reloading the entire page, instead of fetching separate HTML pages from the server for each resource.

🔗 Related Resource: MDN Web Docs

MPA vs SPA

Page Loading

• MPA: A new HTML file is fetched for each page, and the page is completely reloaded.
• SPA: The page is not reloaded entirely; only the necessary parts are updated.

🔗 Related Resource: Google Developers

Performance

• MPA: There may be longer loading times during page transitions.
• SPA: Initial loading time might be a bit longer, but it provides faster interactions afterward.

🔗 Related Resource: W3C

User Experience

• MPA: The user experience might be slightly interrupted due to page reloads.
• SPA: The user experience is seamless and fast, as only content is updated.

🔗 Related Resource: React Documentation

Development Complexity

• MPA: Requires more server-side processing, and there is usually a separate workflow for each page.
• SPA: Requires more complex client-side management, but the server-side workload is lighter.

Virtual DOM

Single Page Applications (SPA) use the virtual DOM structure to provide high performance and enhance the user experience. Traditional web applications recreate the entire DOM with each page load, resulting in time delays. However, SPAs are loaded only once, and after that, the page content is dynamically updated using the virtual DOM.

🔗 Related Resource: Mozilla Developer Network

Searching API Vulnerabilities on Virtual DOM

Applications with a virtual DOM structure send all JavaScript code to the browser when the page is first loaded. This is one of the key differences in SPA (Single Page Application) applications.

🔗 Related Resource: OWASP

Secret API Endpoints

In black-box pentest scenarios, credentials for the application are typically not provided to the pentester. Therefore, obtaining the application’s endpoints without logging in becomes an important step.

As an example, let’s analyze the application at https://crapi.cyprox.io. This application is developed with React Native. When we visit the application, we are greeted with a login page.

🔗 Related Resource: HackerOne

When the form is filled with any information, a request can be detected being sent to the https://crapi.cyprox.io/identity/api/auth/login endpoint.

Body-Signature Methodology and Reverse Engineering

Some web applications use the body-signature methodology in HTTP requests. With this methodology, the body of the sent HTTP request is not visible in clear text and is transmitted in an encrypted form.

🔗 Related Resource: Google Cloud Security

Identifying API Key Values

Some web applications use API Keys in HTTP requests. These keys are typically used for authentication and authorization processes.

🔗 Related Resource: Microsoft Security

Resources

Here are some essential resources for further learning on JavaScript security and API vulnerability analysis:

• 🔗 OWASP
• 🔗 Google Developers
• 🔗 Mozilla Developer Network
• 🔗 W3C
• 🔗 HackerOne
• 🔗 Google Cloud Security
• 🔗 Microsoft Security

Conclusion

By understanding how JavaScript interacts with APIs, security professionals can uncover hidden API vulnerabilities, detect API key leaks, and analyze encrypted request bodies through reverse engineering. As modern applications continue to evolve, penetration testing methodologies must also adapt to effectively assess the security of Single Page Applications (SPAs).