The section
- 1-4 Familiar with basic environment
- 5-7 Troubleshooting scenarios
- 8-9 breakpoint explanation
- 10-13 Detailed explanation of data agent, QA answers
10. HTTPS garbled characters
Garbled characters are caused by a lack of HTTPS certificate
10.1 Installing the HTTPS Certificate on the macOs
The following installation steps are required to install the certificate on macOs
Menu bar — help –> SSL Proxying –> Install Charles root certificate
The first installation will prompt you
Don’t worry about this hint, we will manually add trust to the certificate, please be sure to use search, I have been looking for this certificate item for a long time, I even suspect that my Charles version is wrong, I have reinstalled it.
Once set, restart Charles
10.2 Setting the port to host
After the PC certificate is installed, garbled characters are displayed in the HTTPS file, which requires further Settings
Make sure you check
Proxy-> SSL Proxying Settings->SSL Proxying: Enable SSL Proxying
Common Settings to block port 443 at all sites
MAC may need to enter the user password once before setting up
You can see Jane’s site port is not 443 so we have to set it up separately
At this point, look again and you can see the corresponding body of HTTPS correctly
❝
Note: If a packet capture request does not work, it will be displayed in the Overview panel on the right. Host is not on our list (SSL Proxying Sttings)
10.3 After all the above operations are set, no request is found in the control panel
Please check whether stop recording has been turned off accidentally. This button indicates no more packet capture
The following is the normal operation point. Light it up again to see if there are any requests in the Structure panel
10.4 Installing the HTTPS Certificate on Windows -PC Version
https://www.cnblogs.com/fighter007/p/9152832.html
11. Proxy data
11.1 Solution that LocalHost cannot be proxied
This is operating system specific, and there are two ways to solve this: if an 8080 service is developed locally
http://localhost:8080
- The url address is http:// local IP address :8080, for example, http://129.168.1.8:8080
❝
MAC View local IP, terminal, ifConfig
- Add a local domain name. Point 127.0.0.1 to your domain name, anything you want. A.b.c.com
For MAC or Linux, modify the local host file
MAC You are advised to visually modify the host file SwitchHosts
MAC operations are as follows
Be sure to use admin privileges
sudo vim /etc/hosts
Add a domain name, insert it anywhere, okay
127.0.0.1 a.b.c.com
Copy the codeWindow Modifies the local host
11.2 Proxy local JSON data to interface return – do interface interception
Scenario description: Development environment, database does not have so much data, and do not want to write SQL, pretend not to know, ha ha ha
Create a TXT file or JSON file to delegate the data to the interface
Requirements, data is in strict JSON format online JSON verification
data.txt
[
{
"id": 1,
"name":"Zhang"
},
{
"id": 2.
"name":"Bill"
}
]
Copy the code
When a request is made again, the data is directly proxied to the local server instead of the server
Note: If the local file you want to delegate is not found or the interface needs data that is not strictly JSON in TXT, continue with the original system, ignoring map local
11.3 Commissioning Online Data Proxies on a Local PC
❝
When an error occurs in a link or interface of the online production database data, a certain interface data is proxy to the local code. Source-map is enabled in the local code and debugging can be performed directly
❝
Some data can be used in two systems, our similar system, directly take the source code for migration, but in the version copy, the new version, may be due to the background has not been able to import the data into the library now, can use the proxy way, to achieve the data first, direct development
❝
Production environment JS error, can not be very good debugging, proxy to the local load debugging;
Disadvantages: Online js and local JS are consistent, can not be confused, compressed; This scenario cannot be implemented if source-map is closed after webPakck is packaged, because the file names are inconsistent and the proxy is invalid
Corresponding to the demonstration
First demonstrate the proxy of system A’s data to system B and return it
There are two local services http://localhost:8080 and one http://localhost:3001
/getList interface, now port 8080 service request background database data, because the data has not done initialization, is currently empty; Want to use the data directly from the existing 3001 service
Purpose: Proxy 3001 service data to 8080 service as data source
The effect
11.4 How Can I Resolve Token Authentication In an Online Proxy To a Local Environment
The source address
11.3 above shows the scenario without interface authentication. If the background interface for each request is authenticated first, if the authentication fails, the user directly calls back the request and does not access the database, which is cool. We know that the token of the development environment and the token of the online deployment application are definitely two different online environments. The toke of the user is 1xxxxx after the local login, the token generated in the background is 2xxxxxx Charles
Knowledge:
- Map Remote Proxy interface (local proxy to online proxy)
- Rewrite rewrite request headers (addressing token authentication)
Operation steps:
-
Open the Charles
-
For ease of view, we only record the interface addresses we want Proxying– Recording Settings– include
http://a.b.c.com:3001 will not set see step 8
Where a.b.c.com:3001 is actually http://localhost:3001 add local domain name see 11.1
-
Disable caching to eliminate some distractions Tools–> No Cathing
-
Set the proxy remote interface Tools > Map remote
If we set the map remote to the dev environment, the interface should not be used to send requests. If we set the map remote to the DEV environment, the interface should be used to send requests to the dev environment
Here’s the key
- To override the token is to forge the request as the identity of the development environment, so we need to modify the request header
- Match is a Match and we want to override the token value in the header and this is just an example, you can actually Match value; Because our scenario here is I’m just going to use the tokens on the line and I don’t care about the tokens generated by the development environment so I don’t have to fill in the value here
- The value in Replace must be the token of the interface that we want to proxy online. Do not use the token generated by the local development environment because the interface verification request will fail. Then, in our complete login authentication process, my local user will log out
- Direct access. Now we have successfully faked the login by overwriting the token in the request header from the local environment and retrieved the data from the online production repository
Note:
- Agents through our online query interface of data in the local debugging, is no problem, but once the agent [submit] the data of the interface, it is risky, you query, no matter how many times query interface have idempotence, will not affect, but you submit interface, directly modify the current state of the data, Maybe you directly call the order return interface for the user (if the user has worked hard to calculate the combination of preferential prices, open the app, the data is lost, and the MMP comes).
- And if it is pure front-end, do not understand the background, this kind of operation risk is very high, because some business logic may affect several tables, several systems, then a mistake operation, may be a pile of background, the test staff around you this data for investigation
12. Charles captures app data
Grab the bag on the phone, PC and phone should be on the same LAN menu bar — “help –> SSL Proxying –> Install Charles root certificate on a mobile device or remote browser
Prerequisites:
- Cell phones and computers are on the same LAN
- Mobile phones also require a certificate
Procedure for installing a mobile phone certificate:
- Charles opens the top menu help –> SSL Proxying
After the iPhone certificate is installed, there is a two-level confirmation consent process for iPhone certificate installation
For Android phone version 7+, the App data cannot be captured. Due to system-level reasons, the system does not recognize the certificate file installed by the user
- Swipe to get root
- App developers embed a configuration in the native App
For Android phones, I have tested a situation: after the certificate is successfully installed, only webview data of the APP can be captured, but the original APP cannot capture THE HTTPS garbled code, or is it because of the certificate? And the agent in wifi is opened on Android. Even though Charles has not done any interception processing, It’s just that the traffic went through Charles. Some APPS will be disconnected from the Internet
[How to capture Douyin video and analysis methods]
13. Charles overwrites the request header
See 11.4 above for the detailed scenario: our request wants to write or Rewrite the request header
1. There has been a problem with an interface, and there may be various cases of data transfer during the joint adjustment with the background; The sample is as follows
axios.post('http://xxx/api/getList', {
// This is the parameter attached to the GET request address
params: {
a: 1,
b: 2
},
// Interface request header parameters
headers: {
name: 'zhangsan'.
age: 12,
fileName: 'xxx'
},
// Parameters of the POST request body
data: {
c: 1
}
})
Copy the codeThis interface, I have encountered, is extremely non-standard, you say it is a GET request, it has data request body data; You can say it’s a POST request, it has a URL and we can simulate a lot of different data by rewriting the header, the body, the host, whatever, without having to change our code directly
Link of QA
HTTPS indicates unknown
❝
If the certificate is faulty, go to Step 10
Two, can not catch the bag
❝
Check step 2, Step 4, and Step 7
Third, data is only recorded to the root path, the child path is not recorded
❝
See the explanation in breakpoint 9
Four, a site data only a few records, a lot of needed resources have not been recorded
❝
The Recording Settings of a site may contain multiple domain names. Check whether all hosts of the target site are added to the Recording Settings
5. Charles imported the certificate, which has been set to trust, but is still garbled
❝
Check Proxying Settings for SSL Proxying and add *:443
Vi. On the mobile end, the certificate is transmitted to the mobile phone, but the browser is not installed automatically
-
Send the certificate to wechat chat and click try to see if it can be installed
-
Download another browser to try, similar to QQ browser, UC browser
-
Manually Installing a Certificate
7, local proxy online interface, in the case of token, always fail
Check the explanatory points in 11.4
Charles used it for a few days and frequently retreated
❝
Dude, it’s time to pay. You can use the old version, or the pirated one