1. An overview of the

This article is not a big and comprehensive course, but just a common problem in our daily life, because network security is a big topic, we only introduce what front-end engineers should know and should know. This includes XSS, CSRF, click hijacking, SQL injection, OS injection, request hijacking, DDOS, and simple defense strategies.

2. XSS

XSS is called Cross Site Scripting, but it’s called XSS because the acronym overlaps with CSS. Cross-site scripting is an attack that runs illegal HTML tags or JavaScript in the browser of a registered user of a Web site with a security vulnerability.

So how does XSS attack in general? Let’s say we have an input or textarea on the page to collect data from the user, which normally would not be a problem. Let’s say the user input is . When we add the user’s input to the page via innnerHTML, we run the code and alert pops up.

document.body.innerHTML = inputValue;
Copy the code

It can be found that the JS script input by the user can be executed, which forms a security vulnerability. Many hackers first test whether the website can be XSS by means of alert, which means that any script in JS can be run. The account password entered by users without their knowledge will be recorded and sent to them by hackers. They can also rewrite the page with JS to show illegal pictures, and copy the user’s login status to the hacker’s computer so that hackers can operate with the user’s identity and so on.

Generally there are two types of XSS attack way, one kind is described above by the input input attack is called a storage type, the content of the user input will be stored in the database, perform every time they open the page, another is via the url parameter attack is called reflective, suppose we carry website url will render to the page content.

http://localhost:8080/index.html?name=yd

Copy the code

The hacker could send the following link to the user, and once opened, the user would execute the script.

http://localhost:8080/index.html?name=<script>alert(123)</script>

Copy the code

1.XSSThe harm of

In short, javascript does what it does.

1. Get page data

2. To get the Cookies

3. Modifying front-end Logic

4. Send the request

5. Get user information and login status

6. Cheat users

2.XSSTo guard against

1. You can set the response header x-xss-protection in the header. By default, XSS attacks are disabled. If XSS attacks are detected in the URL, the page is denied access. However, it is ineffective against storage attacks and can only intercept the presence of injection attacks in the URL.

ctx.set('X-XSS-Protection'.0); // Allow XSS attacks
Copy the code

There are four types of values:

0: XSS attacks are allowed

1: disables XSS attacks. If a cross-site scripting attack is detected, the browser clears the page (removing unsafe parts)

1; Mode =block Enables XSS filtering, and if an attack is detected, the browser will not clear the page, but prevent the page from loading.

1Report = Enable XSS filtering, and if cross-site scripting attacks are detected, the browser clears the page and sends a violation report using the CSP report-URI directive’s functionality.

Typically, the browser defaults to 1 to disable XSS attacks.

3. CSP

CSP Content Security Policy is an additional layer of Security to help detect and mitigate certain types of attacks, including XSS and data injection attacks. These attacks can be used for anything from data theft to website destruction or distribution as versions of malware.

A CSP is essentially a whitelist, where developers explicitly tell the browser what external resources can be loaded and executed. We just need to configure the rules. How to intercept is up to the browser itself, so we can minimize XSS attacks in this way.

He did this in several ways:

Content-security-policy: default-src 'self' # content-security-policy: default-src 'self' Img-src https://* # Do not allow loading of any source frames content-security-policy: child-src 'none'Copy the code

The general attack is that our website executed the JS script of other websites, injected the hacker’s JS code. Assuming that our website is set up to load only its own code, the injected JS script will not be able to execute.

# allow only javascript from your own site to be executed. Ctx. set(' content-security-policy ', "default-src 'self'") # external resources on port 4000 cannot be loaded when browser opens connection https://127.0.0.1:3000? The from = < script SRC = "http://127.0.0.1:4000/hack.js" > < / script >Copy the code

4. Translation characters

The most common way to translate output that can never be trusted by user input is to translate quotes, Angle brackets, and slashes, for example by using the following function.

function escape(str) {
    str = str.replace(/&/g.'& ');
    str = str.replace(/</g.'< ');
    str = str.replace(/>/g.'> ');
    str = str.replace(/"/g.'&quto; ');
    str = str.replace(/'/g.'& # 39; ');
    str = str.replace(/`/g.'the & # 96; ');
    str = str.replace(/\//g.'/ ');
    return str;
}

escape('<script>alert(123)</script>'); // < script> alert(123)< / script>

Copy the code

This kind of translation is called blacklisting, and it is a translation of something that is unsafe, such as \<\>, but there is one case where blacklisting cannot be done.

Sometimes we have to deal with some rich text, obviously can’t through the above ways to translate all the characters, as this is the desired format also filtered out, in this case, the whitelist filters were used, usually, of course, also can through the blacklist filter, but given the need to filter the tag and the label attribute is really too much, much more is recommended to use white list.

Whitelisting allows some safe characters to pass and all others to be translated. It is recommended to use the NPM package of XSS to handle this.

/ / into the XSS
const xss = require('xss');

let html = xss('<h1 id="title">XSS Demo</h1><script>alert("xss")</script>');

// 
XSS Demo
< script> alert("xss")< /script>

console.log(html);
Copy the code

You can see here that XSS retains the H1 tag because it is secure, and translates the script tag because it is not completely secure.

In general, we do not recommend using innnerHTML to insert data entered by the user or parameters retrieved from the URL directly into the page. In addition to the XSS module and escape method, HTML templates can also be introduced. Ejs templates are the most common. React, Vue, Angular and other frameworks already handle XSS for us by default.

InputValue <%= inputValue %>Copy the code

5. HttpOnly Cookie

The reason why users’ cookies can be retrieved is that JS can obtain cookies. We can prevent such attacks by preventing JS from accessing cookies.

This is the most effective defense against XSS attacks to steal users’ cookies. When Web applications set cookies, their attribute is set to HttpOnly, which can prevent the cookies of the Web page from being stolen by malicious javaScript clients and protect users’ cookie information. The cookie is set to HttpOnly.

response.addHeader('Set-Cookie'.'uid=112; path/; HttpOnly')
Copy the code

If you set cookies like this, js can’t access them.

Those are some basic defenses against XSS attacks. CSP, character translation, HttpOnly Cookie.

6.CSRF

Cross Site Request Forgery (CSRF) is a common Web attack that exploits a user’s logged in identity to perform illegal operations in the user’s name without the user’s knowledge. In simple terms, the attack steps are also very simple.

The user has logged in to site A and recorded the login status (cookie) at site A, so it is not necessary to log in again. In the case that the user does not log out of site A, that is, when the login state is still valid, he visits the luring dangerous site B provided by the malicious attacker, and site B calls an interface of site A, such as the submission interface. If site A does not do any CSRF defense, it will be attacked.

The principle is also very simple, because site B calls the submission interface of site A. According to the principle of cookie matching, the interface of which site is called will carry the cookie of which site, carrying the cookie of the user’s site A. At this time, the parameters transmitted by the submission interface are actually provided by site B. The interface was invoked as a user without the user’s knowledge.

Many people may feel that site B calls the interface of site A cross domain ah, that how line. That’s ok, cross-domain is just a way of saying that cross-domain is a way of saying that the front end can’t get the return value of the interface, but it doesn’t mean that the request can’t be sent out, and as long as the request is sent out, the purpose of the attack is achieved, and the return value doesn’t matter.

There are three ways to defend against CSRF.

The first is to prohibit third-party websites from carrying cookies, but there are compatibility problems. The second is to verify the referrer transmitted by the request and determine whether it is a legitimate referrer. In fact, a lot of anti-theft chain is the way to verify the referrer.

Referrer is the front-end page address that sends the request, which can be shielded and filtered through the method of referrer. However, there is also a problem with HTTPS, which does not send referrer, so it is also a compatibility problem.

At present, the most effective way is verification code or human-computer interaction. In the past, users’ funds could be transferred through CSRF, because the transfer is relatively simple, but now the basic transfer will send verification like verification code.

Click hijacking

Click hijacking is a kind of visual deception attack method, the attacker will attack the website through the way of iframe nesting embedded in their own webpage, and set iframe transparent, in the page to reveal a button to induce users to click.

When you click this button, you actually click on one of the buttons in the iframe, which triggers the ability of the iframe to be embedded in the website, for example, if you want to like a page, you can disguise the page with the iframe.

X-frame-options is an HTTP response header that is well supported in modern browsers. This HTTP response header is designed to defend against clickjacking attacks nested with iframe.

The response header has three optional values

DENY indicates that the page is not allowed to be displayed in the iframe mode

SAMEORIGIN says pages can be displayed in the same domain using an IFrame

Allow-from indicates that the page can be displayed in the iframe of the specified source

ctx.set('X-FRAME-OPTIONS'.'DENY')
Copy the code

You can also use JS to determine if you are in an IFrame. However, this method also has problems. In cross-domain cases, the inner page cannot operate on the outer location.

if(self ! == top) { top.location.href = self.location.href;// Change the outer location to the inner location
    document.body.innnerHTML = ' '; // Clear the page content
}
Copy the code

8. SQL injection

SQL injection is one of the most common network attacks. It does not use the bugs of the operating system to implement attacks, but aims at the negligence of the programmer when writing. Through SQL statements, users can log in without an account or even tamper with the database. SQL injection attacks tend to be back-end, front-end students can understand.

SQL > select * from user where userName = ‘userName’ and password = ‘password’;

const sql = 'select * from user_table where username= "'+ userName +'" and password = "' + password + '"';
Copy the code

What happens when the user enters the correct username and password

const userName = 'yd';
const password = '123456';

const sql = 'select * from user_table where username= "'+ userName +'" and password = "' + password + '"';

// select * from user_table where username= "yd" and password = "123456"
Copy the code

However, if a hacker enters a password of 1″or”1″=”1 “, there will be a problem. This is an SQL that will always execute successfully. Username =”yd” and password= or 1=1; Constant set of SQL.

const userName = 'yd';
const password = '1"or"1"="1';

const sql = 'select * from user_table where username= "'+ userName +'" and password = "' + password + '"';

// select * from user_table where username= "yd" and password = "1" or"1"="1"
Copy the code

In general, it is not allowed to concatenate SQL. All query statements are recommended to use the parameterized query interface provided by the database. Parameterized statements use parameters instead of embedding user input variables into SQL statements, and do not directly concatenate SQL statements, such as the query method in the mysqlJS library in Node.js.

const sql = ` SELECT * user_table WHERE username = ? AND password = ? `
res = await mysql.query(sql, [ctx.request.body.username, ctx.request.body.password]);
Copy the code

In addition, to strictly limit the operation of the web application database permissions, and gives the user can only meet the minimum permissions, so as to minimize injection attacks to the harm of database, the back-end code to check whether the input data is in line with expectations, strictly limit the type of the variable, such as some matching processing using regular expressions. For special characters to enter the database (‘,”,\,<,>,&,*,;) Etc., for translation processing, or coding conversion **. Almost all back-end languages have methods for translating strings, such as the LoDash. _escapeHTMLchar library for LoDash.

9. OS command injection

OS command injection is similar to SQL injection, but SQL injection is aimed at the database, while OS command injection is aimed at the operating system. OS command injection attack refers to the execution of illegal operating system commands through Web applications to achieve the purpose of attack. As long as shell functions can be called, there is a risk of attack. If the shell is called inadvertently, you can execute the inserted illegal command.

Take Node.js as an example, add the project specified by the user to the interface that needs to be downloaded from Github

const exec = require('mz/child_process').exec;
const params = { /* User input parameter */};
exec(`git clone ${params.repo}/some/path`);
Copy the code

What if the argument passed is as follows

https://github.com/xx/xx.git && rm -rf /* &&
Copy the code

Rm -rf /* delete all contents of the server if the user has high permissions.

10. Request hijacking

The following is not the concept of our front end, but very common, here also said, understand.

Request hijacking is divided into two types, one is DNS hijacking, one is HTTP hijacking.

A DNS server is a domain name server, which translates a domain name into an IP address. If this is tampered with, the destination is not the intended destination. We have a host file in the computer, that is the local DNS, if you encounter DNS hijacking can check whether the local host file is tampered with.

HTTP hijacking is common. HTTP itself is a plaintext transfer, and it is likely that some link in the transfer project will be tampered with. For example, we often encounter such a situation. When we connect to the wifi of the railway station at the railway station, whatever page we open at this time will appear the page for logging in to the wifi. This is essentially tampering with the site you visit at the router layer, not the carrier.

HTTP hijacking can only be upgraded to HTTPS because it is a plaintext transport.

11.DDOS

Here I refer to Teacher Ruan Yifeng’s blog [DDOS Attack Prevention Tutorial].

DDOS is not a kind of attack, but a broad category of attacks, he has dozens of types, new attack methods are constantly invented, website running each link, can be the target of attack. As long as a link break, so that the whole process can not run, it has reached the purpose of paralyzed service.

One of the more common attacks is the CC attack. It simply sends too many normal requests to the server, causing it to go down.

When I encounter is CC attack, most probably all over the world more than 20 IP address request in turn, each address request in 200 ~ 300 times per second, when I watched the access log, feel those requests come flooding, the twinkling of an eye is a lot of, a few minutes of time, the volume of the log file is 100 MB.

To be honest, this is a small attack, but my personal website has no protection, the server is still shared with other people, this kind of traffic immediately went down.

The current DDOS attack will not reach your server itself, because a large number of requests are likely to be fully occupied in the router in the machine room, the request has not reached the server layer, generally in this case the operator will directly take the server offline. So the server layer is basically not easy to control.

We can back up the site, which means you have to have a backup site, or at least a temporary home page. If the production server goes offline, you can switch to the backup site immediately.

Backup sites do not have to be fully functional, if you can achieve full static browsing, can meet the needs. At a minimum, it should be possible to display an announcement telling users that something is wrong with the site and that it is being fixed. This temporary home page is recommended for sites with high bandwidth that can handle attacks.

You can also intercept HTTP requests. If a malicious request has characteristics, it’s easy to deal with: intercept it directly, either on the hardware, server, or firewall.

HTTP interception is based on the premise that the request must have characteristics. True DDOS attacks, however, are featureless, with requests that look like normal requests and come from different IP addresses, making it impossible to intercept. That’s why DDOS is especially hard to defend against.

The cost of DDOS attack is relatively high, we can increase the cost of attack through broadband expansion + CDN.

12. The crawler

Crawlers can crawl content from websites, and Cheerio and HTTPS modules can be used for demonstration in Node.

const cheerio = require('cheerio');
const https = require('https');

let html = ' ';

const$=' ';

https.get('url'.res= > {
    res.on('data'.data= > {
        html += data; // Save the returned data
    });
    res.on('finish'.() = > {
        $ = cheerio.load(html); // Cheerio parses data
        // $is the dom tree, like jq.})})Copy the code

Cheerio is similar to jquery in that HTTPS can send HTTPS requests. In the Finish method, you get the HTML for the page.

There are a variety of ways to defend against crawlers. Such as verifying the UA, referrer or captcha of the browser. There are things like the number of visits per hour, the number of visits.

Key information can also be obfuscated with images, such as some text we directly render by sending the interface back to the image. SPA single page itself is a means of anti-crawling, but one of his biggest shortcomings is not friendly to search engines. Search engines use crawlers. So SSR rendering was introduced later to solve this problem.

There are also some more advanced defenses, which are the technical limitations of the front end.

Font out-of-order method, the service returns to the front in the HTML, text and users to actually see inconsistencies, such as service returns div total content is 4998, and 1995 page shows the real, his approach is simple, the use of a special font library, because it is to find the font of the font rendering library, rendered in the form of a font library. In this font library, 4 corresponds to 1,8 corresponds to 5, and that’s fine.

You can also generate images of important fonts on your site and render them using iconfont.

There is also a canvas fingerprint reverse crawling method. Canvas fingerprint means that as different hardware supports different canvas, as long as you draw a very complex canvas, there will always be pixel-level error in the image you get. Considering that the crawler code is uniform, even for Selenium, it is ghost, so fingerprints are generally consistent, so the chance of bypassing is very low. But in fact this is not the case, domestic companies are usually IT unified installation, both software and hardware are surprisingly consistent. Therefore, canvas fingerprint similarity is particularly high.

Finally, you can see for yourself that the headless browser is a real miracle.