search

uBlockOrigin / uBlock-issues

This is the community-maintained issue tracker for uBlock Origin
https://github.com/gorhill/uBlock
945 stars 81 forks source link

Ubo Picker broken on MSN.com (Shadow DOM) #2346

Open troysjanda opened 2 years ago

troysjanda commented 2 years ago

Prerequisites

I tried to reproduce the issue when...

Description

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

pickerIssuesOnMSN

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

Debug info

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

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 commented 2 years ago

Everything under entry-point is inside a shadow root.

troysjanda commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

troysjanda commented 2 years ago

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 commented 2 years ago

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

troysjanda commented 2 years ago

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 commented 2 years ago

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

krystian3w commented 1 year ago

Duplicate of https://github.com/uBlockOrigin/uBlock-issues/issues/2252

garry-ut99 commented 1 year ago

Also duplicate of / invalid due to / related to https://github.com/uBlockOrigin/uBlock-issues/issues/2215 and https://github.com/uBlockOrigin/uBlock-issues/issues/803 (wherein 2215 is already a duplicate of / invalid due to / related to 803).

troysjanda commented 1 year ago

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 https://github.com/uBlockOrigin/uBlock-issues/issues/803#issuecomment-586712831

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

garry-ut99 commented 1 year ago

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

https://github.com/uBlockOrigin/uBlock-issues/issues/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:

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

maverick74 commented 1 year ago

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 commented 8 months ago

Hard but can be used: https://github.com/gorhill/uBlock/commit/52b46eb98bedfa746206e89ac016734cbbed092a 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 commented 4 months ago

@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: image

Any ideas how could I make it work?

gorhill commented 4 months ago

Any ideas how could I make it work?

Try:

[disney website hostname]##disney-web-player:shadow(video):remove-attr(disablePictureInPicture)
fkoemep commented 4 months ago

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 commented 4 months ago

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:

Anyway, as for now:

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

krystian3w commented 4 months ago

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

garry-ut99 commented 4 months ago

(so only Chromium is susceptible).

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