Opened 9 months ago

Closed 4 months ago

Last modified 6 weeks ago

#7187 closed change (fixed)

Implement hide-if-contains-image-hash snippet

Reported by: wspee Assignee: wspee
Priority: Unknown Milestone:
Module: Core Keywords: circumvention
Cc: mjethani, hfiguiere, oleksandr, amr Blocked By:
Blocking: Platform: Unknown / Cross platform
Ready: no Confidential: no
Tester: Ross Verified working: yes
Review URL(s):

https://gitlab.com/eyeo/adblockplus/adblockpluscore/merge_requests/11

Description

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

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/

Change History (19)

comment:1 Changed 9 months ago by wspee

  • Owner set to wspee

comment:2 Changed 9 months ago by wspee

  • Review URL(s) modified (diff)
  • Status changed from new to reviewing

comment:3 Changed 9 months ago by wspee

  • Cc mjethani added

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

Trick trac's spam protection

comment:4 Changed 9 months ago by mjethani

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

comment:5 Changed 9 months ago by hfiguiere

  • Cc hfiguiere added

comment:6 Changed 9 months ago by oleksandr

  • Cc oleksandr added

comment:7 Changed 7 months ago by amrmak

  • Cc amr added

comment:8 Changed 4 months ago by abpbot

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

comment:9 Changed 4 months ago by hfiguiere

  • Resolution set to fixed
  • Status changed from reviewing to closed

comment:10 Changed 7 weeks ago by abpbot

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

comment:11 Changed 7 weeks ago by 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

comment:13 Changed 7 weeks ago by abpbot

comment:14 Changed 7 weeks ago by 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

Last edited 7 weeks ago by oleksandr (previous) (diff)

comment:15 Changed 7 weeks ago by oleksandr

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

comment:16 Changed 7 weeks ago by hfiguiere

The thing is that the exceptions should not occur either.

comment:17 Changed 7 weeks ago by abpbot

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

comment:18 Changed 6 weeks ago by Ross

  • Tester changed from Unknown to Ross
  • Verified working set

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

comment:19 Changed 6 weeks ago by arthur

  • Sensitive unset
Note: See TracTickets for help on using tickets.