Uppy: Adblock Plus breaks the image previewer

[kstratis]

This is an interesting one:

The Adblock Plus browser extension seems to break the thumbnail previewer in Dashboard:

Funny thing is that the plugin's UI states that no ads were blocked on the page:

Disabling the extension gets things back to normal. However two days ago this wasn't the case.

I noticed the bug in all major browsers: Chrome 65, Firefox 59.0.2 and Safari 11.1 on OS X. Maybe related to #458.

Any ideas? Thanks

[goto-bus-stop]

Whelp! ABP is using this style rule:

::content img[src*="blob:"] {
  display: none !important;
}

which hides any generated images…

(Actually it's this generated monster :P)

::content #google_ads, ::content .ads_300, ::content .advert-text, ::content .headerAd, ::content .verticalAdText, ::content .IM_ad_unit, ::content .wp_bannerize, ::content #sponsored_link, ::content #top-banner-ad, ::content .ad_default, ::content .adbox-rectangle, ::content .adsanity-group, ::content .advertCont, ::content .banner-ads, ::content .featured-ad, ::content .for-taboola, ::content .right-ad, ::content .wppaszone, ::content .ad-unit-300-wrapper, ::content .adv_txt, ::content .page-ad, ::content img[src="blob:"], ::content #ad_728_90, ::content #adver5, ::content .advert-block, ::content .bottomad, ::content .home-ads, ::content .leaderboard-ads, ::content .sticky-ad, ::content .adTopHome, ::content #adblock2, ::content #dfp_ad_Entry_728x90, ::content .ad_item, ::content .footer-ad, ::content .top-advert, ::content a[href^="http://affiliate.coral.co.uk/processing/"], ::content #adheader, ::content .AdBar, ::content #adtop, ::content #advertising_300, ::content .SponsoredResults, ::content .ad-background, ::content .ad-placement, ::content .ad468, ::content .ads-inline, ::content .banner-ad, ::content .bottom-ads, ::content #bannerad, ::content .ad-served, ::content #ad-horizontal, ::content #ctlDisplayAd1_lblAd, ::content .adPanel, ::content .bannerAd, ::content .bsa_it_ad, ::content .refreshAds, ::content .sponsoredLinks, ::content div[id^="acm-ad-tag-"], ::content #ad-wrapper, ::content #leftad, ::content .adPod, ::content .adHolder, ::content .leftAd, ::content .strawberry-ads, ::content .featuredAdBox, ::content .top_ad_wrap, ::content #ad-top, ::content #adFrame, ::content #footer-ad, ::content #headerAd, ::content .ad_container, ::content .bottom-ad-container, ::content .gallery-ad, ::content .module-zerg, ::content #advertising_wrapper, ::content .ads_top, ::content .list-ad, ::content #ad-header-728x90, ::content #ad-right-top, ::content #banner728, ::content #contentad-top-adsense-1, ::content .ad-links, ::content .adWrap, ::content .ad_footer, ::content .after-post-ad, ::content .has-ad, ::content .mobile-ad, ::content .widget_ad_widget, ::content .adItem, ::content #ad-skyscraper, ::content #adPosition0, ::content #advert-placeholder-post-content-image-1, ::content #featured-ads, ::content .adslot_1, ::content .banner_728x90, ::content .reklama1, ::content .sponsorBottom, ::content #ad_topslot, ::content #theAd, ::content .top-ad, ::content #ra-taboola-bottom, ::content #top-ad, ::content .ad-panel, ::content .ad-wrapper, ::content .adplace, ::content .ipsAd, ::content .rightadv, ::content #boxes-box-zergnet_module, ::content .ad-holder, ::content #adcontent, ::content #adsdiv, ::content #reklama, ::content .ad-left, ::content .adChoicesLogo, ::content .ad_title, ::content .ads-1, ::content .advertisment, ::content .newsad, ::content .premiumAdOverlay, ::content a[href="/adrotate-out.php?"], ::content #game-ad, ::content .adFrameCnt, ::content .rail-ad, ::content #leaderboardad, ::content #ad-bottom, ::content #promo-ad, ::content .advertisement__leaderboard, ::content .displayAd, ::content .lx_ad_title, ::content .player_hover_ad, ::content .s_ad_300x250, ::content .sponsor-text, ::content a[href^="http://marketgid.com"], ::content #ad_content, ::content #side_ads, ::content .ad_head_rectangle, ::content .container_ad, ::content .story-ad, ::content #adboard, ::content .SidekickItem-Ads, ::content .ad-slot-container, ::content .article-ad-bottom, ::content .contentAd, ::content .leftad, ::content .nav-ad, ::content .quads-location, ::content .textads, ::content a[href^="https://bs.serving-sys.com"], ::content #adsense_inline, ::content .ad-border, ::content .ads-300-250, ::content a[href^="http://ads.betfair.com/redirect.aspx?"], ::content #ad-rectangle, ::content #adcontainer2, ::content #contentad, ::content .adModule, ::content .ad_text, ::content .article_ad, ::content .sr-in-feed-ads, ::content #AdvertiseFrame, ::content .post-sponsored, ::content .ad-med-rect, ::content .ad-scroll, ::content .adcode, ::content .advert_list, ::content .change_AdContainer, ::content .google_ads_v3, ::content .sponsor-logo, ::content a[href^="http://ad-emea.doubleclick.net/"], ::content #advertContainer, ::content .adspace, ::content .side-bar-ad-position1, ::content #adsIframe, ::content .admain, ::content .header_ad_center, ::content #sponsored_link_bottom, ::content .ad-stack, ::content .adheader, ::content .adsense_single, ::content .advertContainer, ::content .bottom-main-adsense, ::content .featured-ads, ::content .rmx-ad, ::content .taboola-ad, ::content .wpproaddlink, ::content a[data-redirect^="http://click.plista.com/pets"], ::content .page_ad, ::content #bottom-ads, ::content #topAdvert, ::content .Cheat__outbrain, ::content .ad-bottom, ::content .ad-row, ::content .ad_placement, ::content .skyscraperAd, ::content .sponsor-block, ::content #msad, ::content .adWidget, ::content .bottom-left-ad, ::content .single-ad, ::content .text-ad-links, ::content #adComponentWrapper, ::content #content-header-ad, ::content .ad-vertical-container, ::content .sponsorlink, ::content a[href^="http://www.yourfuckbook.com/?"], ::content .AdBody:not(body), ::content .adframe, ::content .type_ads_default, ::content .AdvertContainer, ::content .ad-1, ::content .article-view__footer-ad, ::content .category-ad, ::content .desktop-ads, ::content .zergnet-widget, ::content #bigAd, ::content .ad-sidebar, ::content #adaptv_ad_player_div, ::content #ads_box, ::content #bottom-ad, ::content #footer_ads, ::content .ad-right, ::content .ad_global_header, ::content #ad468, ::content #leftads, ::content .adResult, ::content .searchad, ::content .banner160x600, ::content #adblock, ::content .ad-728x90, ::content #top_ads, ::content .adarea, ::content .flash-advertisement, ::content #ads-col, ::content #liste_top_ads_wrapper, ::content .LazyLoadAd, ::content .ad-zone, ::content .adText, ::content .bbccom_advert, ::content .widget-ad, ::content #adverts, ::content .ads_wrapper, ::content .list-ads, ::content #divAd, ::content #pre_advertising_wrapper, ::content .ads-2, ::content .adv300, ::content .cp-adsInited, ::content .first-ad, ::content .hasads, ::content #ad-panel, ::content #ka_adRightSkyscraperWide, ::content .adLink, ::content .article-advert, ::content .review-ad, ::content .adsWidget, ::content #adimg1, ::content #advert-right, ::content .adHeader, ::content .advert-horizontal, ::content .banner_ad, ::content .custom-ad, ::content .inner_ad, ::content .pm-ad, ::content .sidebar_ad_1, ::content a[href^="http://online.ladbrokes.com/promoRedirect?"], ::content #ad_unit, ::content .dfp-ad-unit, ::content .top-ad-container, ::content #ad_banner, ::content #ad_overlay, ::content #mpu_container, ::content #search-sponsor, ::content .ad-source, ::content .ad_space, ::content .advertisement-1, ::content .google-sponsored, ::content .search-ad, ::content #adv-top, ::content .ads-section, ::content a[href^="http://us.marketgid.com"], ::content #ad-right, ::content #advertorial, ::content #sponsors-home, ::content #topAd, ::content .ad-text, ::content .adinfo, ::content .premiumAdOverlayClose, ::content a[href="/cmd.php?ad="], ::content #ad-area, ::content .adHead, ::content .advertiser, ::content .rbRectAd, ::content #adText, ::content #head-ad, ::content #sponsorAdDiv, ::content .ad-hdr, ::content .ad300, ::content .adcont, ::content .adlist, ::content .js-sticky-ad, ::content .reklam2, ::content .right_ad, ::content #ad_header, ::content #sidebar-ads, ::content .ad_header, ::content .container_row_ad, ::content #TopAd, ::content #adbody, ::content #bbccom_mpu, ::content .HomeAds, ::content .ad_leaderboard, ::content .footer-leaderboard-ad, ::content .mid_ad, ::content .smallads, ::content #adspace, ::content .ad-btn, ::content .ads-area, ::content .homepage_ads, ::content a[href^="http://ads2.williamhill.com/redirect.aspx?"], ::content #AdColumn, ::content #div-gpt-ad-spotlight, ::content .adholder, ::content .adrow2, ::content .ads_by, ::content .adv-slide-block-wrapper, ::content .marketing-ad, ::content .taboola_blk, ::content a[onmousedown^="this.href='https://paid.outbrain.com/network/redir?"][target="_blank"], ::content #Advertisements, ::content #div_prerollAd_1, ::content .adBottomBoard, ::content .advertLink, ::content .post_ad, ::content #ads_bottom, ::content #GoogleRelatedAds, ::content #ad-lead, ::content .adverts, ::content .atf-ad-medRect, ::content .dianomi-ad, ::content .ht_ad_widget, ::content .widget_cpxadvert_widgets, ::content div[id^="div-gpt-ad"], ::content #ad_3, ::content #rh-ad, ::content .ad_Right, ::content .boxadv, ::content #advertiserReports, ::content #center-ad, ::content #gAds, ::content #header-ads, ::content #quads-ad2, ::content .yom-ad, ::content a[href^="https://ad.atdmt.com/"], ::content .admiddle, ::content .header_advert, ::content a[href=".revimedia.com/"], ::content #ad-frame, ::content #header_ad, ::content #sponsored_links, ::content .ad-leader-top, ::content .ad_description, ::content .ad_middle, ::content .advertising_banner, ::content .googleAdSense, ::content .taboola-container, ::content #content_ads, ::content .ad-wide, ::content .advert-box, ::content #AD_Top, ::content #ads-wrapper, ::content #adv-masthead, ::content #bottom-ads-container, ::content #mainAd, ::content .ad_160, ::content .adtile, ::content .ec-ads-remove-if-empty, ::content .google_ads, ::content .promoAd, ::content div[id^="advads-"], ::content #adHeader, ::content #my-adsFPAD, ::content .bottomAds, ::content .singleAd, ::content .text-ads, ::content .oasad, ::content .trc_rbox .syndicatedItem, ::content #adlayer, ::content .adfree, ::content .vertical-ads, ::content .ad-banner, ::content .ad_960, ::content .adbottom, ::content .item-ads, ::content .sponsored-inmail, ::content .zergnet-widget-container, ::content .newsAd, ::content .ad-footer, ::content .adContent, ::content .ad_trick_header, ::content .ads_google, ::content .adshome, ::content .profile-ad-container, ::content .sky_ad, ::content .static-ad, ::content .widget_advert, ::content #ad728, ::content #logoAd, ::content .searchads, ::content #ad-main, ::content #bottom_ad, ::content #header-ad, ::content .ADBAR, ::content .adHoldert, ::content .c-ad, ::content .insert-post-ads, ::content .wdt_ads, ::content #adbox, ::content #topad, ::content .adbanner, ::content .topads, ::content #adGallery, ::content #ad_2, ::content #googlead, ::content .ad_728x90, ::content .ads-holder, ::content .content_ads, ::content .wpInsertAdWidget, ::content a[href^="http://click.plista.com/pets"], ::content #advtop, ::content .adsbottombox, ::content .listad, ::content .ad-loaded, ::content .bottom_ads, ::content .inline-ad, ::content .standalone-ad-container, ::content .widget_adrotate_widgets, ::content #ad-rotator, ::content #adrotate_widgets-3, ::content #ads_left, ::content .ad-unit-label, ::content .advertbox, ::content .pm-ad-zone, ::content .sam_ad, ::content .sidebar_ad_2, ::content a[href^="http://paid.outbrain.com/network/redir?"], ::content a[href^="http://www.socialsex.com/"], ::content #ad_wrap, ::content #top-ad-content, ::content .top-ad-content, ::content #ad_table, ::content #adsHeader, ::content .adBox, ::content .advert2, ::content .greyAd, ::content .onf-ad, ::content .wide_ads, ::content #zergnet, ::content .ad-inner, ::content #PreRollAd, ::content #taboola-right-rail-thumbnails-1st, ::content .adinjwidget, ::content .adsBlock, ::content .ads_content, ::content .afs_ads, ::content .banner300, ::content .dfp-ad, ::content a[href^="http://www.fbooksluts.com/"], ::content #ad-background, ::content #gridAdSidebar, ::content .rectangle_ad, ::content #top_ad, ::content .ad-4, ::content .ad-head, ::content .ad-unit, ::content .ad_3, ::content .adslot, ::content .adunit-middle, ::content .js-stream-ad, ::content .plistaList > .itemLinkPET, ::content .text-ad, ::content a[href^="http://mgid.com/"], ::content #ad_leaderboard, ::content #sidebar_ads, ::content .ad_img, ::content .tc_ad_unit, ::content #homead, ::content #player_ads, ::content .ad-slot-sidebar-b, ::content .ad_leaderboard_atf, ::content .box_ads, ::content .homepage-ad, ::content .resultad, ::content a[href^="http://bs.serving-sys.com/"], ::content a[href^="https://click.plista.com/pets"], ::content #rc-row-container, ::content #adspace_top, ::content .ads-bg, ::content a[href^="http://adserving.unibet.com/"], ::content #AdContainer, ::content #adcontainer3, ::content #bigad, ::content .AdBox, ::content .googleAds, ::content #BottomAdContainer, ::content #download_ad, ::content .advertText, ::content .postad, ::content #AdSense1, ::content #adBottom, ::content #bottomAd, ::content #text-ads, ::content .adRight, ::content .ad_block, ::content .ads-title, ::content .inlinead, ::content a[href^="http://ad.doubleclick.net/"], ::content #ad_4, ::content #right_ads, ::content .btn-ad, ::content #ContentAd, ::content #ad-container, ::content #adsensewide, ::content #sponsored-links, ::content .ad-widget, ::content .small_ad, ::content .textad, ::content a[href^="https://ad.doubleclick.net/"], ::content #ads_right, ::content .SponsoredContent, ::content .adright, ::content .headerad, ::content a[href*=".trust.zone"], ::content #googleadsense, ::content #leaderAd, ::content .ad-disclaimer, ::content .adMessage, ::content .adrotate_widgets, ::content .advertising_block, ::content .pb-f-ads-taboola-article-well, ::content .taboola-inbetweener, ::content #AD_banner, ::content #content_adv, ::content .plainAd, ::content #ads1, ::content #btmsponsoredcontent, ::content .ad-300x250, ::content .ad_unit, ::content .bottomads, ::content .mod-adopenx, ::content .sponsor-box, ::content #adHolder, ::content #myAd, ::content .ad_1, ::content .bottom_ad_block, ::content .textAd, ::content .ad-970, ::content .ad-icon, ::content .adBlock, ::content .ad_boxright1, ::content .addiv, ::content .etad, ::content .iframe-ad, ::content .pushdown-ad, ::content .smallAd, ::content .text_ad, ::content .trc_rbox_border_elm .syndicatedItem, ::content #adnews, ::content .AdInfo, ::content .grid-item-ad, ::content .view_ad, ::content #WNAd41, ::content #footer-ads, ::content #videoAd, ::content .Ad-label, ::content .ads-item, ::content .advertisement-block, ::content .sponsored-inmail-legacy, ::content .topAds, ::content a[href^="http://www.adskeeper.co.uk/"], ::content #body_ad, ::content .ad-square, ::content .adtable, ::content .node-ad, ::content div[itemtype="http://schema.org/WPAdBlock"], ::content #td-applet-ads_container, ::content .ad-body, ::content .ad90, ::content .ad_trick_left, ::content .adkit, ::content .dfp-tag-wrapper, ::content .sidebar-advertisement, ::content .td-ad, ::content div[id^="ad_script_"], ::content #ad728x90, ::content #logo_ad, ::content .adRotator, ::content .block-ad, ::content .section-sponsor, ::content .content_tagsAdTech, ::content #advert1, ::content #banner_topad, ::content #rightAd300x250, ::content a[href^="http://pubads.g.doubleclick.net/"], ::content #adcode, ::content #topadvert, ::content .adbar, ::content .footer-ads, ::content .tower-ad, ::content #ads_wrapper, ::content #headerAdContainer, ::content .SponsoredLinks, ::content .ad-item, ::content .adspot, ::content .boxad, ::content .ligatus, ::content .searchAds, ::content .wpInsertInPostAd, ::content .widget-ami-zergnet, ::content .logo-ad, ::content #videoads, ::content #RightAdBlock, ::content #bannerAd, ::content #leaderboard-advertisement, ::content #sidebar_ad, ::content .ad-location, ::content .ads-right, ::content .ads_div, ::content .advert_area, ::content .frn_adbox, ::content .td-a-rec-id-custom_ad_1, ::content #ad-text, ::content #leaderBoardAd, ::content .adMiddle, ::content .b-advert, ::content .rightAd, ::content #adTop, ::content #adwrapper, ::content .ad-button, ::content .adslot_blurred, ::content .module-ad, ::content .publicidade, ::content .side-ad, ::content .sidebar_ad_3

Not sure what to do about that! wonder why that's blocked…

[goto-bus-stop]

Culprit: https://github.com/easylist/easylist/commit/8fbf6008d943f927a4ed76d7cf4cbefe6bddd91a

[hpvd]

fyi: with "ublock origin" adblock extension there is not such a problem (standard settings)

[kstratis]

@goto-bus-stop Thanks for the detective work! So.. it's easylist... let's hope they come up with a fix soon.
Unfortunately this breaks uppy for a respectable number of users.
@hpvd I would be more than happy to switch. However it's not me, it's the users.

...And there are lots of them using ABP.

[hpvd]

@kstratis sure. Was just about to document that ist no additional problem on the site of ublock origin users..

[goto-bus-stop]

One thing you can consider in the mean time is to disable image previews entirely using the disableThumbnailGenerator option:

uppy.use(Dashboard, {
  ...,
  disableThumbnailGenerator: true
})

That looks like this, which is better than being entirely blank:

But whether that's worth it depends on what portion of your users have the latest easylists I guess. Obviously people not using ABP would also not get previews anymore for local files.

[kstratis]

@goto-bus-stop Thanks for the suggestion. I'll do exactly as you suggested as it seems the most elegant solution for now. Please keep this issue open for future updates... (even though it's technically not an uppy issue).

[goto-bus-stop]

The filter was removed for now; it'll take a few hours for it to propagate to all users probably.

[kstratis]

I already got the update on my personal machine so I'm closing this down. Great work @goto-bus-stop.

Thanks again.