Analyzing Alibaba Cloud CDN 403 Errors
To improve web performance, CDN is a standard service for accelerating access. Our site uses Angular and is relatively heavy on the frontend, so we adopted Alibaba Cloud CDN. However, we occasionally saw 403s — frustrating, since we use a CDN for speed; if it returns 403, what’s the point?
Concepts
OSS
Alibaba Cloud Object Storage Service (OSS) is a massive, secure, low-cost, highly reliable object storage with platform‑agnostic REST APIs and 11 nines durability. It’s suitable for websites and developers to store and access any data, anywhere.
CDN
Alibaba Cloud CDN is a distributed network of edge nodes layered over backbone networks, replacing the traditional single web‑server delivery model. Content is published to edge nodes and a scheduler routes user requests to the best node for lower latency and faster delivery.
Why 403 happens
Two details: 403 means unauthorized; the X-Swift-Error says orig response 4XX error.
We saw 403 when requesting a resource via CDN, even though the object existed in OSS. The missing link is understanding CDN vs. OSS.
When the browser requests a page, the CDN fetches resources. If an object is not cached at the edge, the CDN pulls from origin (OSS) using the client’s Referer header. If CDN allows your site (whitelisted Referer) but OSS hotlink protection does not, OSS will return 403 and the CDN forwards it.
Fix
Option 1
Add a.alanhe.me to OSS Referer anti‑leech whitelist as well, matching the CDN’s Referer whitelist.
Option 2
Disable OSS Referer protection (allow all). Then enforce Referer checks only at the CDN. This avoids maintaining two whitelists.
Recommended: Option 2
Notes
OSS Referer rules support ? and * wildcards, but protocol wildcards like https?:// are not supported (poorly documented). If you want to allow both http://alanhe.me and https://alanhe.me, list both explicitly:
Correct configuration
http://alanhe.me https://alanhe.meBoth are required.
Incorrect configuration
https?://alanhe.me
