freeze-element snippet

Background

abort-on-property-read, abort-on-property-write and abort-current-inline-script snippets operate by attaching to a global variable and throwing an exception each time that variable is accessed. This approach works well for some of the inline scripts but many CV providers are trying to dodge that by obfuscating the code so the usage of the global variable is hidden or by not using accessible global variables at all.

The approach freeze-element will use is similar to the one above. But, instead of attaching to a specific global variable, the snippet will attach to the DOM mutation properties of a specific DOM element. The snippet will block the usage of these properties. The result will be that the element we targeted is frozen from adding new content inside it.

How?

There are 2 major implementation steps:

Watching the document to react when the target element is being added to the DOM using MutationObserver Finding the parent element and configure it's DOM mutation properties with a getter/setter in order to be able to add a conditional blocking proxy for each of them by doing that, we will be able to decide if the property access should be blocked based on the content that is being added

DOM mutation properties

• appendChild
• append
• prepend
• insertBefore
• replaceChild
• replaceWith
• after
• before
• insertAdjacentElement
• insertAdjacentHTML
• insertAdjacentText
• innerHTML
• outerHTML
• textContent
• innerText
• nodeValue

Parameters

Name	Description	Example	Mandatory
selector	The CSS selector for the parent element that we want to freeze	'.left-content .container'	yes
options	A single parameter for snippet's options. A string containing all the options we want to pass, each of them separated by a plus character (+). Empty single quotes if none (''). Available options: subtree (if we want to freeze all the element's children as well), abort (throw an error every time an child element gets added)	'' or subtree or abort or subtree+abort	no
exceptions	An array of regex/selectors used to specify the nodes we don't want to prevent being added. Each array item can be: selector (targeting Element nodes), regex (targeting Text nodes, identified by slash)	.article #banner .navigation /.*/	no

Examples

Filter	Result
freeze-element ol#b_results	Any addition of an immediate child to the ol#b_results element will be blocked.
freeze-element ol#b_results subtree	Any addition of a node to the entire subtree of ol#b_results element will be blocked.
freeze-element ol#b_results '' .organic-result	Any addition of an immediate child to the ol#b_results element will be blocked except for the elements with the organic-result class.
freeze-element ol#b_results '' .organic-result /hello/	Any addition of an immediate child to the ol#b_results element will be blocked except for the elements with the organic-result class and the Text nodes that match the /hello/ regex.
freeze-element ol#b_results '' .organic-result /.*/	Any addition of an immediate child to the ol#b_results element will be blocked except for the elements with the organic-result class and any Text node.
freeze-element ol#b_results '' .organic-result #header	Any addition of an immediate child to the ol#b_results element will be blocked except for the elements with the organic-result class or the id of header.
freeze-element ol#b_results subtree .organic-result #header	Any addition of a node to the entire subtree of ol#b_results element will be blocked except for the elements with the organic-result class or the id of header.
freeze-element ol#b_results abort	Any addition of an immediate child to the ol#b_results element will throw an error.
freeze-element ol#b_results abort+subtree	Any addition of a node to the entire subtree of ol#b_results element will throw an error.
freeze-element ol#b_results abort+subtree .organic-result	Any addition of a node to the entire subtree of ol#b_results element will throw an error except for the elements with the organic-result class.

Options syntax

In order to support multiple optional parameters, I proposed a syntax for the options parameter. For example, let's say in the future the snippet will need to support a new optional parameter. In this case, the second parameter needs to be skipped (see '' proposal). What do you think about it?

Integration Note

Because this snippet implementation relies on having the same environment for all the snippet executions (aka #227 (closed)), this implementation has a dependency on this change on ABP chrome.

/cc @u.bernitt