如何禁止开发者操作网页上的DOM对象？

通常情况下，在一个HTML页面上，我们总能够通过DOM API访问想要访问的HTML元素，进行操作。

如果基于某种原因，允许用户注入代码到网页上，但又要禁止用户对DOM对象进行操作，即只允许用户调用我们提供的API，不允许用户通过注入的JS来修改我们创建的UI组件甚至整个网页内容，那么我们要怎么做呢？

我们基本上无法通过JS来禁止用户通过注入的JS操作DOM，因为window对象、document对象这些对象以及它们的API是无法通过JS改写的：

window.document = 111;
console.log(window.document); // #document

如果我们用Object.getOwnPropertyDescriptor查看，会发现window.document实际上是一个getter，而且它的configurable是false。

Object.getOwnPropertyDescriptor(window, 'document');
// {get: ƒ, set: undefined, enumerable: true, configurable: false}

即使我们对允许用户合法注入的JS外面包裹函数作用域，我们还是无法彻底阻止用户访问document和window对象。

(function(window, document) {
  // user code
  console.log(this, window, document); // {}, null, null
  const win = (function () {
    return this;
  }());
  console.log(win); // Window
  // ---
}).call({}, null, null)

比如说上面的代码，我们在用户注入的代码前后增加包装代码，把window和document对象通过函数参数覆盖，我们还是能通过函数调用的this拿到window对象。

要防住这个漏洞，我们可以在包装的时候使用严格模式：

(function(window, document) {'use strict'
  // user code
  console.log(this, window, document); // {}, null, null
  const win = (function () {
    return this;
  }());
  console.log(win); // undefined
  // ---
}).call({}, null, null)

但是这个依然不解决问题：

(function(window, document) {'use strict'
  console.log(this, window, document); // {}, null, null
  const win = (function () {
    return this;
  }());
  console.log(win);   // undefined
  setTimeout(function() {
    console.log(this);  // Window
  });
}).call({}, null, null)

所以结论是包装代码无法让用户彻底无法访问window和document对象。

那么我们要怎么做既能合法让用户注入代码实现功能，又能够隔离window和document对象呢？

用worker做沙箱

第一种办法是只允许用户的代码跑在worker里。

我们知道worker的环境是和浏览器环境互相独立的线程，所以跑在worker里的代码是不能访问window和document对象的，这样就保证了安全性。

function execCodeInWorker(code) {
  const blob = new Blob([code]);
  const url = URL.createObjectURL(blob);
  
  const worker = new Worker(url);
  return worker;
}

const userCode = `
  console.log(typeof window, typeof document); // undefined undefined
`;

execCodeInWorker(userCode);

使用worker的问题是，当worker和浏览器环境通讯时，需要采用postMessage，如果有较多的交互操作，性能开销比较大，而且对写代码的开发者有使用成本。

使用Shadow DOM

如果我们只是不允许用户注入的JS修改UI，我们也可以将整个UI通过Shadow DOM渲染，并且将ShadowRoot的模式设置为closed封闭起来，这样的话，用户就无法拿到Shadow DOM的ShadowRoot对象，从而无法进行操作。

下面是一个简单的例子：

(function () {
  const root = document.body.attachShadow({mode: 'closed'});
  
  let list;

  function init() {
    root.innerHTML = `
      <h1>Todo List</h1>
      <ul></ul>
    `
    list = root.querySelector('ul');
  }
  
  function addTask(desc) {
    const task = document.createElement('li');
    task.textContent = desc;
    list.appendChild(task);
    return list.children.length - 1;
  }
  
  function removeTask(index) {
    const task = list.children[index];
    if(task) task.remove();
  }
  
  window.init = init;
  window.addTask = addTask;
  window.removeTask = removeTask;
}());

init();
addTask('task1');

我们通过document.body.attachShadow({mode: 'closed'});创建ShadowRoot，通过Shadow DOM API来创建UI，因为这个root对象我们没有暴露给用户，而且mode是closed，所以用户拿不到对象，无法通过DOM操作我们的UI，只能通过我们暴露给用户的addTask和removeTask来操作。

?注意，用户当然仍可以通过DOM API来往body中插入其他内容，但是，当一个元素创建了Shadow DOM，浏览器会优先渲染Shadow DOM，而忽略它的其他子元素，所以用户往body中插入任何内容都不会被渲染出来。唯一的例外是如果插入script标签，脚本会被执行，但是我们可以简单通过防止xss的代码过滤来阻止用户插入script标签。

这样，我们就通过Shadow DOM获得了一个相对安全的环境，对比worker的方式，可以避免postMessage的开销和拥有更简单的写法。当然Shadow DOM也有弊端，比如用户虽然不能改写当前body元素中渲染的内容了，但是可以彻底删掉body元素重新创建一个：

document.documentElement.removeChild(body);
const newBody = document.createElement('body');
document.documentElement.appendChild(newBody);

但是那样的话，原body中的所有内容也需要重建了。因此，使用Shadow DOM API至少大大增加了用户侵入的成本。

关于禁止开发者操作DOM对象的话题就谈到这里，还有什么可行的方法或者大家有什么想补充的，欢迎在 issue 中讨论。

欢迎关注「 字节前端 ByteFE 」

简历投递联系邮箱「 tech@bytedance.com 」