Implement hide-if-contains-image-hash snippet

[wspee]

Background

Several circumvention techniques exists that rely on randomizing the dom tree properties of an ad to a degree where it's no longer feasible to block it based on text comparison mechanism. For such techniques it would be useful to be able to use some sort of image recognition mechanism to block the ads. Perceptual Image Hashing is such a technique that is simple yet powerful enough to be a promising first candidate on the road to visual ad blocking.

What to change

Implement a snippet called hide-if-contains-image-hash with the following signature:

function hideIfContainsImageHash(hash, selector, searchSelector, selection, maxDistance, blockBits)

Similar to hide-if-contains-image/hide-if-contains (#7088, #6809, #6847, and #6848), it should take a hash "string" (the hexadecimal perceptual hash of the image), a CSS selector to hide, and a CSS selector to search. Additionally it should take a selection parameter to specify the part of the image that should be hashed (i.e. x, y, width and height), the maximum hamming distance between hashes to still be considered a match and the number of bits used to construct the hash. For non image elements it should examine the background-image ​computed style of the element matching searchSelector. If the perceptual hash of the image or the background-image data (downloaded using ​fetch) matches the given hash, it should hide the ancestor matching selector.

References

• ​http://blockhash.io/
• ​https://github.com/commonsmachinery/blockhash-js
• ​https://pdfs.semanticscholar.org/b59b/14d3a0d7047a63cbbcfc25582fb915f60664.pdf
• ​http://arxiv.org/abs/1811.03194

Hints for testers

  <div id='hash-selector'>
    <p>wspee.gitlab.io#$#hide-if-contains-image-hash ffff8f8383ffffff  '#hash-selector img'</p>
    <img src='assets/hash-selector.png' />
  </div>

  <div id='hash-selector-searchSelector'>
    <p>wspee.gitlab.io#$#hide-if-contains-image-hash 0f0f8f07f7ffffff '#hash-selector-searchSelector > div' img</p>
    <div style='background-color:red;'>
      <img src='assets/hash-selector-searchSelector.png' />
    </div>
  </div>

  <div id='hash-selector-searchSelector-selection'>
    <p>wspee.gitlab.io#$#hide-if-contains-image-hash 0100010101010101 '#hash-selector-searchSelector-selection > div' img 740x0x60x60</p>
    <div style='background-color:red;'>
      <img src='assets/hash-selector-searchSelector-selection.png' />
    </div>
  </div>

  <div id='hash-selector-searchSelector-selection-negative'>
    <p>wspee.gitlab.io#$#hide-if-contains-image-hash 0100010101010101 '#hash-selector-searchSelector-selection-negative > div' img -60x0x60x60</p>
    <div style='background-color:red;'>
      <img src='assets/hash-selector-searchSelector-selection.png' />
    </div>
  </div>

  <div id='hash-selector-searchSelector-selection-maxDistance'>
    <p>wspee.gitlab.io#$#hide-if-contains-image-hash 0100010101010101 '#hash-selector-searchSelector-selection-maxDistance > div' img 740x0x60x60 1</p>
    <div style='background-color:red;'>
      <img src='assets/hash-selector-searchSelector-selection-maxDistance.png' />
    </div>
  </div>

  <div id='hash-selector-searchSelector-selection-maxDistance-blockBits'>
    <p>wspee.gitlab.io#$#hide-if-contains-image-hash 59ff007f00ff007fffff80c3808390c7ffff910790078087fefbffffffffffff '#hash-selector-searchSelector-selection-maxDistance-blockBits > div' img 0x0x800x250 0 16</p>
    <div style='background-color:red;'>
      <img src='assets/hash-selector-searchSelector-selection-maxDistance-blockBits.png' />
    </div>
  </div>

The above test cases can also be found here ​https://wspee.gitlab.io/percippet/test.html
The assets can be found in the corresponding project corresponding project ​https://gitlab.com/wspee/percippet/
A perceptual image hash generator can be found here ​https://wspee.gitlab.io/percippet/

[wspee]

Finally got around to submit the percippet snippet, please have a look and let me know what you think :).

Trick trac's spam protection

[mjethani]

Thanks for filing this. I'll look into it in a while.

[abpbot]

A commit referencing this issue has landed:
​Issue 7187 - Added a perceptual image hashing snippet

[abpbot]

A commit referencing this issue has landed:
​Issue 7187 - Added a perceptual image hashing snippet

[Ross]

Only the first example appears to work as expected. The second fails silently. The other four fail with the same error below. I tried playing around with the parameters/page and had the same results.

In Chrome 76 and 49 (In page console):

VM27:1249 Uncaught TypeError: Cannot read property 'NaN' of undefined
    at bmvbhash (eval at <anonymous> (test.html:10), <anonymous>:1249:26)
    at hashImage (eval at <anonymous> (test.html:10), <anonymous>:1269:10)
    at Image.imageElement.onload (eval at <anonymous> (test.html:10), <anonymous>:1378:22)

In Firefox 68 and 51 (In browser console):

TypeError: blocks[blockTop] is undefined 2 ExtensionContent.jsm line 503 > Function:1249:9
TypeError: blocks[blockTop] is undefined 4 ExtensionContent.jsm line 503 > Function:1249:9

ABP 3.6.0.2353
Chrome 49.0.2623.75 / Windows 10 1809
Chrome 76.0.3809.87 / Windows 10 1809
Firefox 51.0 / Windows 10 1809
Firefox 68.0 / Windows 10 1809

[hfiguiere]

I filed ​https://gitlab.com/eyeo/adblockplus/adblockpluscore/issues/47 to track this failure.

[abpbot]

A commit referencing this issue has landed:
​Noissue - Revert Issue 7187 Added a perceptual image hashing snippet

[oleksandr]

Looks like the test page was not adapted after the snippet was finished. The appropriate snippets for each test case should be:

wspee.gitlab.io#$#hide-if-contains-image-hash ffff8f8383ffffff '#hash-selector img'

wspee.gitlab.io#$#hide-if-contains-image-hash 0f0f8f07f7ffffff '#hash-selector-searchSelector > div'

wspee.gitlab.io#$#hide-if-contains-image-hash 0100010101010101 '#hash-selector-searchSelector-selection > div' 0 8 740x0x60x60

wspee.gitlab.io#$#hide-if-contains-image-hash 0100010101010101 '#hash-selector-searchSelector-selection-negative > div' 0 8 -60x0x60x60

wspee.gitlab.io#$#hide-if-contains-image-hash 0100010101010101 '#hash-selector-searchSelector-selection-maxDistance > div' 1 8 740x0x60x60

wspee.gitlab.io#$#hide-if-contains-image-hash 59ff007f00ff007fffff80c3808390c7ffff910790078087fefbffffffffffff '#hash-selector-searchSelector-selection-maxDistance-blockBits > div' 0 16 0x0x800x250

[oleksandr]

An alternative (fixed) test page is available here: ​https://shoniko.gitlab.io/percippet/test.html

[hfiguiere]

The thing is that the exceptions should not occur either.

[abpbot]

A commit referencing this issue has landed:
​Issue 7187 - Added a perceptual image hashing snippet

[Ross]

Done. Working as expected.

ABP 3.6.2.2361
Chrome 49.0.2623.75 / Windows 10 1809
Chrome 76.0.3809.87 / Windows 10 1809
Opera 36.0.2130.65 / Windows 10 1809
Opera 62.0.3331.99 / Windows 10 1809
Firefox 51.0 / Windows 10 1809
Firefox 68.0.1 / Windows 10 1809