Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

pes10kcommented, Dec 23, 2021

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.

0reactions

Uni-versecommented, Mar 18, 2022

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 - https://github.com/brave/brave-browser/issues/20177#issue-1085062665
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

Top Results From Across the Web

Re-allow cosmetic filtering to override in-page !important ...

Unfortunately, the new method used to inject those CSS rules involved creating a new stylesheet for each rule, rather than the previous method ......

I'm going to be downvoted for saying this but... ublock origin ...

Doesn't this mean that web pages can easily override injected cosmetic filters since these are not injected as user styles?

OutNumbered3-1.com Ezoic Ads - Brave Community

Update cosmetic filtering to be able to override page elements with `! important` styles. Originally found on https://www.foodnetwork.com/ ...

How to create your own ad filters - AdGuard Knowledgebase

Blocking rules with $important modifier can override exceptions. Unblocking everything on a website. This rule unblocks. It disables all cosmetic rules on ...

CSS: Workaround to backdrop-filter? - Stack Overflow

1 · 1 · 1 · use another div to set background and the effect you need and use position and size same...