Ubo Picker broken on MSN.com (Shadow DOM)

[troysjanda]

Prerequisites

• I verified that this is not a filter list issue. Report any issues with filter lists or broken website functionality in the uAssets issue tracker.
• This is not a support issue or a question. For any support, questions or help, visit /r/uBlockOrigin.
• I performed a cursory search of the issue tracker to avoid opening a duplicate issue.
• The issue is not present after disabling uBO in the browser.
• I checked the documentation to understand that the issue I am reporting is not normal behavior.

I tried to reproduce the issue when...

• uBO is the only extension.
• uBO uses default lists and settings.
• using a new, unmodified browser profile.

Description

using the picker block entire page and unable to select individual items. as seen in animated gif

sorry about the full screen was trying to be complete in the process

Debug info

• uBlock Origin: 1.44.5b21
• Firefox: 106
• filterset (summary):
• network: 273064
• cosmetic: 127973
• scriptlet: 21422
• html: 825
• listset (total-discarded, last-updated):
• removed:

• plowe-0: null
  

• added:

• adguard-spyware-url: 793-3, 4h.44m
  

• block-lan: 44-0, 4h.44m
  

• curben-phishing: 177631-9, 4h.39m
  

• curben-pup: 192-0, 4h.43m
  

• fanboy-annoyance: 81841-9490, 4h.43m
  

• ublock-annoyances: 4733-9, 4h.43m
  

• default:

• user-filters: 0-0, never
  

• ublock-filters: 31834-58, 4h.44m
  

• ublock-badware: 3947-0, 4h.44m
  

• ublock-privacy: 288-0, 4h.44m
  

• ublock-abuse: 76-0, 4h.44m
  

• ublock-unbreak: 1886-3, 4h.44m
  

• ublock-quick-fixes: 427-0, 4h.44m
  

• easylist: 62415-337, 4h.44m
  

• easyprivacy: 30822-1190, now
  

• urlhaus-1: 11029-0, 4h.44m
  

• filterset (user): [empty]
• trustedset:
• added: [array of 44 redacted]
• hostRuleset:
• added: [array of 3 redacted]
• modifiedUserSettings:
• advancedUserEnabled: true
• showIconBadge: false
• webrtcIPAddressHidden: true
• modifiedHiddenSettings:
• autoCommentFilterTemplate: none
• extensionUpdateForceReload: true
• filterAuthorMode: true
• filterOnHeaders: true
• updateAssetBypassBrowserCache: true
• userResourcesLocation: [redacted]
• supportStats:
• allReadyAfter: 366 ms (selfie)
• maxAssetCacheWait: 518 ms

A specific URL where the issue occurs.

MSN.com

Steps to Reproduce

open msn.com
click the Ubo icon
select picker
attemp to pick item to block
whole page highlights

Expected behavior

should be able to pick any item on page

Actual behavior

Entire page is red and if you click it the picker windows opens and you only get 2 selection

• ##entry-point
  

• ##fluent-design-system-provider
  

if one is selected it blocks the entire page

uBO version

Dev 1.44.5b21

Browser name and version

Firefox 106.0.2

Operating System and version

Windows 11 Enterprise 22621.755 22H2

[gorhill]

Everything under entry-point is inside a shadow root.

[troysjanda]

Everything under entry-point is inside a shadow root.

Not sure what the means sir. thinking that it means that it can't be fixed?

[gorhill]

I don't know what can be done at the moment, this will need time for investigating, my first thought is to maybe have something like "Block element in frame…", i.e. "Block element in shadow…", if possible at all.

---

Well "Block element in shadow…" is probably not a good idea, that page uses shadows inside shadows inside shadows...

[troysjanda]

ok, if you need any other information please ask. thanks for your quick replies.

[troysjanda]

Well "Block element in shadow…" is probably not a good idea, that page uses shadows inside shadows inside shadows...

I personally don't use that page often but was trying to help someone on the reddit page and ran across it.

[uBlock-user]

I use a scriptlet for removing shadowroot nodes - https://github.com/uBlock-user/uBO-Scriptlets/blob/master/scriptlets.js#L3

[troysjanda]

I use a scriptlet for removing shadowroot nodes - https://github.com/uBlock-user/uBO-Scriptlets/blob/master/scriptlets.js#L3

I am already using your scriptlets in advance settings. is there a MSN.com filter I should be using?

[krystian3w]

IMO no possible good use rsre ("remove-shadowroot-elem") to safe use element picker.

[krystian3w]

Duplicate of #2252

[garry-ut99]

Also duplicate of / invalid due to / related to #2215 and #803
(wherein 2215 is already a duplicate of / invalid due to / related to 803).

[troysjanda]

Also duplicate of / invalid due to / related to #2215 and #803 (wherein 2215 is already a duplicate of / invalid due to / related to 803).

This is not invalid as the picker is broken on the MSN site due to the shadow dom issues. If one is unable to use the picker to pick an element to hide, but instead gets a red overlay and unable to select anything that is broken. #2215 is about ads he had blocked showing again and at that time the response was unable to reproduce, and deemed invalid. #803 is a specific filter issue

Issue can be reproduced using #mainContent selector, so no need to get a EU IP address to reproduce.

As stated by Gorhill comment #803 (comment)

My issue is that the picker is broken when attempting to make selections on MSN site, due to ShadowDom.

[garry-ut99]

as the picker is broken on the MSN site due to the shadow dom issues. If one is unable to use the picker to pick an element to hide, but instead gets a red overlay and unable to select anything that is broken.
My issue is that the picker is broken when attempting to make selections on MSN site, due to ShadowDom.

Perfectly same like in 2215 and uAssets/13052

#2215 is about ads he had blocked showing again

A cherry picked the first part of the description, the other part ignored, despite the other part is the most important:

• 2215 : Description: areas I have blocked are now appearing and the elemnt picker and element zapper are no tworking. When I try to use them the entire page is highlighted.
• 2346 : Description: using the picker block entire page and unable to select individual items. as seen in animated gif
• Black boxes on msn.com uAssets#13052 (comment) which was marked as duplicate of 803:
  Description: But I can't block them, because the element picker can't pick it. the select element can't be picked.

Duplicates: the same issues (a broken picker which is highlighting the whole page) caused by the same cause (shadow DOM).

[maverick74]

I'm facing this same problem (in Firefox).
However the "Logo-Search-Settings" bar is no longer included in the "global selected box".

( I have a feeling all the other sites will soon start using the same recipe! )

[krystian3w]

Hard but can be used: gorhill/uBlock@52b46eb I do not recommend yet for #2297

anti-social demo in header:

##fluent-design-system-provider > entry-point:shadow(div[class*="container"]) > me-stripe:shadow(msft-horizontal-card-slider) > me-stripe-tile:shadow(.me-stripe-tile-content) a[href*="facebook.com"]

[fkoemep]

@krystian3w is that selector still experimental? I have a custom filter that always worked for enabling picture in picture when websites block it:

*##video:remove-attr(disablePictureInPicture)

I'm realising that now it doesn't work on Disney+ because they hide it under a shadow-root under a custom element:

Any ideas how could I make it work?

[gorhill]

Any ideas how could I make it work?

Try:

[disney website hostname]##disney-web-player:shadow(video):remove-attr(disablePictureInPicture)

[fkoemep]

Any ideas how could I make it work?

Try:

[disney website hostname]##disney-web-player:shadow(video):remove-attr(disablePictureInPicture)

That worked! Had to modify "disablePictureInPicture" to lowercase, weird since I thought remove-attr is case insensitive.

I know this is probably bad practice but I generalized the rules to unblock PiP and casting for every website, works for now:

*##video:remove-attr(disablePictureInPicture)
*##video:remove-attr(disablepictureinpicture)
*##video:remove-attr(disableRemotePlayback)
*##video:remove-attr(disableremoteplayback)
*##audio:remove-attr(disableRemotePlayback)
*##audio:remove-attr(disableremoteplayback)
*##*:shadow(video):remove-attr(disablePictureInPicture)
*##*:shadow(video):remove-attr(disablepictureinpicture)
*##*:shadow(video):remove-attr(disableRemotePlayback)
*##*:shadow(video):remove-attr(disableremoteplayback)
*##*:shadow(audio):remove-attr(disableRemotePlayback)
*##*:shadow(audio):remove-attr(disableremoteplayback)

[garry-ut99]

fkoemep : Had to modify "disablePictureInPicture" to lowercase, weird since I thought remove-attr is case insensitive.

From uBO remove-attr documentation :

arg: A plain string to match exactly, or a regex literal.

It seems exactly means really exactly, which means not only the whole attribute name from left to right, but also case sensivity too.

But on the other hand, you seem to be right too, from w3c documentation:

Attribute names for HTML elements may be written with any mix of lowercase and uppercase letters that are a case-insensitive match for the names of the attributes given in the HTML elements section of this document; that is, attribute names are case-insensitive.

Also it has been fixed for set-attr:

• Make check for on... attributes case-insensitive #3121

Anyway, as for now:

• you can still use regex with ignoreCase flag i.
• also you can combine phrases in regex by using Non-capturing group
• also you can combine CSS selectors

*##video, audio:remove-attr(/disable(?:PictureInPicture|RemotePlayback)/i)
*##*:shadow(video, audio):remove-attr(/disable(?:PictureInPicture|RemotePlayback)/i)

[krystian3w]

Enough in Firefox use PiP button in URL bar, then HTML attribute no longer works anywhere (so only Chromium is susceptible).

[garry-ut99]

(so only Chromium is susceptible).

Or in Chromium browsers use one of many PIP extensions (I didn't test them).