data:image Base64-Encoded Data - Unable to Select with Element Picker / No entry in Logger

[yourduskquibbles]

Filter issues MUST NOT be reported here. Read first: https://github.com/gorhill/uBlock/blob/master/CONTRIBUTING.md

Describe the issue

I would like to block the animated "squiggly lines" that are used as a line break at the top and bottom of block quote sections on the article page. These images do not appear in the Logger and appear to be unselectable using the Element Picker.

Digging into the Chrome Console I find that the blockquote div contains a before and after rule which loads a background-image with the following url: data:image/svg+xml;charset=utf8,%3Csvg id='Squiggle-svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.st0{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-50%);}}%3C/style%3E%3Cpath fill='none' stroke='%23000' stroke-width='1' class='st0' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E

This data:image background-image is not selectable with the uBlock Element Picker nor does it show up in the Logger.

Is it intended behavior for the SVG asset to not show up in the logger? I assume it may be because the asset is contained within the document page vs being loaded from an external source so the logger is unable to "see" the image separate from the document as a whole?

I have found using the two cosmetic filters below keeps the "squiggly lines" from appearing but I couldn't figure out a way to create a network filter that would block them because the data:image doesn't show up in the Logger. (Side-note: On other sites, I've also found that base64 data URI's also do not show up in the logger)

theoutline.com##.pullquote.pullquote--inline::before:style(background-image: none !important;)
theoutline.com##.pullquote.pullquote--inline::after:style(background-image: none !important;)

Outside of the element picker/logger issue, is there a network filter that I could create to block the squiggly lines from being loaded entirely?

I tried the following network filter, but it didn't appear to work - most likely user error.

||data:image/svg+xml;charset=utf8,%3Csvg%20id='Squiggle-svg'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xmlns:ev='http://www.w3.org/2001/xml-events'%20viewBox='0%200%2020%204'%3E%3Cstyle%20type='text/css'%3E.st0{animation:shift%20.3s%20linear%20infinite;}@keyframes%20shift%20{from%20{transform:translateX(0);}to%20{transform:translateX(-50%);}}%3C/style%3E%3Cpath%20fill='none'%20stroke='%23000'%20stroke-width='1'%20class='st0'%20d='M0,3.5%20c%205,0,5,-3,10,-3%20s%205,3,10,3%20c%205,0,5,-3,10,-3%20s%205,3,10,3'/%3E%3C/svg%3E$image,domain=theoutline.com

One or more specific URLs where the issue occurs

https://theoutline.com/post/1963/americas-long-shameful-history-of-sterilizing-prisoners

Screenshot in which the issue can be seen

Red outlines/text added by me to the screenshots.

Chrome Console

Chrome Console with what Element Picker can see

Element Picker non transparent

Logger

Steps for anyone to reproduce the issue

1. Try to select "squiggly line" with element picker
2. Look for data:image entry in logger

Your settings

[If you fail to provide this info, I will mark the issue as invalid. Lists all settings which differs from default settings]

• OS/version: Windows 7 64-bit
• Browser/version: Firefox 54.0.1 and Chrome Version 60.0.3112.78 (Official Build) (64-bit)
• uBlock Origin version: 1.13.9.2 on Firefox, 1.13.8 on Chrome

Your filter lists

Default

Your custom filters (if any)

None

[Atavic]

For me uBo 1.13.8 on FF ESR 52.0 blocks it.
Do you have EasyList on? #1735

[yourduskquibbles]

Easylist is enabled, when you say FF ESR blocks "it", what are you blocking and showing as blocked in the logger? I doubt Easylist has a rule to block that specific data SVG image.

The cosmetic filter I posted above with the elevated style priority keeps the squiggly line background-image from appearing but I was unable to click on the squiggly line image with the element picker and the logger doesn't show the image the only way to figure out what cosmetic filter to create was by digging into the console.

[gorhill]

I was unable to click on the squiggly line image with the element picker

The image is a style property set using the ::after pseudo-class. The picker doesn't look at pseudo-class, and I don't want to change this, the cost would be beyond reasonable. In such case, using the browser inspector is the preferred solution.

the logger doesn't show the image

Because it does not go through the webRequest API. See #2757.

[yourduskquibbles]

@gorhill Thanks for clarifying on the element picker that makes sense - no need to suffer performance wise for such a low occurring item.

For the logger issue, does that mean a network blocking filter i.e. something like
||data:image/svg+xml;charset=utf8,%3Csvg%20id='Squiggle-svg'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xmlns:ev='http://www.w3.org/2001/xml-events'%20viewBox='0%200%2020%204'%3E%3Cstyle%20type='text/css'%3E.st0{animation:shift%20.3s%20linear%20infinite;}@keyframes%20shift%20{from%20{transform:translateX(0);}to%20{transform:translateX(-50%);}}%3C/style%3E%3Cpath%20fill='none'%20stroke='%23000'%20stroke-width='1'%20class='st0'%20d='M0,3.5%20c%205,0,5,-3,10,-3%20s%205,3,10,3%20c%205,0,5,-3,10,-3%20s%205,3,10,3'/%3E%3C/svg%3E$image,domain=theoutline.com

or even something less specific such as

||theoutline.com^$data:image,domain=theoutline.com

will not work because base64 encoded items won't interact with the webRequest API? If a network block filter is possible, what is the desired format, it looks like your issue #2757 for the interim talks about converting into csp based filter until Mozilla/Chromium updates WebExtension API to handle data/blob types but I don't know the csp syntax/format for filter creation.

[Atavic]

My browser inspector is pretty clean, with many paragraphs that seem to indicate the content was stripped. I have a proxy and an hardened setup.

[gorhill]

Duplicate of #2757.

[yourduskquibbles]

@gorhill Sorry for bumping old topic but thought maybe better to post possible bug here to find out if it is intended behavior related to your comment above that it is impossible to create a filter for a valid pseudo-element within the element picker box.

Steps to reproduce what I am talking about below - using test profile with default settings/filters

1. Add following filters to 'My Filters'
   similarweb.com###js-header:style(position: absolute !important;)
similarweb.com###js-stickyElement
similarweb.com##.is-fixed.js-scroll-nav.scroll-navbar:style(position: absolute !important;)
similarweb.com##.js-websiteHeaderTop.websiteHeader-topContainer:style(position: absolute !important;)

2. Navigate to https://www.similarweb.com/website/instructure.com

3. Scroll down the page and notice blank space above the page body that scrolls down the page with you (outlined in red below) also notice that this is not a directly selectable element with the element picker (suggesting to me it is probably a pseudo-element that needs to be found via inspector)

4. When using inspector in Chrome, see that it is caused by pseudo element :before on element ##.websiteHeader

5. From element picker entry box, add in ##.websiteHeader see it is valid and able to create but will remove content I don't want to remove as well as the scrolling blank box.

6. Now add ##.websiteHeader:before or ##.websiteHeader::before to Element Picker entry box and see that both filter options will throw error in element picker box and are unable to create the filter even though both are valid filters that will change the behavior of the site if you add similarweb.com##.websiteHeader:before or similarweb.com##.websiteHeader::before to 'My Filters'

7. After adding similarweb.com##.websiteHeader:before to 'My Filters' reload the page and notice the floating box is no longer displayed.

My question is this intended behavior of uBO Element Picker because cost would be too high to verify if typed out pseudo-elements are valid filters within the element picker and should only be manually added using 'My Filters' panel?

[gorhill]

@yourduskquibbles see #2515.