为什么跨源工作人员被阻止，为什么解决方法可以？

Question

最近我在 a library 工作，它支持使用工人进行一些繁重的工作。

我发现，至少在大多数在线代码编辑器 (sn-ps/jsfiddle/codepen/glitch) 上，我似乎无法从另一个域加载工作程序。我收到一个安全错误（或 Firefox 静默失败）

function startWorker(url) {
  try {
    const worker = new Worker(url);
    console.log('started worker');
    worker.onmessage = e => log('black', e.data);
    worker.postMessage('Hi from page');
  } catch (e) {
    console.error('could not start worker:', e);
  }
}

const workerURL = 'https://greggman.github.io/doodles/test/ping-worker.js';
startWorker(workerURL);

在 Chrome 和 Safari 中我得到了

SecurityError: 无法构造“Worker”：无法从源“https://...”访问“https://greggman.github.io/doodles/test/ping-worker.js”处的脚本。

问题 #1：为什么会出现该错误？

什么设置导致它？ iframe 选项？页面的http标头？ iframe 的 http 标头？脚本中的 http 标头？）

问题 #2：有没有办法在 Firefox 中检测到这个问题？

我可以从工作人员那里发送消息并超时，但我想知道是否有一些不那么间接的方法来检查成功/失败

无论如何，我都可以通过自己获取脚本文本来解决这个问题

function startWorker(url) {
  try {
    const worker = new Worker(url);
    console.log('started worker');
    worker.onmessage = e => console.log(e.data);
    worker.postMessage('Hi from page');
  } catch (e) {
    console.error('could not start worker:', e);
  }
}

async function main() {
  const workerURL = 'https://greggman.github.io/doodles/test/ping-worker.js';

  const res = await fetch(workerURL);
  const text = await res.text();
  const blob = new Blob([text], {type: 'application/javascript'});
  const url = URL.createObjectURL(blob);

  startWorker(url);
}
main();

我询问了浏览器团队，并被告知手动获取并制作 blob url 是可以的，这导致了我的主要问题。

问题 #3：鉴于解决方法很简单，这个安全错误的意义何在？

鉴于有解决方法，在什么情况下没有解决方法？安全错误的意义何在？浏览器供应商说我的解决方法很好，实际上我已经使用了 7-8 年的能力来启动东西作为 blob url。 （html，脚本，但直到现在还不是工作人员）但是如果我的解决方法很好，那么错误的意义何在？

Answer 1

问题 #1：为什么会出现该错误？

因为这是规格要求的。来自fetch a classic worker

1. 设request为新请求，url为url，client为fetch client settings object，destination为destination，mode为@987654324 @，凭证模式为"same-origin"，解析器元数据为"not parser-inserted"，并设置了use-URL-credentials标志。

所以请求的模式将设置为"same-origin"，因此会失败：

(async ()=>{
const url = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js";
try {
  console.log( 'default ("no-cors")' )
await fetch( url )
  console.log( 'success' );
}
catch(e) { console.log( 'failed' ); }

try {
  console.log( 'like workers ("same-origin")' )
await fetch( url, { mode: "same-origin" } )
  console.log( 'success' );
}
catch(e) { console.log( 'failed' ); }

})();

问题 #2：有没有办法在 Firefox 中检测到这个问题？

当然，您只需要监听将在您的 Worker 对象上调度的 error 事件：

const url = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
const worker = new Worker( url );
worker.onerror = console.error;

问题 #3：鉴于解决方法很简单，这个安全错误的意义何在？

因为您的 Worker 的内部来源取决于此。 ref

将 worker 全局作用域的 url 设置为响应的 url。

因此，如果他们在这里允许“no-cors”请求，您将能够绕过跨域限制，从您的 Worker 获取该服务器上的资源。

通过先获取它，然后创建一个same-origin (blob:URI) 或者一个opaque origin (data:URI) 上下文，就不存在这样的问题了.

---

请注意，只有对 Worker 脚本的初始请求受此限制，因此解决初始问题的另一种方法是使用 "same-origin" 内部的 importScripts 方法 em> 工人：

const worker = new Worker( getURL() );
worker.onmessage = (evt) => console.log(evt.data);


function getURL() {
  const txt = document.getElementById( 'source' ).textContent;
  return URL.createObjectURL( new Blob( [ txt ] ) );
}

<script id="source" type="worker">
  importScripts("https://greggman.github.io/doodles/test/ping-worker.js");
</script>