Network and Security

This is the 21st day of my participation in Gwen Challenge

With the development of the Internet, network security is increasingly complex and important, so today summarize some front-end related network and security knowledge points. I will expand from the core concepts of HTTP, browser loading principles, interaction technology, cross-domain, security, these five points.

HTTP Core Concepts

HTTP(/1.1) Core concepts

HTTP: HyperText Transfer Protocol HTTP is an application layer Protocol and the transport layer is TCP. Http1.1 works in half-duplex mode and is stateless

HTTP Core Concepts -HTTP Method

Verb.	Req. has body	Res. has body	Safe	Idempotent	Cacheable
GET	No	Yes	Yes	Yes	Yes
POST	Yes	Yes	No	No	No
PUT	Yes	Yes	No	Yes	No
HEAD	No	No	Yes	Yes	Yes
DELETE	No	Yes	No	Yes	No
OPTIONS	Optional	Yes	Yes	Yes	No

HTTP core concepts -Status Code

100: Continue

101: Switch protocols

200: ok

301: Moved permanently

302: Found

304: Not modified

400: Bad Request

401: Unauthorized

403: Forbidden

404: Not found

413: Payload too large

414: Uri too long

HTTP core concepts -Request/Response Headers

1. REQUEST/response Information

Origin: www.baidu.com
Host: www.baidu.com
The user-agent: Mozilla / 5.0 (X11; Linux x86_64; The rv: 12.0) Gecko / 20100101 Firefox 21.0
Referer: www.baidu.com/a/b.html
Date: Tue, 15 Nov 1994 08:12:31 GMT

RESPONSE:

Server: Apache/against 2.4.1
Date: Tue, 15 Nov 1994 08:12:31 GMT
Allow: GET, POST

2. Content Negotiation REQUEST:

Accept: text/plain
Accept-Charset: utf-8
Accept-Encoding: gzip,deflate
Accept-Language: en-US
Range: bytes 500-999

RESPONSE:

Content-Type: application/json
Content-Length: 348
Content-Encoding: gzip
Content-Language: en-US
Content-Range: bytes 500-999
Content-Disposition: attachment; filename=”guide.pdf”

3. Cache control REQUEST

If None – Match: “737060 cd8c284d8af7ad3082f209582d”
If-Modified-Since: Sat, 29 Oct 1994 19:43:31 GMT

RESPONSE:

Cache-Control: public, max-age=max
Expires: Wed, 21 Oct 2015 07:28:00 GMT
Pragma: no-cache
ETag: “737060 cd8c284d8af7ad3082f209582d”
Last-Modified: Sat, 29 Oct 1994 19:43:31 GMT
Vary: user-agent

4. Connect to REQUEST:

Connection: Upgrade
Upgrade: websocket
Expect: 100 – continue

RESPONSE:

Transfer – Encoding: chunked
Connection: keep alive
Location：www.baidu.com
Refresh: 5; www.baidu.com

5, Cookie REQUEST:

Cookie: PHPSESSID = 298 zf09hf012fh2; csrftoken=u32t4o3tb3gg43; _gat=1;

RESPONSE:

The Set – cookies: id = a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

Principles of Browser loading

Browser add-on principle – Cache Read

How browsers load — Blocked

The browser	HTTP1.1 Number of concurrent connections
IE 6, IE 7	2
IE 8, IE 9	6
Firefox 2	2
Firefox 3	6
Safari 3, Safari 4	4
Chrome 1,Chrome 2	6
Chrome 3	4
Chrome 4 or later	6
Opera 9.63, Opera 10.00 alpha	4
Opera 10.51 and above	8
Android 2-4 (default)	4

Optimization methods: (1), reduce the request to merge CSS, merge JS, CSS Sprite, base64 small pictures

(2) Add domain static resource server and CDN

DNS Lookup (DNS Lookup)

<meta http-equiv="x-dns-prefetch-control" content="off">  
<link rel="dns-prefetch" href="http://www.google.com">  
Copy the code

Browser add-on principle – Connect

Connect: close | keep-alive

Browser add-on principle – Receive

Optimization methods: (1) Reduce minify request, optimize picture, gZIP (2), improve network speed, increase bandwidth, CDN

Interactive technologies

Interactive technology – data interchange format

XML, JSON,

Interactive Technology – Front end -Form

<form action= "http://www.a.com/b" method="get"> <input type="text" name="name" value="Mike"> <input type="file" name="file"> </form> <! -- GET /b? Name =Mike&file=1.jpg HTTP/1.1 Host: www.a.com -->Copy the code

<form action= "http://www.a.com/b" method="post" enctype="application/x-www-form-urlencoded"> <input type="text" name="name" value="Mike"> <input type="file" name="file"> </form> <! -- POST /b HTTP/1.1 Content-length: 20 Host: www.a.com content-type: application/x-www-form-urlencoded name=Mike&file=1.jpg -->Copy the code

<form action= "http://www.a.com/b" method="post" encType ="multipart/form-data"> <input type="text" name="name" value="Mike"> <input type="file" name="file"> </form> <! -- POST /b HTTP/1.1 Content-length: 261 Host: www.baidu.com content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW ------WebKitFormBoundary7MA4YWxkTrZu0gW Content-Disposition: form-data; name="name" Mike ------WebKitFormBoundary7MA4YWxkTrZu0gW Content-Disposition: form-data; name="file"; filename="1.jpg" Content-Type: image/jpeg ------WebKitFormBoundary7MA4YWxkTrZu0gW-- -->Copy the code

Interactive Technology – Front end – WebSocket

(1), and HTTP

Passive link
Nonpersistent connection
TCP/IP
axios

(2), WebSocket

Full duplex
Permanent link
TCP/IP
Socket.io

Cross domain

Cross-domain – Picture ping/jsonp

Only GET requests can be sent
Limited transmission information
Cookie cannot be carried
Can’t set header

Cross domain – CORS

REQUEST:

GET/HTTP / 1.1 b
Host: www.b.com
Origin: www.a.com
X-Header: test

RESPONSE:

HTTP / 1.1 200 OK
Server: Apache / 2.0.61
N-Header: Test
Access-Control-Allow-Origin: www.a.com
Access-Control-Allow-Methods: GET, POST
–Access-Control-Allow-Headers: X-Header
-Access-Control-Expose-Header: N-Header
Access-Control-Max-Age: 1728000

Cross domain – CORS – cookies

REQUEST:

const xhr = new XMLHttpRequest();
const url = 'http://www.b.com';

xhr.open('GET', url, true);
xhr.withCredentials = true;
xhr.send();
Copy the code

RESPONSE:

HTTP/1.1 200 OK Server: Apache/2.0.61 N-header: Test access-Control-Allow-Origin: HTTP/1.1 200 OK Server: Apache/2.0.61 N-header: Test access-Control-Allow-Origin: http://www.a.com Access-Control-Allow-Methods: GET, POST Access-Control-Allow-Headers: X-Header Access-Control-Expose-Header: N-Header Access-Control-Max-Age: 1728000 Access-Control-Allow-Credentials: trueCopy the code

security

All input is untrusted

Safety – XSS

Cross Site Scripting

Example 1: Inject JS code directly in the comment box

<script>while(true) {alert(" You were attacked!" ); }</script>Copy the code

** Filter script tags

Example 2: Induced click

<img SRC =" image.jpg "onClick="alert" (' you have been attacked!! ')"> <a harf="javascript(' You have been attacked! ')"> </a>Copy the code

** Filter unsafe tag attributes/disable HTML

Example 3: Injection

<input type="text" id="name" value="${name}"> <! --name = "\"><script>alert('oops! ')</script>--> <! --name = "\" onClick=\"alert('oops!) \ "" -- >Copy the code

** All displayed fields are escaped by default

Safety – CSRF

Cross-site Request Forgery

Example: Forge A request from Site A at site B

<! -- User colleagues visiting sites A and B --> <! - B site - > < image SRC = "http://www.a.com/buy/car?id=111" > <! --or--> <form action="http://www.a.com/buy/car" method="post"> <input type="hidden" name="id" value="111"> </form>Copy the code

(1) Detect the referer (1), generate the CSRF-Token for the form (1), the server sets the CSRF-token in the cookie, and the client transmits the CSRF-Token through the custom header

That’s all for today’s sharing and welcome your valuable suggestions

HTTP Core Concepts

HTTP(/1.1) Core concepts

HTTP Core Concepts -HTTP Method

HTTP core concepts -Status Code

HTTP core concepts -Request/Response Headers

Principles of Browser loading

Principles of Browser loading

Browser add-on principle – Cache Read

How browsers load — Blocked

DNS Lookup (DNS Lookup)

Browser add-on principle – Connect

Browser add-on principle – Receive

Interactive technologies

Interactive technology – data interchange format

Interactive Technology – Front end -Form

Interactive Technology – Front end – WebSocket

Cross domain

Cross-domain – Picture ping/jsonp

Cross domain – CORS

Cross domain – CORS – cookies

security

Safety – XSS

Safety – CSRF

Related Posts

JS array

Micro channel applets map inverse address resolution using actual combat

Vue3 <script setup lang=”ts”> Usage Guide