Update cosmetic filtering to be able to override page elements with `!important` styles #20177

antonok-edm · 2021-12-20T18:01:35Z

Originally found on https://www.foodnetwork.com/recipes/food-network-kitchen/classic-shrimp-scampi-8849846, where #dfp_bigbox_recipe_top and a few other banner ad spaces are not being collapsed. Corresponding filter rules are present in Easylist as generic class/id cosmetic filters.

Minimal example:

<html>
  <head></head>
  <body>
    <div id="dfp_bigbox_recipe_top" style="padding: 100px; background: #ccc; display: block!important"></div>
  </body>
</html>

The gray box should not be shown with Shields in aggressive mode. uBlock Origin is able to handle this correctly.

Of note is that Brave Shields creates a constructed stylesheet rule, which gets overridden by the inline display: block!important style on the element. uBlock Origin creates an injected stylesheet rule, which has higher precedence.

The text was updated successfully, but these errors were encountered:

ryanbr · 2021-12-20T21:53:21Z

Reported from the community; https://community.brave.com/t/foodnetwork-com-ad-boxes/316301

pes10k · 2021-12-22T03:00:23Z

I've confirmed that this works:

// New helper function
void HideCssSelectorsInFrame(const blink::WebLocalFrame& frame,
    const base::ListValue& selectors) {
  std::string stylesheet_text;
  for (const auto &selector : selectors.GetList()) {
    stylesheet_text.append(
        selector.GetString() + " {display:none !important;}\n");
  }
  frame.GetDocument().InsertStyleSheet(
      blink::WebString::FromUTF8(stylesheet_text),
      nullptr,
      blink::WebDocument::kUserOrigin); // <-- this is the important part
}

I'm not sure how to best integrate with the hide1pContent setting, but replacing the below:

  if (force_hide_selectors_list &&
      force_hide_selectors_list->GetList().size() != 0) {
    std::string json_selectors;
    if (!base::JSONWriter::Write(*force_hide_selectors_list, &json_selectors) ||
        json_selectors.empty()) {
      json_selectors = "[]";
    }
    // Building a script for stylesheet modifications
    std::string new_selectors_script = base::StringPrintf(
        kForceHideSelectorsInjectScript, json_selectors.c_str());
    web_frame->ExecuteScriptInIsolatedWorld(
        isolated_world_id_, blink::WebString::FromUTF8(new_selectors_script),
        blink::BackForwardCacheAware::kAllow);
  }

with

  base::ListValue* force_hide_selectors_list;
  if (resources_dict->GetList("force_hide_selectors",
                               &force_hide_selectors_list)) {
    HideCssSelectorsInFrame(*web_frame, *force_hide_selectors_list);
  }

Solves the issue.

ryanbr · 2021-12-23T09:50:26Z

Another example, possibly related empty spaces: https://community.brave.com/t/arstechnica-com-blank-ad-boxes/317201 on https://arstechnica.com/gadgets/2021/10/surface-laptop-studio-review-one-well-built-weird-convertible-pc/

https://www.gearbrain.com/dac-for-apple-music-iphone-2653373190.html

https://odysee.com/@Geeks+Gamers:e9/spider-man-no-way-home-movie-review:7

https://carbuzz.com/cars/dodge/challenger

stephendonner · 2022-02-10T02:18:55Z

Verified `PASSED` using

Brave	1.37.37 Chromium: 98.0.4758.87 (Official Build) nightly (x86_64)
Revision	e4cd00f135fb4d8edc64c8aa6ecbe7cc79ebb3b2-refs/branch-heads/4758@{#1002}
OS	macOS Version 12.3 (Build 21E5196i)

Steps:

installed 1.37.37
saved the minimal HTML testcase to my desktop
started a webserver locally via python3 -m http.server
loaded the file over the webserver: http://localhost:8000/Desktop/issue20177/issue20177-testcase.html
confirmed issue in 1.35.101 build, in both aggressive and standard Shields modes
switched back to 1.37.37

Confirmed fix in both aggressive and standard Shields modes: no gray box showing.
Confirmed gray box shows when allow all trackers & ads is set or Shields are Down/Off.

webserver	1.35.101, aggressive	1.35.101, standard	1.37.7, aggressive	1.37.7, standard	1.377 .7, allow all trackers & ads

Verified `PASSED` using

Brave	1.37.40 Chromium: 98.0.4758.87 (Official Build) nightly (64-bit)
Revision	e4cd00f135fb4d8edc64c8aa6ecbe7cc79ebb3b2-refs/branch-heads/4758@{#1002}
OS	Linux

Steps:

installed 1.37.40
saved the minimal HTML testcase to my desktop
started a webserver locally via python3 -m http.server
loaded the file over the webserver: http://localhost:8000/issue20177-testcase.html
confirmed issue in 1.35.101 build, in both aggressive and standard Shields modes
switched back to 1.37.40

Confirmed fix in both aggressive and standard Shields modes: no gray box showing.
Confirmed gray box shows when allow all trackers & ads is set or Shields are Down/Off.

webserver	1.37.7, aggressive	1.37.7, standard	1.377 .7, allow all trackers & ads

Verified PASSED using

Brave	1.37.46 Chromium: 98.0.4758.87 (Official Build) nightly (64-bit)
Revision	e4cd00f135fb4d8edc64c8aa6ecbe7cc79ebb3b2-refs/branch-heads/4758@{#1002}
OS	Windows 10 Version 21H2 (Build 19044.1526)

Steps:

installed 1.37.46
saved the minimal HTML testcase to my desktop
started a webserver locally via python3 -m http.server
loaded the file over the webserver: http://localhost:8000/issue20177-testcase.html
confirmed issue in 1.35.101 build, in both aggressive and standard Shields modes
switched back to 1.37.46

Confirmed fix in both aggressive and standard Shields modes: no gray box showing.
Confirmed gray box shows when allow all trackers & ads is set or Shields are Down/Off.

webserver	1.37.7, aggressive	1.37.7, standard	1.377 .7, allow all trackers & ads

Uni-verse · 2022-03-18T19:48:17Z

Verified using Beta 1.37.98, Chromium 99.0.4844.74 on Samsung GS 21 running Android 12, Samsung Galaxy Tab S7 running Android 11

Used minimal html file to test - Update cosmetic filtering to be able to override page elements with !important styles #20177 (comment)
Element will not be displayed in standard and aggressive modes with shields on.
Element will be shown when allow trackers or disabling shields.

1	2	3	4

Tablet:

1	2	3	4

antonok-edm added bug feature/shields/adblock Blocking ads & trackers with Shields uBO-parity OS/Android Fixes related to Android browser functionality features/shields/cosmetic-filtering OS/Desktop labels Dec 20, 2021

antonok-edm assigned antonok-edm and pes10k Dec 20, 2021

antonok-edm mentioned this issue Jan 19, 2022

Allow cosmetic filtering to override in-page !important styles #19085

Closed

antonok-edm mentioned this issue Jan 28, 2022

Cosmetic filtering fixes brave/brave-core#12038

Merged

25 tasks

antonok-edm closed this as completed in brave/brave-core#12038 Jan 28, 2022

antonok-edm added this to the 1.37.x - Nightly milestone Jan 28, 2022

antonok-edm added QA/Yes release-notes/include labels Jan 28, 2022

antonok-edm changed the title ~~Cosmetic filtering uses suboptimal stylesheet injection API~~ Update cosmetic filtering to be able to override page elements with !important styles Jan 28, 2022

This was referenced Jan 31, 2022

Blocked element reappear after page reload when block rule is still valid #19229

Closed

adblock with element chooser not working #19260

Closed

stephendonner added QA Pass-macOS and removed QA Pass-macOS labels Feb 10, 2022

stephendonner added QA Pass-macOS QA/Test-All-Platforms QA Pass-Linux QA Pass-Win64 labels Feb 10, 2022

Uni-verse added QA Pass - Android ARM QA Pass - Android Tab labels Mar 18, 2022

This was referenced Mar 30, 2022

Release notes for 1.37.x - Release #21982

Closed

Release notes for 1.37.x - Release #22050

Closed

antonok-edm mentioned this issue Apr 12, 2022

Re-allow cosmetic filtering to override in-page !important styles after regression #22264

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update cosmetic filtering to be able to override page elements with `!important` styles #20177

Update cosmetic filtering to be able to override page elements with `!important` styles #20177

antonok-edm commented Dec 20, 2021

ryanbr commented Dec 20, 2021

pes10k commented Dec 22, 2021 •

edited by antonok-edm

Loading

ryanbr commented Dec 23, 2021 •

edited

Loading

stephendonner commented Feb 10, 2022 •

edited

Loading

Uni-verse commented Mar 18, 2022 •

edited

Loading

Update cosmetic filtering to be able to override page elements with !important styles #20177

Update cosmetic filtering to be able to override page elements with !important styles #20177

Comments

antonok-edm commented Dec 20, 2021

ryanbr commented Dec 20, 2021

pes10k commented Dec 22, 2021 • edited by antonok-edm Loading

ryanbr commented Dec 23, 2021 • edited Loading

stephendonner commented Feb 10, 2022 • edited Loading

Verified PASSED using

Steps:

Verified PASSED using

Steps:

Steps:

Uni-verse commented Mar 18, 2022 • edited Loading

Update cosmetic filtering to be able to override page elements with `!important` styles #20177

Update cosmetic filtering to be able to override page elements with `!important` styles #20177

pes10k commented Dec 22, 2021 •

edited by antonok-edm

Loading

ryanbr commented Dec 23, 2021 •

edited

Loading

stephendonner commented Feb 10, 2022 •

edited

Loading

Verified `PASSED` using

Verified `PASSED` using

Uni-verse commented Mar 18, 2022 •

edited

Loading