Adblock/uBlock rule to hide elements inside an iframe

Question

I would like to hide elements which have a specific attribute inside an iframe. For example, I want to hide all elements with attribute load-ads-json-from, and there is an element <div load-ads-json-from='//ad.server.net/some/resource'> inside an iframe <iframe src="https://content.server.net/where/the/content/is">.

So far I've tried ##iframe > [load-ads-json-from], or simply ##[load-ads-json-from]. Both don't work. I can conditionally hide the <iframe /> entirely, based on its src attribute, but there is useful info in the page that should not be hidden altogether.

Is there a way to do this?

Answer 1

Here is one way to block elements within an iframe:

1. open developer tools:
   • Chrome: https://developer.chrome.com/docs/devtools/open/;
   • Firefox: https://firefox-source-docs.mozilla.org/devtools-user/index.html;
   • Safari: https://support.apple.com/guide/safari/use-the-developer-tools-in-the-develop-menu-sfri20948/mac;
2. click on "Inspect" or "Select element", usually it's an icon of a mouse cursor above a rectangle, like so (Firefox): ;
3. select the iframe, you'll see something like this: ;
   • if you happen to click an element within the iframe, don't worry, scroll up in devtools until you see the <iframe> element;
4. right-click on the "src" attribute value (the URL) to bring up the context menu of your browser;
5. copy or open the URL in another tab;
6. filter whatever you have to filter;
7. close the tab;
8. refresh the original or all tab(s);

there you go, you have successfully blocked an element within the iframe.

It's easier if you already have the original URL of the iframe, just open in another tab and set your filter.

It works for uBlock Origin.