# Tutorial - Dynamic / Contextual DOM rewriting to bypass client-side controls
Tired of scrolling through the DOM to unlock hidden and disabled elements ? Tired of copy-pasting your functions in the console ? Does your Burp Suite "Match & Replace" is not working for these sneaky dynamically updated elements ?
Tampermonkey is the way ;) In this short demo, we will setup contextual menus to quickly pop out / modify annoying parts of the DOM.
### Requirements
- [Tampermonkey extension](https://www.tampermonkey.net/)
- It's [open source](https://github.com/Tampermonkey/tampermonkey)
- It's **cross-browsers**
Install the extension in your favorite browser and go !
### Create your first userscript
Click on the extension and create a new script :
You should have this skeleton code:
```javascript
// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 2024-04-10
// @description try to take over the world!
// @author You
// @match https://www.google.com/
// @icon https://www.google.com/s2/favicons?sz=64&domain=google.com
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Your code here...
})();
```
### Example - Sample script to rewrite specific elements of the dom
Simply use the code that you would paste in your browser console. Let's use the following cookie-cutter code that rewrites the `class` attribute of all `
` that matches a pattern :
```javascript
// ==UserScript==
// @name demo
// @namespace http://tampermonkey.net/
// @version 2024-04-10
// @description try to take over the world!
// @author You
// @match https://www.yourtarget.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=google.com
// @grant none
// @run-at context-menu
// ==/UserScript==
(function() {
'use strict';
var divs = document.getElementsByTagName('div');
for (var indexdivs = 0; indexdivs < divs.length; ++indexdivs) {
var classAttribute = divs[indexdivs].getAttribute("class");
// Check if class attribute exists and contains the string "disabled"
if (classAttribute && classAttribute.includes("your-pattern-that-contains-something-you-dont-like-such-as-disabled")) {
console.log("FOUND " + classAttribute);
// Remove "disabled" from the class list
divs[indexdivs].setAttribute("class", "your-new-class-without-the-disabled-value");
}
}
})();
```
Script is available here :
- [https://github.com/doomerhunter/tampermonkey-useful-scripts](https://github.com/doomerhunter/tampermonkey-useful-scripts)
Explanations :
- `@name` is the name of your user-script. Useful to find the needed attack script later
- `@match` will only execute the script on the domains/urls that matches the regex. Useful to reduce the scope of your automation
- `@run-at` set to `context-menu` to enable a right-click > run script. This ensures that we execute the code in a controlled context and that we avoid breaking the page each time something changes
The full documentation for these headers can be found [here](https://www.tampermonkey.net/documentation.php) :
- [https://www.tampermonkey.net/documentation.php](https://www.tampermonkey.net/documentation.php)
Script logic:
- Get all the elements by their tag name, in this case `div`
- Iterate over these elements and check if they have a certain attribute (`class`)
- If that attribute contains a string that I don't like (`disabled`)
- Then rewrite that attribute
### Demo !
### What's next ?
I created a repo here where I'll upload generic scripts that will be easily adaptable / can be useful during specific use-cases. Feel free to contribute / bring ideas :)
- [https://github.com/doomerhunter/tampermonkey-useful-scripts](https://github.com/doomerhunter/tampermonkey-useful-scripts)