作者原文: Nginx反代cdnjs和fonts
最近有点不想用公共cdn, 于是就着手用自己手头的VPS里的Nginx反代Cloudflare cdnjs和Google fonts. 方法其实并不难, 特别是服务器上已经有Nginx环境的.
首先,毕竟是要用https的,所以准备好自己的域名以及ssl证书. 这里假设用cdnjs.yours.com反代cdnjs.cloudflare.com, 用fonts.yours.com反代fonts.googleapis.com和fonts.gstatic.com. 其中fonts.googleapis.com是返回各个字体的css文件, fonts.gstatic.com则是css文件里面标识的下载单个字体文件的域名.
1. Nginx反代cdnjs
假设ssl证书都已经设置好了, 在nginx的配置文件里的http结构添加cache信息, 如果没有http结构则只需添加在server结构外即可.
# cache路径, 过期时间, 最大大小
proxy_cache_path /home/wwwroot/cdnjs.yours.com levels=1:2 keys_zone=cache_cdnjs:20m inactive=1d max_size=100m;
在server结构里添加location反代设置.
location / {
# 设置referers白名单, 只有*.yours.com发过来的请求才会做反代, 其余请求直接返回403
valid_referers none blocked server_names *.yours.com ;
if ($invalid_referer) {
return 403;
}
proxy_pass_header Server;
proxy_set_header Host cdnjs.cloudflare.com;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Scheme $scheme;
proxy_pass https://cdnjs.cloudflare.com;
proxy_cache cache_cdnjs;
# cache过期时间1天
proxy_cache_valid 200 304 1d;
proxy_cache_key $host$uri$is_args$args;
expires 1d;
}
2. Nginx反代fonts
在nginx的配置文件里的http结构添加cache信息, 如果没有http结构则只需添加在server结构外即可.
# cache路径, 过期时间, 最大大小
proxy_cache_path /home/wwwroot/fonts.yours.com levels=1:2 keys_zone=cache_fonts:20m inactive=1d max_size=100m;
反代Google fonts会稍微麻烦点. 因为字体请求流程是这样的:
- 发送请求到fonts.googleapis.com/css, Google会返回一个css文件. 文件里包含不同字号大小的字体文件路径url(fonts.gstatic.com).
- 根据不同字号大小的url请求相应的单字体文件.
由此可见我们不仅先要反代请求到fonts.googleapis.com还要把返回的css文件里的fonts.gstatic.com全部替换为我们自己的域名fonts.yours.com.
在server结构里添加location反代设置.
# 反代字体请求发到fonts.googleapis.com
location /css {
valid_referers none blocked server_names *.yours.com ;
if ($invalid_referer) {
return 403;
}
# 将返回的css文件里的fonts.gstatic.com替换成自己的域名fonts.yours.com
sub_filter 'fonts.gstatic.com' 'fonts.yours.com';
sub_filter_once off;
sub_filter_types text/css;
proxy_pass_header Server;
proxy_set_header Host fonts.googleapis.com;
proxy_set_header Accept-Encoding '';
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Scheme $scheme;
proxy_pass https://fonts.googleapis.com;
proxy_cache cache_fonts;
proxy_cache_valid 200 304 1d;
proxy_cache_key $host$uri$is_args$args;
expires 1d;
}
location /icon {
valid_referers none blocked server_names *.yours.com ;
if ($invalid_referer) {
return 403;
}
sub_filter 'fonts.gstatic.com' 'fonts.yours.com';
sub_filter_once off;
sub_filter_types text/css;
proxy_pass_header Server;
proxy_set_header Host fonts.googleapis.com;
proxy_set_header Accept-Encoding '';
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Scheme $scheme;
proxy_pass https://fonts.googleapis.com;
proxy_cache cache_fonts;
proxy_cache_valid 200 304 1d;
proxy_cache_key $host$uri$is_args$args;
expires 1d;
}
# 反代单个字体文件请求到fonts.gstatic.com
location / {
valid_referers none blocked server_names *.yours.com ;
if ($invalid_referer) {
return 403;
}
proxy_pass_header Server;
proxy_set_header Host fonts.gstatic.com;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Scheme $scheme;
proxy_pass https://fonts.gstatic.com;
proxy_cache cache_fonts;
proxy_cache_valid 200 304 1d;
proxy_cache_key $host$uri$is_args$args;
expires 1d;
}
3. referer白名单
原以为上一节代码中的valid_referers写法是只让*.yours.com域名才能反代的白名单. 但是自己浏览器直接访问cdnjs.yours.com请求却是可以被成功反代的. 于是上网查了查原来白名单的写法是这样的.
# none: referer为空也加入白名单, 意味着浏览器直接发请求也会成功返回.
# blocked: 非http/https协议也加入白名单, 即其他协议请求也会成功返回.
valid_referers none blocked server_names *.yours.com ;
所以如果只允许自己的域名能返回成功, 那就只需要加上自己的域名即可.
valid_referers server_names *.yours.com ;
另外为方便本地调试, 也可以在后面加上localhost. 这样本地起的工程也可以返回成功.
valid_referers server_names *.yours.com localhost ;
4. 更新历史
Version | Detail | Date |
---|---|---|
1.0 | 初版 | 2021-03-26 |
1.1 | 修改错误 | 2021-03-27 |
1.2 | 白名单说明 | 2021-03-28 |