How to Prevent User-Injected JavaScript from Manipulating DOM Objects

This article discusses techniques to prevent user-injected JavaScript from manipulating DOM objects in web applications. The author explains that while window and document objects cannot be directly overwritten, users can still access them through various means.

The article examines several approaches, including wrapping user code in function scopes with strict mode, but demonstrates that these methods are insufficient as users can still access the window object through setTimeout or other means.

Two main solutions are presented:

1. Using Web Workers: Running user code in a Web Worker environment isolates it from the main browser context, preventing access to window and document objects. However, this approach requires postMessage communication between worker and main thread, which can be performance-intensive.

2. Using Shadow DOM: Creating a closed Shadow DOM with document.body.attachShadow({mode: 'closed'}) prevents users from accessing the ShadowRoot object. The article provides a complete example of creating a todo list application using Shadow DOM, where users can only interact through exposed API methods like addTask and removeTask.

The Shadow DOM approach has advantages over Web Workers, including simpler implementation and avoiding postMessage overhead. However, users can still remove the entire body element and recreate it, though this would require rebuilding all content.

The article concludes that while no method is completely foolproof, using Shadow DOM significantly increases the difficulty of DOM manipulation by user-injected code.