Penetration ideas for front-end and back-end separation projects of Vue

introduction

In the current development environment, more and more manufacturers choose Vue.js to realize the writing of front-end functions, and the mature front-end framework can already realize the functions realized by the back-end code, so the back-end is currently only responsible for providing Api interfaces and documents , which is convenient for the front end to call at the same time. This article mainly introduces how to conduct penetration testing for such websites with front-end and back-end separation, and how to conduct penetration testing efficiently has become a key concern.

train of thought

The architecture of a general front-end and back-end separation website is basically Nginx + Vue.js + Java (Tomcat/SpringBoot), and the written Vue code is WebPack packaged and released, and the browser engine can dynamically parse and render the page to form the final form, which you can see The system interface, and the js and css are packaged and compressed, which is difficult for us to read normally.

The naming rules of js files packaged by WebPack are:模块名称+ 模块内容Hash值

For example:app.1b9d4d540cea3c00d632V2.0.2_1610699496426.js

The usual penetration ideas are generally as follows:

Find unauthorized API interfaces to obtain sensitive information for further use, such as obtaining information such as system user account passwords.
Find unauthorized API interfaces to analyze functions, such as searching for file uploads, changing avatars, and other functions.
Find unauthorized Api interfaces to try to perform common tests, such as SQL injection, XSS, SSRF, command execution, XXE, Fastjson, Shiro, etc.

The packaged js file.

Active API interface acquisition

1. Quickly extract the Api interface through the Chrome browser plug-in findsomething.

2. Get it through URLfiner go run main.go -a "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36" -u http://www.xxxxxx.cn -o . -m 2 -t 20

parameter explanation

-a specifies the ua header
-u specified URL
-o specifies the output
-m crawl depth
-t crawl thread

Passive API interface acquisition

Q: Why passively obtain the Api interface?

A: webpack cares about performance and loading time;
for example: loading chunks asynchronously and prefetching. During the packaging process, modules are combined into chunks. Chunks are combined into chunk groups and form a graph of interconnected modules.
Chunk has two forms:
initial (initialization) is the main chunk at the starting point of the entry. This chunk contains all modules and their dependencies specified for the entry point. non-initial is a block that can be lazy loaded

The specific explanation is:
Some front-end applications have different menus that correspond to different chunk.js.
For example, a system defaults to a user that only displays a few menus. Two chunk.js are loaded,
but when other menus are accessed, the Loaded new chunk.js

The comparison is as follows:
visit https://a.testivy.cn/#/job to load js as follows:
app.261acb1e.chunk.js
main.24f96504.chunk.js
but when visiting https://a.testivy.cn/# The js loaded by /widget is as follows:
app.261acb1e.chunk.js
main.24f96504.chunk.js
app.281d33fb.chunk.js

found one more app.281d33fb.chunk.js If it is said to use active collection at this time, it may be This unloaded js cannot be collected, so this is why it is passively obtained.

HaE burpsuite plug-in: After enabling this plug-in, we only need to click on the website, such as the reset password button, login button, registration button, etc. Clicking these buttons may load some unloaded chunk.js files, Then go to burpsuite to check some interface leaks matched by HaE

Filter hosts.

Look at the API interface leaked by the JS file.

Then organize the API interfaces collected actively and passively into a txt file and save it in, and then use it to httpx detect some web information such as a title, Server, etc., so as to judge whether the API interface has been authenticated.

./httpx -l url.txt -sc -title -cl -location

parameter explanation

-l specifies the file
-sc display status code status code
-title display title
-cl display body length
-location If a 301 redirect is returned, display the address of the 301 redirect

A little green among thousands of flowers.

The API interface is not authenticated, resulting in information leakage.

All other interfaces are opened as 401.

Use this interface to query the address of the leaked js file.

After extracting the key code, Oe.get("".concat(Se(),"/api/xxx/xxx/xxx/v1/user/all"),e,"json")it can be found that it is a get request. If the Api interface found is similar to: /api/xxx/xxx/xxx/v1/file/upload, this case is generally a post request, so we can find out the body content parameters of the request by looking at the js file, so as to construct the upload package To achieve file upload.

Tips

1. In normal scenarios, the front-end project is generally built on the public network, and the API interface, that is, the back-end server is deployed on the internal network. However, in many cases, developers will use the Api backend on the public network to facilitate management and debugging. Build a background management interface on the server to facilitate data management. In this case, there will be a certain chance that the IP of the back-end server will be leaked, so we can not only find the API interface in the js file, but also try to obtain the IP and domain name.

2. The server has opened multiple ports. The front-end service is built on port 80, and the back-end API service is built on port 8080. In this case, we use the API interface collected earlier to run authentication and information leakage on port 80. We can’t run it, so we can check whether there are some web services running on other ports, such as Tomcat, Springboot, etc. For these ports, we can try to run the API interface path, and there may be unexpected gains.

Tools used in this article

HaE：https://github.com/gh0stkey/HaE
URLFinder：https://github.com/pingc0y/URLFinder
FindSomething: https://chrome.google.com/webstore/detail/findsomething/kfhniponecokdefffkpagipffdefeldb
Httpx：https://github.com/projectdiscovery/httpx