Online fault: foreign visit, picture blank in the page!!

A few days ago, there was a gray function on the line, and the pictures could not be displayed when we received some business reports from foreign users in the afternoon, but the domestic visits were normal, so we suspected that it was caused by foreign CDN problems.

First, the status quo:

  1. Image saved in Alicoss
  2. Ali Cloud CDN is used in China
  3. Akamai (global CDN vendor) used abroad

Supposedly, the CDN has, the picture should not be inaccessible. Therefore, in mind according to the principle of CDN, first think about the possible problems

Principle of CDN

The full name of CDN is Content Delivery Network, which is also called Content Delivery Network. CDN is an intelligent virtual network built on the basis of the existing network. It relies on edge servers deployed in various places to enable users to obtain the content they need nearby, reduce network congestion, and improve user access response speed and hit ratio.

As shown in the figure above, the logic of CDN is divided into two steps: DNS resolution and request edge node.

Select * from DNS;

$ dig juejin.cn

; <<>> DiG 9.10.6 <<>> juejin.cn
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 63296
;; flags: qr rd ra; QUERY: 1, ANSWER: 9, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 4096;; QUESTION SECTION: ; juejin.cn.IN	A

;; ANSWER SECTION:
juejin.cn.		412	IN	CNAME	juejin.cn.w.cdngslb.com.
juejin.cn.w.cdngslb.com. 60	IN	A	112.85.251.229
juejin.cn.w.cdngslb.com. 60	IN	A	112.85.251.227
juejin.cn.w.cdngslb.com. 60	IN	A	112.85.251.231
juejin.cn.w.cdngslb.com. 60	IN	A	112.85.251.224
juejin.cn.w.cdngslb.com. 60	IN	A	112.85.251.225
juejin.cn.w.cdngslb.com. 60	IN	A	112.85.251.230
juejin.cn.w.cdngslb.com. 60	IN	A	112.85.251.226
juejin.cn.w.cdngslb.com. 60	IN	A	112.85.251.228

;; Query time: 9 msec
;; SERVER: 192.168.3.1#53(192.168.3.1);; WHEN: Sat May15 14:26:26 CST 2021
;; MSG SIZE  rcvd: 203
Copy the code

This can be seen in the list of ANSWER SECTION

  1. Juejin. Cn is the cname record pointjuejin.cn.w.cdngslb.com
  2. juejin.cn.w.cdngslb.comSeven A records are returned, and the seven IP information isJiangsu Xuzhou UnicomMy address isShanghai unicom, and you can see that the returns areTo the nearest node. In fact, CDN has a lot of edge nodes.

Tcpdump is used to monitor DNS UDP packets

  1. Enter in a windowsudo tcpdump -n -s 1500 udp and port 53
  2. Enter in another windowping juejin.cn

The monitored UDP packets are as follows:

21:49:13.960212 IP 192.168.3.201.52647 > 192.168.3.1.53.37581 + A? Juejin. (27) 21:49:13.975290 IP 192.168.3.1.53 > 192.168.3.201.52647: 37581 9/0/0 CNAME juejin.cn.w.cdngslb.com, A 112.85.251.229, A 112.85.251.230, A 112.85.251.226, A 112.85.251.228, A 112.85.251.224, A 112.85.251.231, A 112.85.251.225, A 112.85.251.227 (192)Copy the code

192.168.3.1 is the IP address of the router. That is, the local machine asks the router for DNS resolution, and if the router has already cached it, it will return directly.

Recurring problems

Let’s go back to the problem. If there is no problem with the edge node returned by CDN, the picture should be accessible soon, and the CDN manufacturer will not have this problem. So what’s the problem?

The problem could not be repeated in the company environment, so we had to find an environment closest to the customer scene to test, so we managed to get a Test machine of Hong Kong Window system, and went to see it remotely, but there was indeed a problem.

The image is not displayed in the interface, but is accessed directly from the browser. A cross-domain error occurred when accessing the image in developer mode.

A normally displayed image request returns an HTTP header like this:

Response Headers:
    accept-ranges: bytes
    access-control-allow-origin: *
    etag: "A31F477F3232DA431D3B77543C3EBF92"
    last-modified: Thu, 25 Jul 2019 01:37:03GMT ... omitCopy the code

1. access-control-allow-origin

The wildcard * character is allowed to be referenced by any website. If you want the resource to be accessed only by the specified domain name, just change the * to the domain name as follows:

access-control-allow-origin: `https://juejin.cn`
Copy the code

2. etag

Etag is an attribute in the HTTP protocol cache logic. The purpose of CDN is to reduce network access because caching is a must.

For images that cannot be displayed, the request header looks like this:

Response Headers:
    accept-ranges: bytes
    etag: "A31F477F3232DA431D3B77543C3EBF92"
    last-modified: Thu, 25 Jul 2019 01:37:03GMT ... omitCopy the code

There is no access-Control-allow-Origin entry, so the page cannot be loaded.

SequenceDiagram Browser ->> Edge node: request image edge node ->> Browser: hit the cache, return image browser -) Browser: No CORS attribute in the response header Browser -) Browser: Throws a CORS exception, the image is not rendered

The solution is very simple, in the CDN background configuration return access-Control-Allow-Origin information can be