Worker() 构造函数第二个参数详解（附：凭证模式详解）

Worker() 构造函数第二个参数

概述

Worker() 构造函数的第二个参数是一个可选的配置对象，用于指定 Worker 的行为选项。

配置选项一览表

属性	类型	默认值	描述	浏览器兼容性
name	string	-	为 Worker 实例设置名称，便于调试时识别	广泛支持
type	string	"classic"	Worker 类型： • "classic" - 标准脚本 • "module" - ES6 模块	Chrome 80+, Firefox 等
credentials	string	"same-origin"	模块 Worker 的凭证模式： • "omit" - 不发送凭证 • "same-origin" - 同源发送 • "include" - 跨源也发送	模块 Worker 专用

详细说明

1. name 属性

javascript

// 示例
const worker = new Worker('worker.js', { name: 'my-worker' });

• 用途：为 Worker 实例指定一个名称

• 应用场景：

  • 调试时在开发者工具中识别不同 Worker

  • 多个 Worker 实例时进行区分

• 注意：仅用于标识，不影响 Worker 功能

2. type 属性

javascript

// 经典 Worker
const classicWorker = new Worker('worker.js', { type: 'classic' });

// 模块 Worker
const moduleWorker = new Worker('worker.js', { type: 'module' });

• "classic"（默认）：

  • 传统脚本执行方式

  • 使用全局作用域

  • 通过 importScripts() 导入其他脚本

• "module"：

  • 支持 ES6 模块语法（import/export）

  • 启用严格模式

  • 拥有独立的模块作用域

  • 要求：Worker 脚本文件必须是有效的 ES6 模块

  • CORS：需要服务器设置正确的 CORS 头

3. credentials 属性

javascript

// 仅适用于模块 Worker
const worker = new Worker('module-worker.js', {
  type: 'module',
  credentials: 'include'
});

• 适用范围 ：仅当 type: "module" 时有效

• 选项值：

  • "omit"：不发送 cookies 或 HTTP 认证信息

  • "same-origin"（默认）：同源请求时发送凭证

  • "include"：所有请求都发送凭证（包括跨域）

完整示例

javascript

// 创建一个具有名称的经典 Worker
const worker1 = new Worker('task.js', {
  name: '数据处理Worker'
});

// 创建一个模块 Worker
const worker2 = new Worker('module-worker.js', {
  type: 'module',
  name: 'ES6模块Worker'
});

// 创建带凭证的模块 Worker（用于跨域请求）
const worker3 = new Worker('https://其他域名/module.js', {
  type: 'module',
  credentials: 'include',
  name: '跨域模块Worker'
});

注意事项

1. 兼容性：

   • name 属性支持良好

   • type: "module" 需要较新浏览器版本

   • 考虑使用特性检测

2. 安全限制：

   • 模块 Worker 受 CORS 策略限制

   • 跨域 Worker 需要正确的 CORS 头

3. 默认行为：

   • 不指定第二个参数时，等同于 { type: "classic" }

   • 经典 Worker 是向后兼容的默认选择

参考建议

• 调试需求 ：总是使用 name 属性便于调试

• 现代项目 ：优先考虑 type: "module"，享受模块化优势

• 跨域场景 ：确保服务器配置正确 CORS 头，并按需设置 credentials

这个配置对象虽然选项不多，但对于 Worker 的模块化支持、调试和跨域处理提供了重要控制能力。

---

Worker 凭证模式详解

什么是凭证模式？

凭证模式是指在网络请求中如何处理和发送身份验证凭据（credentials）的策略。它决定了 Worker 在发起 HTTP 请求时，是否以及如何携带用户的身份验证信息。

三种凭证模式对比

模式	值	描述	典型场景
不发送	"omit"	绝对不发送任何凭据	公开 API、无需身份验证的静态资源
同源发送	"same-origin"	只在同源请求中发送凭据	大多数内部 API、同域资源
始终发送	"include"	所有请求都发送凭据（包括跨域）	跨域单点登录、跨域 API

---

什么是"凭证"？

凭证主要包括以下身份验证信息：

1. Cookies - 会话标识、认证令牌等

2. HTTP 认证 - Basic、Bearer 等认证头

3. 客户端 SSL 证书（较少使用）

---

javascript

// 示例：包含用户会话的 Cookie
Cookie: sessionId=abc123; userId=456;
Authorization: Bearer eyJhbGciOiJIUzI1NiIs...

详细解释

1. "omit" - 不发送凭证

javascript

const worker = new Worker('module.js', {
  type: 'module',
  credentials: 'omit'
});

效果：

• 请求头中不包含 Cookie

• 不发送 Authorization 头

• 服务器返回的是公开、未认证的数据

适用场景：

• 获取公开的静态资源

• 调用无需登录的公开 API

• 避免敏感信息泄露

---

2. "same-origin" - 同源发送（默认）

javascript

const worker = new Worker('module.js', {
  type: 'module',
  credentials: 'same-origin'  // 默认值
});

同源判断：

• 协议相同（http/https）

• 域名相同（example.com）

• 端口相同（80/443）

效果：

• 同域请求：http://example.com/api ✅ 发送凭证

• 跨域请求：http://api.other.com/data ❌ 不发送凭证

---

3. "include" - 始终发送

javascript

const worker = new Worker('https://api.other.com/module.js', {
  type: 'module',
  credentials: 'include'
});

效果：

• 无论同源还是跨域都发送凭证

• 需要服务器正确配置 CORS

---

实际示例

场景 1：内部应用 Worker

javascript

// 同源应用，需要用户会话
const worker = new Worker('/app/worker.js', {
  type: 'module',
  credentials: 'same-origin',  // 发送 session cookie
  name: '内部数据处理Worker'
});
// 访问 /api/data 时会自动带上用户的登录凭证

场景 2：跨域单点登录

javascript

// 跨域身份验证场景
const worker = new Worker('https://auth.company.com/sso-worker.js', {
  type: 'module',
  credentials: 'include',  // 跨域发送认证令牌
  name: 'SSO处理Worker'
});
// 可以访问需要认证的跨域资源

场景 3：第三方服务集成

javascript

// 调用无需认证的第三方服务
const worker = new Worker('https://maps.service.com/tile-worker.js', {
  type: 'module',
  credentials: 'omit',  // 不发送公司内部cookie
  name: '地图瓦片Worker'
});
// 避免公司内部凭证泄露给第三方

安全注意事项

1. 凭证泄露风险

javascript

// ❌ 危险：跨域请求发送敏感凭证
const dangerousWorker = new Worker('https://恶意网站.com/script.js', {
  type: 'module',
  credentials: 'include'  // 可能泄露用户会话
});

2. CORS 要求

javascript

// 使用 credentials: 'include' 时，服务器必须：
// 1. 设置正确的 CORS 头
// 2. 允许具体域名（不能是 *）
Access-Control-Allow-Origin: https://yourdomain.com
Access-Control-Allow-Credentials: true

3. 同源策略保护

javascript

// 现代浏览器的安全机制
// 即使设置了 credentials: 'include'
// 跨域请求仍受同源策略限制

与普通 Fetch API 的对比

javascript

// Fetch API 的类似配置
fetch('https://api.example.com/data', {
  credentials: 'include'  // 同 Worker 配置
});

// XMLHttpRequest 的类似配置
const xhr = new XMLHttpRequest();
xhr.withCredentials = true;  // 相当于 'include'

---

最佳实践建议

1. 默认选择 ：大多数情况下使用 "same-origin"

2. 跨域谨慎 ：仅在信任的跨域服务使用 "include"

3. 明确声明：即使使用默认值也建议显式声明，提高代码可读性

4. 安全审查：定期检查 Worker 的凭证配置

---

javascript

// 良好的实践
const worker = new Worker(workerURL, {
  type: 'module',
  credentials: workerURL.startsWith('http') ? 'omit' : 'same-origin',
  name: '安全配置的Worker'
});

---

总结

凭证模式的核心意义 ：在功能性 （需要身份验证）和安全性（防止凭证泄露）之间找到平衡。

它让开发者能够精确控制 Worker 的权限边界，是 Web 安全模型的重要组成部分。