Skip to content
GitLab
  • Menu
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
    • Switch to GitLab Next
  • Sign in / Register
  • A adblockpluscore
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Locked Files
  • Issues 90
    • Issues 90
    • List
    • Boards
    • Service Desk
    • Milestones
    • Iterations
    • Requirements
  • Jira
    • Jira
  • Merge requests 11
    • Merge requests 11
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
    • Test Cases
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages & Registries
    • Packages & Registries
    • Container Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Code review
    • Insights
    • Issue
    • Repository
  • Wiki
    • Wiki
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • eyeo
  • adblockplus
  • abc
  • adblockpluscore
  • Issues
  • #200
Closed
Open
Created Apr 28, 2020 by Alexandru Daniel Roman@a.roman

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

Edited Jul 22, 2020 by Alexandru Daniel Roman
Assignee
Assign to
Time tracking