在网络资源请求添加 referer 规则
收藏我的收藏
小程序中和网络资源请求相关的 JS API 或组件包括:
- •默认不添加 referer:
- a.image 组件
- •默认添加 referer:
- b.video 组件
支持配置添加 referer 规则
注意
网络资源请求中的
user-agent
不可设置。 其固定格式分为: - •iOS 系统:
[系统user-agent] [宿主标识]/[宿主app版本] ToutiaoMicroApp/[基础库版本] webview/[插件版本]
。- •Android 系统:
[系统user-agent] [宿主标识]/[宿主app版本] ToutiaoMicroApp/[基础库版本] PluginVersion/[插件版本]
。从基础库 3.16.0 开始,支持开发者按 URL 和 domain 维度配置添加 referer 请求头的规则。
开发者需要去全局配置中配置,为向前兼容,编译产物中的默认值为:
{ "referrerPolicy":{ "canvasImage":{ "policy":"no-referrer" }, "video": { "policy":"origin" }, "previewImage":{ "policy":"origin" }, "livePlayer":{ "policy":"origin" }, "innerAudioContext":{ "policy":"no-referrer" }, "backgroundAudioManager":{ "policy":"no-referrer" } } }
referrerPolicy 参数
referrerPolicy 是一个 string key-object value 键值对,目前支持以下能力配置 referer 规则:
值 | 能力 | 默认规则 |
canvasImage | no-referrer,不添加 referer | |
video | origin,添加 referer | |
previewImage | origin,添加 referer | |
livePlayer | origin,添加 referer | |
innerAudioContext | no-referrer,不添加 referer | |
backgroundAudioManager | no-referrer,不添加 referer |
具体规则是一个 object,属性如下:
参数 | 类型 | 描述 |
policy | string | 添加 referer 的规则,有效值有且仅有两个:
若 urlList 和 domainList 都不传,则 policy 规则适用于所有 URL。 若 urlList 或 domainList 有值,policy 规则只适用于匹配上的 URL。 例: policy="no-referrer", urlList=[" www.abc.com "] ,则只有 www.abc.com 不添加referer,其余 URL 均添加 referer。 |
urlList | string[] | 适用 policy 规则的 URL 列表,完全匹配。若 urlList 和 domainList 都不传,则 policy 规则适用于所有 URL。 |
domainList | string[] | 适用 policy 规则的域名列表,支持泛域名,配置了 abc.com ,那么 *. abc.com 都适用 policy 规则。若 urlList 和 domainList 都不传,则 policy 规则适用于所有 URL。 |
示例
所有 URL 不带 referer
<!-- index.ttml --> <!-- 未配置 urlList 和 domainList,所有 URL 都不带 referer --> <video src="www.abc.com/d/e" /> <video src="www.abc.com/d/e/f" /> <video src="abcd.com/d/e/f" />
// app.json { "referrerPolicy":{ "video": { "policy":"no-referrer" } } }
所有 URL 携带 referer
<!-- index.ttml --> <button src="{{imageList[0]}}" mode="widthFix" bindtap="previewImage"></button> <view>点击图片,预览大图</view>
<!-- index.js --> Page({ data: { imageList: [ "https://s3.pstatp.com/toutiao/static/img/logo.201f80d.png", "https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/sdk/2016-europe.jpg", ], }, previewImage() { let { imageList } = this.data; tt.previewImage({ current: imageList[0], urls: imageList, success: () => { console.log("previewImage success"); }, fail: (err) => { tt.showModal({ title: "预览失败", content: err.errMsg, showCancel: false, }); }, complete: () => { console.log("预览完成"); }, }); }, });
// app.json { "referrerPolicy":{ "previewImage": { "policy":"origin" } } }
如上配置
https://s3.pstatp.com/toutiao/static/img/logo.201f80d.png
和 https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/sdk/2016-europe.jpg
请求都会携带 referer。部分 URL 不带 referer
<!-- index.ttml --> <video src="www.abc.com/d/e" /> <!-- URL命中匹配规则,请求不带referer --> <video src="www.abc.com/d/e/f" /> <!-- 未命中,请求携带referer -->
// app.json { "referrerPolicy":{ "video": { "policy":"no-referrer", "urlList":[ "www.abc.com/d/e" ] } } }
除
www.abc.com/d/e
以外的 URL 都携带 referer。urlList 是强匹配,www.abc.com/d/e/f
也会携带 referer。部分 URL 携带 referer
<!-- index.ttml --> <button src="{{imageList[0]}}" mode="widthFix" bindtap="previewImage"></button> <view>点击图片,预览大图</view>
// index.js Page({ data: { imageList: [ "https://s3.pstatp.com/toutiao/static/img/logo.201f80d.png", "https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/sdk/2016-europe.jpg", ], }, previewImage() { let { imageList } = this.data; tt.previewImage({ current: imageList[0], urls: imageList, success: () => { console.log("previewImage success"); }, fail: (err) => { tt.showModal({ title: "预览失败", content: err.errMsg, showCancel: false, }); }, complete: () => { console.log("预览完成"); }, }); }, });
// app.json { "referrerPolicy":{ "previewImage": { "policy":"origin", "urlList":[ "https://s3.pstatp.com/toutiao/static/img/logo.201f80d.png" ] } } }
如上配置
https://s3.pstatp.com/toutiao/static/img/logo.201f80d.png
请求会携带 referer。https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/sdk/2016-europe.jpg
请求不会携带 referer。部分域名不带 referer
<!-- index.ttml --> <video src="abc.com/d/e" /> <!-- 域名命中匹配规则,请求不带referer --> <video src="www.abc.com/d/e" /> <!-- 支持泛域名,域名命中匹配规则,请求不带referer --> <video src="abcd.com/d/e/f" /> <!-- 域名未命中,请求携带referer -->
// app.json { "referrerPolicy":{ "video": { "policy":"no-referrer", "domainList":[ "abc.com" ] } } }
除了域名为
abc.com
以外的 URL 都携带 referer。domainList 支持泛域名,配了 abc.com
,则 *.
abc.com
的域名也不会携带 referer。部分域名携带 referer
<!-- index.ttml --> <button src="{{imageList[0]}}" mode="widthFix" bindtap="previewImage"></button> <view>点击图片,预览大图</view>
// index.js Page({ data: { imageList: [ "https://s3.pstatp.com/toutiao/static/img/logo.201f80d.png", "https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/sdk/2016-europe.jpg", ], }, previewImage() { let { imageList } = this.data; tt.previewImage({ current: imageList[0], urls: imageList, success: () => { console.log("previewImage success"); }, fail: (err) => { tt.showModal({ title: "预览失败", content: err.errMsg, showCancel: false, }); }, complete: () => { console.log("预览完成"); }, }); }, });
// app.json { "referrerPolicy":{ "previewImage": { "policy":"origin", "domainList":[ "s3.pstatp.com" ] } } }
除了域名为
s3.pstatp.com
以外的 URL 都不带 referer。如上配置 https://s3.pstatp.com/toutiao/static/img/logo.201f80d.png
请求会携带 referer。https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/sdk/2016-europe.jpg
请求不会携带 referer。
referer 格式
referer 固定格式为
https://tmaservice.developer.toutiao.com/?appid={appid}&version={appVersion}
,其中 appid
为小程序的 appid,appVersion
为小程序的版本号。