Front-end noun analysis

For example, a process is like a train, and a thread is like a train carriage. Threads run under a process, and a process contains multiple threads. Data between different processes is difficult to share. It is very easy to share the data of different threads under the same process. Processes consume more resources than threads. Processes do not affect each other. But a thread hang will cause the whole process to hang.

3. What is penetration testing

Penetration testing is to simulate hackers to attack the project, mainly to test the level of security defense capabilities of the project.

4. Black box testing, white box testing

Black: The tester conducts the test without knowing anything about the target system. That is, to simulate most attackers, attacking from outside the company. It is more difficult and time-consuming than white-box testing.

Bai: Simulate the unauthorized operation of product users to test the security of the project.

5. ssrf security vulnerability - backend vulnerability

SSRF (Server-Side Request Forgery, server-side request forgery) is a security vulnerability in which the attacker constructs a request and the server initiates the request. Generally, the target of an SSRF attack is an internal network system that cannot be accessed from the external network. Just because the request is initiated by the server, the server can request the internal system connected to itself but isolated from the external network. That is to say, you can use a service requested by the network as a springboard to attack.

Vulnerability cause

1. The server provides the function of obtaining data from other server applications

2. There is no filtering and restriction on the target address

For example, get the text content of the web page from the specified URL address, load the picture at the specified address, download the file, etc.

Bug fixes:

(1) Use the address whitelist
(2) Identify the returned content
(3) Need to use Internet resources (such as post bar using network pictures) and cannot use the whitelist:
first disable CURLOPT_FOLLOWLOCATION; then obtain the target ip through the domain name, and filter Internal ip; finally identify whether the returned content is consistent with the assumed content

6. Middleware

It is an independent system software or service program, and distributed application software uses this software to share resources between different technologies. It sits on top of the client/server operating system, manages computer resources and network communications, and is software that connects two independent applications or independent systems

7. Modularity

Modularization means that the codes of the login function are put together together. One folder contains the js, css and vue files of the module, which are easy to maintain at a glance, and those that can be reused can be extracted into components or public methods.

8. The difference between framework and library

The framework is structured, with architectural ideas included, to facilitate componentized and modularized development

A library is a collection of large and small tools that simplifies the code and provides some encapsulated methods that developers can call directly.

9. What is tomcat

It is a lightweight application server that relies on the back-end Java environment to start in daily development, and can be used as a proxy after startup—similar to nginx, and can deploy projects. Put the project to be deployed in the webapps folder of the root directory of tomcat, or write the virtual path in the tomcat/conf/server.xml file

Then start the service, you can use the local ip and port to access the project

10. Why domain name resolution is required

Prevent the ip from being fixed, so you need to use a domain name to access server resources. As long as you access the domain name, it will automatically access the current ip address to fetch data after resolution, instead of telling the user to change it manually every time the ip changes.

Oray Peanut Shells

No-IP

DynDNS

These three are common domain name resolution methods

12. The process from entering the URL in the browser to the completion of page loading

First, the browser checks whether there is an ip configured with this domain name locally. If not, it goes to the DNS server to find it. Then there is a three-way handshake and four waves. A request like this performs a TCP three-way handshake at the address that initiated the request. After the connection is successfully established, the server returns the corresponding data, and then performs four waves of tcp disconnection. Then the browser engine parses the html file, creates a dom tree, parses css, and then combines css and DOM to build a rendering tree, and then lays out and draws the rendering tree.

13. About template syntax and jsx syntax

Template syntax is to write tags directly in the template template to form a page, while jsx syntax is to write parsable tag code similar to innerHTML - rich text, and finally render the page through the render function.

14. Front-end and back-end WebSocket communication

Through WebSocket, the backend can actively send data to the frontend, which is mostly used for IM chat boxes, sports data statistics, online editing, barrage, and real-time update information.

The native webSocket mainly establishes a connection with the interface through the new WebSocket() method, and then uses the onError, onClose, onMessage, and onOpen methods to obtain information, and uses the WebSocket.send method to send information. During use, the window status needs to be monitored. Disconnect.

Websocket only needs one HTTP handshake, so the entire communication process is established in one connection/state , which avoids the non-state nature of HTTP, and the server will always know your information until you close the request

15. Generally, how to perform third-party login authorization

general idea

First, before the user jumps to our homepage A through the link, the routing guard detects that there is no user information in the browser cache, and jumps to the authorization confirmation page according to the method provided by Party A

When the user confirms

Immediately jump to the transition page B and put the code into a query parameter. After getting the code parameter on the URL, B calls interface 1 to obtain the token. The user information of the cloud assistant calls our interface for obtaining user information 3··················································································································

When the user cancels

When you come to the transition page B, B recognizes that there is no code on the url, and directly displays the copy: You have canceled the authorization, click the back button to return to the relevant page of the cloud assistant, click deauthorize and jump to our home page A through the link again... ·············

Other things to do:

Every time before entering the page, use the pre-routing guard to judge whether there is data in the local cache, and jump to the authorization confirmation page according to the method provided by Party A... The transition page bypasses the routing guard

16. Vue2 array rewriting

Vue's responsiveness is implemented through Object.defineProperty(). This api cannot monitor changes in the length of the array, nor can it monitor new additions to the array.

Vue cannot detect the operation of changing the array through the array index. This is not the reason for the Object.defineProperty() api, but Yuda believes that the performance consumption is not directly proportional to the user experience. Responsive detection of the array will bring a lot of performance consumption, because the array items may be large, such as 1000 or 10000 items.

So in order to operate the array more friendly and trigger responsive detection, Vue rewrites the method that causes side effects on the array (changing the original array).

Vue rewrites the 7 methods of the array through prototype interception, and first obtains the Observer of the array. If there is a new value, call observeArray to monitor the new value, then call notify, notify the render watcher, and execute update

Take the push method as an example, how to modify this method so that it can trigger responsive detection

Manually trigger an update when calling push - ob.dep.notify()

17. Understanding of CSS—margin collapse (also known as: penetration, breakdown) and high collapse

What is the height collapse? In the case of parent-child elements, give a margin-top to the child element, and find that this style makes the parent element move. No, no, no, this is not what I want. Why does this happen? Because The two elements are attached together, and when setting the vertical movement style margin-top or bottom, the renderer will recognize an error.

So in order for the style to take effect correctly, we need to separate the parent and child elements, setting border, overflow:hidden, padding, etc. for the parent element can solve this problem

18. To solve the problem No. 17, BFC block formatting is used

Then the new question is what is the BFC of css? It separates the current element through the css style and is not affected by other elements. This is used to clear the float. If we add the float attribute to the sub-element of an element, we will find This element has a high degree of collapse, what is a high degree of collapse is a new knowledge point, and I will talk about it later.

19. High collapse

When the height of the parent element is not set, it is expanded by the child element. That is to say, the height of the child element is as high as the parent element. When the child element floats, the height of the parent element will collapse . After the height of the parent element collapses, the elements below the parent element will move up, which will cause confusion in the layout of the entire page.

Floating elements are separated from the normal document flow. Generally, when calculating the height of container elements, the height of floating elements is not considered.

20. Why do you need to clear the float

Because the height of the parent box is inconvenient in many cases, but the child box floats and does not occupy a position, that is, the height of the parent element written above is not added to the calculation of the height of the parent element. When the height of the parent box is 0, it will affect the standard flow box below. .

clear: both clearing the float does not solve the problem of warp height collapse

One of the characteristics of BFC is that when calculating the height, the height of the internal floating elements will also be counted, so those who can realize BFC can realize clear floating

21. Static typing, dynamic typing, strong typing, weak typing

A variable type known at compile time is a static type; a variable type known at runtime is called a dynamic type.

A strong type does not allow implicit conversion, and a weak type allows implicit conversion.