前端黑魔法 —— 隐藏网络请求的调用栈
前言
浏览器网络控制台会记录每个请求的调用栈（Initiator/启动器），可协助调试者定位到发起请求的代码位置。
为了不让破解者轻易分析程序，能否隐藏请求的调用栈？
事件回调
事实上，使用之前 《如何让 JS 代码不可断点》 文中的方案，通过「内置回调」到「原生函数」，即可隐藏请求的调用栈:
const fn = fetch.bind(window, '/?by-click')
window.addEventListener('click', fn, {once: true})
点击页面任意位置即可产生网络请求，并且 Initiator 显示为 Other:
由于该方案依赖事件，因此得使用极易触发的事件，例如 mousemove。但用户一动不动的话，程序流程就会卡在这里。
如果直接用 JS 驱动该事件，例如：
const fn = fetch.bind(window, '/?by-dispatch')
window.addEventListener('click', fn, {once: true})
window.dispatchEvent(new Event('click'))
那么调用栈会原形毕露：
类似的，人为制造一个 error 事件：
const img = new Image()
img.onerror = fetch.bind(window, '/?by-onerror')
img.src = ''
或者人为产生一个 message 事件：
const fn = fetch.bind(window, '/?by-message')
window.addEventListener('message', fn, {once: true})
window.postMessage('')
这些都会暴露调用栈。
动画事件
我们回顾下浏览器中总共有哪些事件：
https://developer.mozilla.org/en-US/docs/Web/API/Event#interfaces_based_on_event
事实上最容易触发的事件就在第一个：AnimationEvent。因为 CSS 动画播放时间是可控的，所以我们可创建一个 0 秒的动画，从而立即触发 animationend 事件：
<style>
@keyframes k {}
#el {
animation-duration: 0;
animation-name: k;
}
</style>
<div id="el">Hello</div>
<script>
const fn = fetch.bind(window, '/?by-animation')
el.addEventListener('animationend', fn)
</script>
并且能完美隐藏调用栈：
过渡事件
除了动画事件，CSS 中的过渡事件 TransitionEvent 也能实现同样的效果。
const el = document.createElement('div')
el.style = 'transition: font 1s;'
document.body.appendChild(el)
const fn = fetch.bind(window, '/?by-transition')
document.body.addEventListener('transitionrun', fn)
requestAnimationFrame(() => {
el.style.fontSize = '0'
})
相比动画事件需创建一个 @keyframes CSS 规则，过渡事件直接使用元素自身 style 属性即可，因此更简单。
不过需注意的是，动态添加的元素立即修改 CSS 是无法产生过渡事件的，需稍作延时才能修改。MDN 文档 也提到这点。
演示
考虑到「过渡事件」需推迟执行并多一个回调，这里选择「动画事件」的方案，封装成纯 JS 实现：
const xhr = new XMLHttpRequest()
xhr.onload = () => {
console.log('xhr onload')
}
xhr.open('GET', '/privacy')
const container = document.createElement('div')
container.style = 'animation:0s linear 0s __a__;'
container.innerHTML =
'<style>' +
'@keyframes __a__{' +
'from{font-size:0}' +
'to{font-size:0}'
'}' +
'</style>'
document.body.appendChild(container)
const sendFn = xhr.send.bind(xhr)
container.addEventListener('animationend', sendFn)
const removeFn = container.remove.bind(container)
container.addEventListener('animationend', removeFn)
const timer = setTimeout(sendFn, 10)
const clearFn = clearTimeout.bind(window, timer)
container.addEventListener('animationend', clearFn)
// 用于参照对比
const xhr2 = new XMLHttpRequest()
xhr2.open('GET', '/public')
xhr2.send()
为了请求后续操作，这里使用 XHR 取代 fetch，方便回调和获取数据。
同时注册了 3 个 animationend 事件，第 1 个用于发送请求；第 2 个用于删除元素，这样页面中不会有 DOM 残留；第 3 个用于删除定时器 —— 假如出现意外情况导致动画事件未触发，或未能及时触发，那么至少还有后备定时器会帮我们触发请求。
由于 IE 浏览器 CSS 的 @keyframes 里必须有规则，否则动画事件不会触发。出于兼容性，随便放一些规则即可。
Chrome:
FireFox:
Safari:
