文档说明

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

加速资源的引用

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

1.方案概览

引用方式 适用于 说明
普通方式 绝大部分网站 满足域名限制要求，且请求带Referer信息(一般网页默认)
跨域方式 无Referer情形 满足域名限制要求或离线本地，但请求不带Referer信息(出于安全考虑，跨域或跨站禁用了Referer)。支持启用SRI安全模式。
引导方式 离线本地情形 每次加载当前页面大概会多加载一次，虽然很快，但还是影响体验。
跳转方式 本地简易名称情形 不满足域名限制要求，网站域名为简易名称(不带点)，本地内部解析。由我们的带参数引导URL跳转到客户网站，只需跳转一次。
高级方式 注册会员情形 初次加载当前页面需要使用过渡页，需要申请获取用户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安全模式，防止您的网站被挂马。

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”(空值)。

5.引用方式四（跳转方式，研发中）

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

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

说明：

  • {scheme} - 此为目标网站协议，可为http/https/file
  • {site_domain} - 此为目标网站域名。
  • {page_path} - 此为目标页面路径，可为空
  • {url_params} - 此为目标页面参数，可为空

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

若实际目标页面为离线本地文件(如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/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>

此方案可用于嵌入页面和本地调试。

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/?<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”值，并需要设置到会话中。

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

简化内容大致如下：

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

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


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

更新时间：2024.08.13