Question

ServiceWorker是否有任何方法可以识别no-cors / opaque FetchEvent.Request的来源或来源？或者我们是否可以明确地将HTML中的识别信息/数据传递给可用于识别ServiceWorker？来源的FetchEvents。我使用查询字符串参数一起破解了一个解决方案，但我正在寻找比这更原始或更优雅的东西：

HTML

<img id="img1" src="image.jpg?imgId=img1" />
<img id="img2" src="image.jpg?imgId=img2" />

服务工作者

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  if(url.pathname.endsWith('/image.jpg')) {
    // get Element ID that initated the FetchEvent
    const imgId = url.searchParams.get('imgId');

    // Notify document that the fetch started
    clients.get(event.clientId)
    .then(client => client.postMessage({imgId}));
  }
})

Answer 1

首先，从服务工作者的fetch处理程序的角度来看，请求mode 'no-cors'的{{1}}不应该发生变化任何东西。 Opaque responses是为了防止第三方服务器泄露信息，但当您谈论源自您自己的网页的请求被您自己的服务截获时工人，对信息泄露没有同样的担忧。

因此，一般来说，问题在于是否有办法让浏览器为其为DOM中引用的任何子资源隐式创建的请求添加额外的标识信息。看一下Request object中公开的字段，除了url之外，您确实无法控制其他任何内容，并且可能会设置一些有用的内容来识别您的外发请求。（您无法控制headers隐式创建的用于DOM中引用的子资源的请求。）

如果你想阻止＆＃34;噪音＆＃34;使用参数将标识信息添加到url，您应该能够使用散列片段，例如

<img id="img1" src="image.jpg#img1">
<img id="img2" src="image.jpg#img2">

哈希片段应该包含在传递给request.url处理程序的fetch中的service worker specification states，所以你可以从那里读取它，但它赢了＆＃39;实际上是发送到远程服务器。

（，脚本等。但是，这不允许您确定哪个特定的Request负责给定的图像请求。）

识别FetchEvent请求的来源/来源

1 个答案: