Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nano Adblocker cannot block elements that are inside `#shadow-root` #237

Open
DandelionSprout opened this issue Jan 21, 2019 · 10 comments
Open

Comments

@DandelionSprout
Copy link

@DandelionSprout DandelionSprout commented Jan 21, 2019

Describe the issue (Required)

Nano Adblocker seems to me to be unable to block elements that are inside a #shadow-root container.

Screenshots (Required)

Image 1:
image

Image 2:
image

Screenshot of console (Required, press F12 to open the console)

(See the screencaps above.)

URLs where this issue occurs (Required if applicable)

https://www.tv2.no/nyheter/10359148/

Reproduction Steps (Optional if trivial)

  1. Go to https://www.tv2.no/nyheter/10359148/. I'm using Chrome for this example.
  2. Open up the console to confirm that there are several elements that have a .EmbeddedTweet value, but that are inside a grey-coloured box called #shadow-root (open)
  3. Open up the element picker, and write ##.EmbeddedTweet into it, or ##.embeddedtweet-tweetcontainer, or any other value that are inside the #shadow-root box.
  4. See that it shows 0 results.
  5. Try to add at least one of them to My Filters.
  6. Reload the page, and see that the embedded Twitter tweet still isn't blocked.

Anything else you believe to be useful (Optional)

As my first need for this is to be able to specifically block embedded tweets that are made by Donald Trump, for the purposes of Twitter De-Politificator, I can not make due with simply ##.twitter-widget-0 or ##.twitter-tweet, because all the values that could've narrowed it down to Trump's tweets only, are inside the unselectable elements.

I also feel that this issue is a somewhat critical issue that should be fixed in general, just in case ad firms discover that adblockers cannot block things that are inside #shadow-root boxes and decides to abuse that feature big time.

Environment (Required)

  • Operating System and Version: Windows 10 October 2018 Update (Last installed update: KB4480116)
  • Browser and Version: Chrome 71.0.3578.98 64-bit
  • Nano Adblocker Version: 1.0.0.83
  • Nano Defender Version (Optional if you are not using it): 15.0.0.87

Your filter lists (Required)

I use more than 30 filter lists, and it'd take me half an hour to write down all of them. As this issue doesn't seem to me at first sight to be list-dependent, I'll skip this part for now, but I can do it on request.

@DandelionSprout DandelionSprout changed the title Nano Adblocker cannot select elements that inside "#shadow-root" boxes Nano Adblocker cannot block elements that are inside "#shadow-root" boxes Jan 21, 2019
@jspenguin2017

This comment has been minimized.

Copy link
Member

@jspenguin2017 jspenguin2017 commented Jan 21, 2019

Sorry I'm quite busy. Have you tried the shadow piercing operator? If yes then I'll have another look later.

@DandelionSprout

This comment has been minimized.

Copy link
Author

@DandelionSprout DandelionSprout commented Jan 21, 2019

I must admit that I don't really know what a shadow piercing operator is. If you mean that I should try using :ng-deep, which a Google search is telling me that a shadow piercing operator is, then I have no real idea how to make use of it.

@jspenguin2017

This comment has been minimized.

Copy link
Member

@jspenguin2017 jspenguin2017 commented Jan 22, 2019

It's either /deep/ or >>>.
I think it's /deep/ for Chrome.

@jspenguin2017

This comment has been minimized.

Copy link
Member

@jspenguin2017 jspenguin2017 commented Jan 22, 2019

Actually you're right, elements inside the shadow root don't seem to be selectable with CSS selectors, /deep/ doesn't work.

I'll investigate when I have time.

@krystian3w

This comment has been minimized.

Copy link

@krystian3w krystian3w commented Jan 22, 2019

Maybe completed deceprated after 2 years.

@DandelionSprout DandelionSprout changed the title Nano Adblocker cannot block elements that are inside "#shadow-root" boxes Nano Adblocker cannot block elements that are inside "#[something]" boxes Feb 2, 2019
@DandelionSprout

This comment has been minimized.

Copy link
Author

@DandelionSprout DandelionSprout commented Feb 2, 2019

I've now also learned that the problem is in fact not unique to #shadow-root boxes, but applies to virtually all plain-text boxes that start with #. An example of this is on Google Play Books, where virtually everything is inside a #document box.

This presumably applies to all of their books in their webreader. Here's an example from Dulcie's Taste of Magic, trying to hide a near-randomly picked element as an example:
image

@gwarser

This comment has been minimized.

Copy link

@gwarser gwarser commented Feb 2, 2019

Element picker does not drill into <iframe>'s. books.googleusercontent.com##... should work when added manually.

@DandelionSprout

This comment has been minimized.

Copy link
Author

@DandelionSprout DandelionSprout commented Feb 2, 2019

Ah. I had been trying manually too, but with play.google.com##..., which did not work, whereas books.googleusercontent.com##... does work.

I guess that's one aspect of this situation solved.

@DandelionSprout DandelionSprout changed the title Nano Adblocker cannot block elements that are inside "#[something]" boxes Nano Adblocker cannot block elements that are inside "#[certain things]" boxes Feb 2, 2019
@krystian3w

This comment has been minimized.

Copy link

@krystian3w krystian3w commented Feb 2, 2019

Firefox have "show iframe" (no added in chromium) / "show iframe source" (included also in chromium).

@jspenguin2017

This comment has been minimized.

Copy link
Member

@jspenguin2017 jspenguin2017 commented Feb 2, 2019

You can hide elements in iframes by setting the iframe source as the domain of the cosmetic rule.

@jspenguin2017 jspenguin2017 changed the title Nano Adblocker cannot block elements that are inside "#[certain things]" boxes Nano Adblocker cannot block elements that are inside `#shadow-root` Mar 19, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.