CDN加速

返回文档中心
文档中心 CDN Pro 第三方外链优化

第三方外链优化

更新时间：2022-07-18 19:42:54

第三方外链优化

第三方外链拖垮网站安全性能

越来越多开发者会使用第三方脚本来实现网站业务需求，例如：埋点跟踪用户行为、字体或图片处理服务、网站流量分析器、SEO优化、聊天机器人、广告像素和脚本等。一般我们称这些第三方资源为外链。外链一般以JS或者CSS的形式嵌入到网站的页面中。网站的外链越多，越影响网站的安全与性能，这給网站运营人员带来了极大的挑战：

  • 性能：JS外链位置不合理导致页面加载阻塞、访问跨国外链网络传输慢，这些情况都会拉胯页面首屏时间及整体加载时间，严重影响用户体验，最终的结果就是影响网站收益。
  • 安全：网站页面中会包含大量第三方外链，对于编写有效的浏览器内容安全策略（CSP）是一种极大的挑战（CSP全称是Content-Security-Policy，开发者可通过设置CSP策略来规定浏览器可以加载的资源，CSP的使用可大大提升网页的安全性，经常用于解决XSS攻击。）
  • 隐私：第三方脚本并不可控，因为外链的所有权不掌控在网站所有者手上，网站所有者不仅无法对这些外链进行加速，也无法获知网站上正在加载、提取的内容数据。
  • 合规：对于中国区网络来说，还有一个特殊的挑战：中国网络防火墙会屏蔽部分海外的网站，包括：Google、Facebook、Twitter、YouTube、Instagram、Flickr、Reuters、BBC等。若网站上内嵌该部分资源，中国区用户将无法访问。

通过CDN Pro边缘代理实现外链管理

CDN Pro边缘云平台提供了灵活的前端外链优化服务。您可以完全控制您网站的第三方工具和服务，并允许您将它们卸载到 CDN Pro 的边缘，从而提高您网站的速度、隐私和安全性。

  • 在边缘运行 JavaScript：第三方工具一般都使用 JavaScript。我们会将这些第三方脚本移植到CDN Pro云环境中运行，以将您网站页面下的外链资源归集到您的加速域名下，由CDN Pro将请求路由到不同的外链域名服务器无需浏览器单独逐个对这些第三方外链服务发起请求，以此实现网站外链的归一化管理。
  • 外链可编程：您可以通过CDN Pro的各种指令，来编写这些外链的处理规则。除了对这些外链资源开启加速缓存提升您的外链访问性能之外，您还可以控制他们的响应，例如屏蔽非法外链来保障网站合规性。
  • 外链安全：我们可以对这些外链脚本设置多种安全的边缘访问控制策略，同时您也可以更有效地编写您的浏览器CSP安全策略。
  • 全球分布：我们的边缘服务器位于全球的各个角落，您可以在我们的任一边缘服务器上执行您的第三方外链优化代码，保障您网站的优越性能。

IPv6部署多重倒计时来临，您的网站准备好了吗？

以下将以一个简单的案例，为您介绍如何通过CDN Pro实现第三方外链优化。

配置案例：为聚合多外链的网站实现加速

假设您的网站业务具备如下特性：

  • 您的网站域名是 3rdaccleration.8686c.com ，这个域名的源站服务器IP是 1.1.1.1。

  • 这个网站下使用了多种外链，包括：①使用 Google Analytics 分析网站流量；②使 百度统计 进行网站用户行为分析；③使用 Google Fonts 美化网站页面的字体；④页面引入 Youtube 视频外链介绍企业关键业务；

  • 这些外链的写法各不相同，难以用统一的方式准确查找识别和管理（若有兴趣了解更多您可查阅本文：网站外链引入方式）；

  • 部分外链服务在海外，存在跨国传输的场景，加载慢；其中，Youtube 外链中国区域用户无法访问。

  • 作为网站所有者，您没有这些外链的解析管理权，无法对这些外链进行加速优化。

使用 CDN Pro 优化外链服务：

  • CDN Pro会精准分析识别网站上的外链并对其进行改写，将其改写到您的加速域名的目录下（以下简称外链目录 ），客户端对改写后的外链发起请求，会访问到外链目录下。
  • CDN Pro会根据您配置的外链目录类型不同（包括 外链屏蔽目录 和 外链缓存目录），来选择外链优化的执行动作：外链屏蔽或者外链加速；
  • 如果是要屏蔽的外链，CDN Pro会直接拒绝这些外链的请求避免无法访问的外链加载阻塞，影响后续页面资源请求；
  • 如果是要加速的外链，CDN Pro会作为边缘云代理对这些外链资源进行缓存加速：如果是命中缓存的外链资源，CDN Pro会直接响应给客户端；如果是未命中的请求，CDN Pro会动态选择需要回的外链源并进行缓存和响应。以此可以实现外链的边缘加速分发。

IPv6部署多重倒计时来临，您的网站准备好了吗？

步骤1：为域名创建加速项目

IPv6部署多重倒计时来临，您的网站准备好了吗？

步骤2：配置源站信息

  • 此处我们添加了2个源站

  • 1）真实源站 TrueOrigin：这是您的网站域名 3rdaccleration.8686c.com 的真实源站。其中特别需要注意的是：①服务器：为源站服务器IP地址 1.1.1.1 ，加速域名3rdaccleration.8686c.com将默认从该服务器获取资源；②支持协议：HTTP和HTTPS；③直接连接：自动匹配。

  • 2）动态外链源 DynaSeleThiryPartSource：这是CDN Pro上创建的虚拟源站，用于动态选择外链的回源地址（相当于一个动态选择外链源的应用组件）。其中特别需要注意的是：①服务器：填写本机地址 127.0.0.1 ，此处为固定配置，您无需更改；②支持协议：HTTPS。这个配置由您的加速域名是否支持HTTPS决定，例如这里我们配置了HTTPS，因为稍后我们会为加速域名3rdaccleration.8686c.com 配置TLS证书并支持HTTPS访问；若您的加速域名不配置证书，您就需要配置成HTTP；③Host请求头：必须配置HOST请求头为您的加速域名3rdaccleration.8686c.com；④直接链接：直连，此处为固定配置，您无需更改。

稍后，我们将会在边缘逻辑中配置引用这2个源站。

IPv6部署多重倒计时来临，您的网站准备好了吗？

IPv6部署多重倒计时来临，您的网站准备好了吗？

步骤3：边缘逻辑配置

我们在边缘逻辑下配置编写如下代码，对加速域名3rdaccleration.8686c.com下的外链配置缓存加速和屏蔽。以下将为您详细介绍如何配置。

IPv6部署多重倒计时来临，您的网站准备好了吗？

# 0.Server块默认配置

proxy_cache_valid 12h; # 缓存规则：缓存12小时

# 1. 加速域名配置
location / {
proxy_cache_valid 24h; # 缓存规则：默认缓存24小时
origin_pass TrueOrigin; # 回源规则：默认回到加速域名自己的源站 `TrueOrigin`
}

# 2. 外链改写规则配置
sub_filter_types text/html text/css application/json application/javascript; # 开启外链替换的Contype-Type类型
sub_filter 'www.googletagmanager.com' '3rdaccleration.8686c.com/externallink/www.googletagmanager.com'; # Google Analytics 外链加速改写
sub_filter 'hm.baidu.com' '3rdaccleration.8686c.com/externallink/hm.baidu.com'; # 百度统计 外链加速改写
sub_filter 'fonts.gstatic.com' '3rdaccleration.8686c.com/externallink/fonts.gstatic.com'; # Google Fonts 外链加速改写
sub_filter 'player.Youtube.com' '3rdaccleration.8686c.com/reject/player.Youtube.com'; # Youtube 外链屏蔽改写
sub_filter_once off; # 是否仅替换一次外链，通常为否
origin_set_header Accept-Encoding ' '; # 回源请求非压缩格式，必须配置

# 3. 外链加速配置
# 3.1 配置外链加速缓存规则及回源规则
location ~* ^/externallink/[^/.]+\.[^/]+/.* { # 匹配外链缓存目录URL
if ( $request_uri ~* ^/externallink/(.*)$ ) { # 提取真实外链URL
set $real_url $1;
}
set $cache_misc $cache_misc$sorted_querystring_args; # 配置外链缓存开启带问号参数缓存；同时，外链缓存有效期遵循Server块配置，即缓存12小时。
origin_pass DynaSeleThiryPartSource/redirect/$real_url; # 未命中缓存，则回源到动态外链源DynaSeleThiryPartSource，由动态外链源来选择给出回源的外链服务地址
origin_follow_redirect; #遵循来自外链动态源的302重定向
}
# 3.2 配置动态外链源的回源选路规则
location ~* ^/redirect/[^/.]+\.[^/]+/.* { # 匹配回源重定向URL
if ( $request_uri ~* ^/redirect/(.*)$ ) { # 提取真实外链URL
set $real_url $1;
}
return 302 $request_scheme://$real_url; # 返回选中的真实外链URL的302重定向响应
}

# 4. 外链屏蔽配置
location ~* ^/reject/[^/.]+\.[^/]+/.* { # 匹配外链屏蔽目录URL
return 403 'No permission!'; # 直接给出403状态码和拒绝原因
}

1. 加速域名配置

  • 针对加速域名3rdaccleration.8686c.com 配置缓存24小时并配置其回源地址为 TrueOrigin ，即您的网站的资源会优先从CDN Pro上获取缓存资源，在未命中缓存的时候会回到您的自有源站服务器 1.1.1.1 获取资源并更新加速节点的缓存数据。

2.外链改写规则配置

  • 配置识别需要改写的外链资源。外链是由网站加速域名3rdaccleration.8686c.com 引入的，因此外链改写需要对加速域名响应内容里面的外链进行改写替换。目前我们用于外链改写的指令主要有3个，这3个指令配合使用可以提升外链改写的精确度，避免误改写：

👉使用指令sub_filter_types，配置需要开启外链改写替换的Contype-Type类型；

👉使用指令sub_filter，配置提取响应内容中的外链关键字，并将其改写替换成我们期望的路径。根据我们对外链的优化场景不同，我们将外链分别改写到外链缓存路径 /externallink和外链屏蔽路径 /reject 下，例如：此处我们需要对Google Analytics、百度统计、Google Fonts的外链做加速，于是我们将其改写替换到了 /externallink 目录；我们需要对Youtube的外链做屏蔽，于是我们将其改写替换到了 /reject 目录。

👉使用指令sub_filter_once，配置外链关键字替换是否仅替换一次，通常我们配置为否，即对响应内容里面符合条件的外链关键字全部进行替换。

  • 改写成功后，浏览器访问加速域名拿到的响应内容中的外链资源路径，就是我们改写替换完的外链路径，浏览器将会去请求改写后的外链URL，从而实现由CDN Pro归一化代理外链加速的目的。

注意：由于需要做改写替换，所以回源不能取压缩后的响应，因此我们使用指令origin_set_header配置删除回源请求头 Accept-Encoding。这是固定配置，您必须配置上。

3.外链加速配置

  • 配置外链加速缓存规则及回源规则。在前面配置外链改写的时候，我们已经将需要加速的外链改写到/externallink目录下，此处我们针对这些外链配置了加速缓存：

👉在/externallink 这个location下配置了外链资源开启带问号参数缓存，并缓存12小时。

👉使用origin_pass和 origin_follow_redirect这两个指令配合使用，引入DynaSeleThiryPartSource 动态外链源组件来为您智能选择不同外链的回源地址。

  • 外链加速配置成功后，外链请求会优先在CDN Pro节点上查询缓存资源，缓存未命中则会回触发回源，其中，回源的时候会调用动态外链源DynaSeleThiryPartSource 来选择回源地址，以此实现外链回源可以精准找到他们的真实外链服务器地址。数据流：用户请求—>CDN Pro有缓存优先响应—>CDN Pro无缓存调用外链动态源，外链动态源给出真实外链服务地址—>请求真实外链服务地址获取资源。以此实现外链加速。

4.外链屏蔽配置

  • 配置外链屏蔽。在前面配置外链改写的时候，我们已经将需要屏蔽的外链改写到/reject目录下，此处我们针对这些外链配置屏蔽：在/reject这个location下，使用指令return配置响应403状态码，并给出错误原因 No permission!。此时，当用户访问这些被屏蔽的外链，CDN Pro将直接响应403。以此实现外链屏蔽。

5. 安全配置

  • 在前面的配置中，我们实现了通过同一个加速域名来代理加速网站下的外链。但是，若其他用户知晓了您的外链改写方式，可能就可以直接用您的域名构造出任意URL的外链格式，以此来对您的网站进行盗链。出于安全性考虑，您当然不希望出现这种非法盗链的场景。
  • 因此我们推荐您可以在CDN Pro上配置安全加速服务，例如，您可以配置只允许部分域名做匹配、referer防盗链、时间戳防盗链等。您可以阅读这篇文章，来了解如何在CDN Pro边缘实施这些安全策略：边缘访问控制。

步骤4：为加速项目配置TLS证书

  • 您可以根据您的安全要求配置 TLS 最低协议版本、TLS 最高协议版本以及TLS加密套件：

IPv6部署多重倒计时来临，您的网站准备好了吗？

步骤5：测试部署并引流生效

  • 在演练环境中测试加速项目后，可以部署到生产环境。

  • 如果您还没有边缘调度域名，您可以根据您的流量管理需求创建一个CDN Pro边缘调度域名，然后针对3rdaccleration.8686c.com 添加一条 CNAME 的 DNS 记录指向CDN Pro边缘调度域名。

现在，任何访问3rdaccleration.8686c.com 域名的请求都会被路由到CDN Pro平台，CDN Pro会对这个加速域名下的指定外链进行改写处理并响应给客户端；客户端对改写后的外链进行访问，也会被路由到CDN Pro平台，并分别执行处理外链屏蔽、外链缓存资源查询、外链动态回源。以此实现前端外链资源的优化，提升您网站的访问性能。

网站外链优化成效

通过CDN Pro的外链加速服务，您可以实现：

  • 外链加速：提升网站访问性能，提升用户体验；
  • 外链屏蔽：符合中国区域合规性要求，杜绝用户访问不合法外链；
  • 外链安全：设置边缘访问控制策略和严格的CSP内容安全管理策略，保障外链代理的安全性。
本篇文档内容对您是否有帮助？
有帮助
我要反馈
提交成功！非常感谢您的反馈，我们会继续努力做到更好！