文档说明

了解详细的文档说明及使用细节，可以避免开发时犯错或少犯错，从而节省您的宝贵时间。

加速资源的引用

了解加速资源的引用方式，特别是无Referer信息的访问，好快速启动您的项目。

1.方案概览

引用方式	适用于	说明
普通方式	绝大部分网站	满足域名限制要求，且请求带Referer信息(一般网页默认)
跨域方式	无Referer情形	满足域名限制要求或离线本地，但请求不带Referer信息(出于安全考虑，跨域或跨站禁用了Referer)。支持启用SRI安全模式。
跳转方式	不满足域名限制要求情形	不满足域名限制要求，网站域名为简易名称(不带点)，本地内部解析，或为IP地址，或带端口地址。由我们的带参数引导URL跳转到客户网站，只需跳转一次。
简单引导	离线本地调试	每次加载当前页面大概会多加载一次，虽然很快，但还是影响体验。适用于本地调试
标准引导	想要更多资源的订阅用户	不限制网站域名。初次加载当前页面需要使用过渡页，需要订阅获取访问ID。
高级引导	想要不受限制的注册用户	不限制网站域名。初次加载当前页面需要使用过渡页，需要申请获取用户ID和访问token，需要在后端使用MD5计算签名。能满足特殊需要，但不适用于静态网页内容。

2.引用方式一（普通方式）

在网页里通过普通的link标签、script标签、img标签和其他媒体标签来引入css、js、image和其他媒体文件。

下面简要说明一下基本用法：

文件类型	扩展名	用法举例
样式文件	css	<link type="text/css" rel="stylesheet" href="test.css">
JS程序文件	js	<script src="test.js" ></script>
图片文件	git, jpg, jpeg, png, bmp, webp	<img src="test.png">
声音文件	wav, mp3, mid, wma	<embed height="50" width="100" src="test.mp3"> <object height="50" width="100" data="test.mp3"></object> <audio controls> <source src="test.mp3" type="audio/mpeg"> <source src="test.ogg" type="audio/ogg"> Your browser does not support this audio format. </audio>
视频文件	mp4, ogg, webm	<video width="320" height="240" controls> <source src="test.mp4" type="video/mp4"> <source src="test.ogg" type="video/ogg"> Your browser does not support this video format. </video>

如果网站使用HTTP响应头或页面META头来禁用了跨站或跨域不发送Referer信息，则可以在引入标签上添加属性“referrerpolicy”，值可为“origin”、“origin-when-cross-origin”(推荐)或“unsafe-url”，强制发送Referer。此方式不适用于非HTTP协议模式。示例如下：

<script src="test.js" referrerpolicy="origin-when-cross-origin"></script>

3.引用方式二（跨域方式）

在上述普通方式的基础上，在主标签上添加跨域属性crossorigin，值为“anonymous”(推荐)或“use-credentials”。例如：

<script src="test.js" crossorigin="anonymous"></script>

支持以下标签：<link>、<script>、<img>、<audio>、<video>。

当您的页面访问我们的跨站资源时，如果请求无Referer信息，可采用此法引用。此方法也适用于离线本地(无服务器)模式。

此方式还支持子资源完整性（Subresource Integrity，SRI）安全模式，就是强制要求浏览器验证此资源是否原始文件，没有在中途被纂改过。如果被纂改过，则不加载该资源。通过添加属性“integrity”，配合跨域属性“crossorigin”可启用。示例如下：

<script src="https://npm.webcache.cn/jquery@2.2.4/dist/jquery.min.js" integrity="sha384-rY/jv8mMhqDabXSo+UCggqKtdmBfd3qC2/KvyTDNQ6PcUJXaxK1tMepoQda4g5vB" crossorigin="anonymous"></script>

本站当前已支持CDNJS和NPM资源的SRI复制，您还可以通过第三方在线工具(SRI Hash Generator)生成。

当前互联网已充斥着各种不安全因素，推荐使用此SRI安全模式，防止您的网站被挂马。

5.引用方式四（跳转方式）

使用引导服务引导并跳转到具体网页。引导服务路径及参数如下：

1）https://webcache.cn/{scheme}/{site_domain}{page_path}{url_params}

2）https://webcache.cn/{scheme}/{version}-{access_id}-{sign}@{site_domain}[:{host_port}]{page_path}{url_params}

说明：

{scheme} - 此为目标网站协议，可为http/https/file
{version} - 版本号或序号，例如：2024001、2026005
{access_id} - 用户ID或访问ID，可通过注册或订阅我们获得
{sign} - 签名信息，由主机名(不包括端口)、用户ID和内部秘钥合成，防纂改
{site_domain} - 此为目标网站域名。
{host_port} - 此为目标网站的主机端口，可为空。
{page_path} - 此为目标页面路径，可为空
{url_params} - 此为目标页面参数，可为空

若实际目标网站域名为简易名称(不带点)，还需要申请获取用户ID，并组成格式为“{name}.{access_id}.local”的伪域名。否则，虽然可跳转，但无法获取到我们的加速资源。

若实际目标网站为IP地址或加端口地址，必须使用上述第二种地址方式调用，也就是网站地址之前需要追加访问信息。访问信息可由我们的工具页面生成，或者申请由客服给出。

若实际目标页面为离线本地文件(如windows本地文件)，只能以下面描述的第二种方式在离线本地过渡页加载。

此方案有两种加载方式：

1）以HTML文档类型被浏览器直接访问或被父页面容器(如iframe)引入。

2）以JS文件类型被过渡引导页的script标签引入。

URL示例如下：

https://webcache.cn/https/baidu.com
https://webcache.cn/https/www.webcache.cn/convert.html
https://webcache.cn/http/test.local/?key=12345
https://webcache.cn/http/test.1234567890ABCDEF.local/
https://webcache.cn/http/2024001-0000000000000000-f602e5c028b2b837d57dfda98f28895d@149.104.8.3:30080/test1.php
https://webcache.cn/file//C:/Users/Administrator/Documents/test.htm

跳转到目标页面后，页面地址将会被追加参数“_refererId”，值为一串比较短的数字。目标页面需要在所有引用我们的加速资源的URL上也追加该参数，但参数名为“refererId”。

新地址示例如下：

https://www.webcache.cn/convert.html?_refererId=236593

其加速资源的URL示例如下：

<script src="https://cdnjs.webstatic.cn/ajax/libs/lodash.js/4.17.21/lodash.min.js?refererId=236593"></script>

此方案可用于嵌入页面和本地调试。目前已优化此方案，可省略资源URL上的后缀参数refererId，但还是建议带上。如果要省略，则网页不能禁用referer。

4.引用方式三（简单引导）

只需在加载外部资源前，先加载此引导地址，如下：

<script src="https://webcache.cn"></script>

完整示例如下：

<script src="https://webcache.cn"></script>
<script src="https://cdnjs.webstatic.cn/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://npm.webcache.cn/jquery@3.7.1/dist/jquery.js"></script>

此方案每次加载当前页面大概会多加载一次，虽然很快，但还是影响体验。建议只用于离线本地调式。

若要使用在正常服务模式下，需要在引导地址标签上添加跨域属性“crossorigin”，且值必须为“use-credentials”。

注意，此引导方式下，不能在引导地址标签上添加属性“crossorigin="anonymous"”和“crossorigin”(空值)。

6.引用方式五（标准引导）

首先，需要您在我们的网站订阅我们，并获取到访问ID。

然后，您需要制作一个引导页，须为不具有实际地址的内部页，内容大致如下：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Load</title>
  <script>
    function callback(refererId){
      document.cookie = '_refererId='+refererId;
      window.location.reload();
    }
  </script>
  <script src="https://webcache.cn/?<loadParams>"></script>
</head>
<body>
</body>
</html>

本方案需要引导器能获取到当前网页地址的主机名，故对网页有以下三种选项设置。

1）网页默认情况下，不要禁用referer
2）网页禁用了referer，需要在引导器标签上添加referrerpolicy属性，且属性值为“origin”或“origin-when-cross-origin”
3）网页禁用了referer，需要在引导器标签上添加crossorigin属性，且属性值为“anonymous”或“use-credentials”

另外，上述加载地址参数“loadParams”内容如下：

访问ID(access_id) - 可通过注册或订阅我们获取
版本序号(ver) - 通过我们的在线工具自主获取，或联系我们申请。
签名信息(sign) - 通过我们的在线工具自主生成，或联系我们申请。
回调参数(callback) - 用于接收引导服务传过来的“refererId”。

完整引导地址示例如下：

<script src="https://webcache.cn/?ver=2024001&access_id=0000000000000000&sign=4dacdc321a5faccaab254812606de506" referrerpolicy="origin-when-cross-origin"></script>

当此引导页加载完时，会获得一个“refererId”值，并需要设置到会话中。

然后，主页加载时需要先判断该状态参数是否有值，若没有，则输出上述引导页内容，并结束。否则，继续正常加载，且在加速资源URL上需要追加上述参数“refererId”。

简化内容大致如下：

<script src="https://cdnjs.webstatic.cn/ajax/libs/moment.js/2.29.4/moment.min.js?<refererId>"></script>

目前已优化此方案，可省略加载器URL上的callback参数和资源URL上的refererId参数，但还是建议带上。如果要省略，则网页不能禁用referer。

6.引用方式五（高级引导，研发中）

首先，需要您在我们的网站申请您的用户ID和访问token。

然后，您需要制作一个引导页，须为不具有实际地址的内部页，内容大致如下：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Load</title>
  <script>
    function callback(refererId){
      document.cookie = '_refererId='+refererId;
      window.location.reload();
    }
  </script>
  <script src="https://webcache.cn/load?<loadParams>"></script>
</head>
<body>
</body>
</html>

上述加载地址参数“loadParams”须在主页后端初始化时根据给定信息，并按照一定的规则生成，规则如下：

1）所需值：

用户ID(user_id) - 向我们申请
访问token(token) - 向我们申请
站点名称(site_name) - 您给自己网站起的名称，可为单名(符合域名主名称规则)，或域名。
时间戳(ts) - 按中国北京时间时区计算从1970-01-01 00:00:00到现在的秒数。

2）根据上述值联合并计算MD5值，联合规则为(不包括{})：“{token}site_name{site_name}ts{ts}user_id{user_id}”

3）计算出的MD5值作为签名参数“sign”和上述4个参数一并添加到URL中。

4）还需要一个回调参数“callback”，用于接收引导服务传过来的“refererId”。

附PHP代码生成函数，如下：

<?php

function getLoadParams(){
  $token = '1234567890abcdef1234567890abcdef';
  $content = array(
    'ts' => time(),
    'user_id' => '0000000000000000',
    'site_name' => 'test.local'
  );
  $content['sign'] = md5(implode('',array(
    $token,
    'site_name',
    $content['site_name'],
    'ts',
    $content['ts'],
    'user_id',
    $content['user_id']
  )));

  $paras = [];
  foreach($content as $key => $value){
    $paras[] = $key.'='.urlencode($value);
  }
  return implode('&', $paras).'&callback=callback';
}

当此引导页加载完时，会获得一个“refererId”值，并需要设置到会话中。

简化内容大致如下：

<script src="https://cdnjs.webstatic.cn/ajax/libs/moment.js/2.29.4/moment.min.js?<refererId>"></script>

此方案目前正在研发中，推荐高级用户使用。未来满足于收费用户。

本用法介绍完毕！当前部分扩展用法正在研发中，有变动时，将及时更新。

更新时间：2024.10.31