Opened on 12/28/2018 at 01:00:30 PM

Closed on 06/06/2019 at 12:46:51 PM

Last modified on 08/12/2019 at 10:41:34 AM

#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):



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.


Hints for testers

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

  <div id='hash-selector-searchSelector'>
    <p>$#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 id='hash-selector-searchSelector-selection'>
    <p>$#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 id='hash-selector-searchSelector-selection-negative'>
    <p>$#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 id='hash-selector-searchSelector-selection-maxDistance'>
    <p>$#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 id='hash-selector-searchSelector-selection-maxDistance-blockBits'>
    <p>$#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' />

The above test cases can also be found here
The assets can be found in the corresponding project corresponding project
A perceptual image hash generator can be found here

Attachments (0)

Change History (19)

comment:1 Changed on 12/28/2018 at 01:17:23 PM by wspee

  • Owner set to wspee

comment:2 Changed on 12/28/2018 at 01:17:29 PM by wspee

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

comment:3 Changed on 12/28/2018 at 01:19:03 PM 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 on 01/02/2019 at 06:22:16 AM by mjethani

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

comment:5 Changed on 01/03/2019 at 03:53:07 PM by hfiguiere

  • Cc hfiguiere added

comment:6 Changed on 01/08/2019 at 07:30:21 AM by oleksandr

  • Cc oleksandr added

comment:7 Changed on 03/06/2019 at 06:47:11 PM by amrmak

  • Cc amr added

comment:8 Changed on 06/06/2019 at 12:45:36 PM by abpbot

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

comment:9 Changed on 06/06/2019 at 12:46:51 PM by hfiguiere

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

comment:10 Changed on 07/31/2019 at 02:01:42 PM by abpbot

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

comment:11 Changed on 08/01/2019 at 07:46:01 PM 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

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:12 Changed on 08/01/2019 at 09:54:26 PM by hfiguiere

comment:13 Changed on 08/01/2019 at 10:15:20 PM by abpbot

comment:14 Changed on 08/02/2019 at 09:58:10 AM by oleksandr

Looks like the test page was not adapted after the snippet was finished. The appropriate snippets for each test case should be:$#hide-if-contains-image-hash ffff8f8383ffffff '#hash-selector img'$#hide-if-contains-image-hash 0f0f8f07f7ffffff '#hash-selector-searchSelector > div'$#hide-if-contains-image-hash 0100010101010101 '#hash-selector-searchSelector-selection > div' 0 8 740x0x60x60$#hide-if-contains-image-hash 0100010101010101 '#hash-selector-searchSelector-selection-negative > div' 0 8 -60x0x60x60$#hide-if-contains-image-hash 0100010101010101 '#hash-selector-searchSelector-selection-maxDistance > div' 1 8 740x0x60x60$#hide-if-contains-image-hash 59ff007f00ff007fffff80c3808390c7ffff910790078087fefbffffffffffff '#hash-selector-searchSelector-selection-maxDistance-blockBits > div' 0 16 0x0x800x250

Last edited on 08/02/2019 at 10:06:07 AM by oleksandr

comment:15 Changed on 08/02/2019 at 11:11:21 AM by oleksandr

An alternative (fixed) test page is available here:

comment:16 Changed on 08/02/2019 at 02:37:56 PM by hfiguiere

The thing is that the exceptions should not occur either.

comment:17 Changed on 08/05/2019 at 06:06:45 PM by abpbot

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

comment:18 Changed on 08/06/2019 at 09:51:39 PM by Ross

  • Tester changed from Unknown to Ross
  • Verified working set

Done. Working as expected.

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 on 08/12/2019 at 10:41:34 AM by arthur

  • Sensitive unset

Add Comment

Modify Ticket

Change Properties
as closed .
The resolution will be deleted. Next status will be 'reopened'.
to The owner will be changed from wspee.
Note: See TracTickets for help on using tickets.