photopea.com: soft anti-adblock

[MasterKia]

Prerequisites

• [X] This is not a support issue or a question
• [X] I performed a cursory search of the issue tracker to avoid opening a duplicate issue
• [X] I am running the latest version of uBlock Origin

I tried to reproduce the issue when...

• [X] uBO is the only extension
• [X] uBO with default lists/settings
• [X] using a new, unmodified browser profile

URL(s) where the issue occurs

https://www.photopea.com

Describe the issue

Similar but unrelated issue: https://github.com/uBlockOrigin/uAssets/issues/10337

If uBO blocks ads from this site then the website displays a nag: pay $10 to hide ads for 3 month.

Screenshot(s)

uBO off:

uBO on:

Notes

The pp_tall.png is mentioned in https://www.photopea.com/sw.js. The ||photopea.com/img/pp_tall.png and ||photopea.com/sw.js filters don't work and the site keeps showing the nag again. Could be fixed in uBlock annoyances.

sw.js code

```javascript var list = [ "", "index.html", "manifest.json", "code/pp/pp.js", "code/dbs/DBS.js", "code/ext/ext.js", "code/ext/hb.wasm", "code/ext/fribidi.wasm", "rsrc/basic/basic.zip", "rsrc/basic/fa_basic.csh", "rsrc/fonts/fs/DejaVuSans.otf", "rsrc/fonts/fonts.png", "plugins/gallery.json", "img/pp_tall.png", <<<<<<<<<<<<<<<<<<<<<============================= "style/all.css", "promo/icon512.png", "https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2", "https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2", "https://hxim.github.io/TwemojiPlugin/icon.svg" ]; self.addEventListener("fetch", function (event) { event.respondWith( fetch(event.request) .catch(function() { return caches.match(event.request) }) .then(function (response) { var url=event.request.url; var fnd=false; for(var i=0; i

Configuration

```yaml uBlock Origin: 1.42.4 Chromium: 101 filterset (summary): network: 82132 cosmetic: 44158 scriptlet: 19673 html: 0 listset (total-discarded, last updated): added: ublock-annoyances: 4388-6, 11m default: user-filters: 4-1, never easylist: 66425-51, 11m easyprivacy: 26943-121, 11m plowe-0: 3676-805, 6d.2h.54m ublock-abuse: 75-0, 11m ublock-badware: 4149-92, 11m ublock-filters: 30970-92, 11m ublock-privacy: 215-2, 11m ublock-quick-fixes: 210-0, 11m ublock-unbreak: 1778-40, 11m urlhaus-1: 8497-0, 11m filterset (user): [array of 4 redacted] modifiedUserSettings: [none] modifiedHiddenSettings: [none] supportStats: allReadyAfter: 193 ms (selfie) maxAssetCacheWait: 200 ms ```

[stephenhawk8054]

Which browser are you using? I can only reproduce when turning on Edge's built-in Strict blocking.

[MasterKia]

I can reproduce in Vivaldi. Cleared all data in Edge and turned off built-in tracking protection:

[MasterKia]

I needed to reload twice in Edge (after clearing all data) for the nag to appear.

[stephenhawk8054]

Can you test if this filter works?

photopea.com##+js(no-fetch-if, /googlesyndication|uniconsent/)

[MasterKia]

Yes, it works.

It seems every feature works as far as I briefly tested, I only noticed one minor incident with that filter: On the top if you click on "Account" and then click on the eye next to "No ads", it would only open data:text/plain;base64,Cg== in a new tab instead of https://www.photopea.com/promo/no_ads.png. But it's not important IMO.

https://user-images.githubusercontent.com/17685483/167119754-6f25b2a5-a170-4e74-ab93-d5c0fbd9dde1.png https://user-images.githubusercontent.com/17685483/167119833-3232e412-9430-4a7f-b9fe-5b9d4d0572a9.png

no_ads.png is located in https://www.photopea.com/code/pp/pp.js: https://user-images.githubusercontent.com/17685483/167120569-bd08706a-46a2-4daa-9e74-7a75c6515bdd.png

[MasterKia]

Even when I manually go to https://www.photopea.com/promo/no_ads.png I get redirected to data:text/plain;base64,Cg==, so it doesn't depend on clicking on that eye icon next to "No ads".

It's a png image but it's animated somehow.

[MasterKia]

On a side note; Can we get rid of the supposedly hardcoded "Blank space" at the right? (which had been reported by you before)

I suppose it could be done using the ##*:style( filter, would it work? https://github.com/gorhill/uBlock/wiki/Procedural-cosmetic-filters

As demonstrated in https://www.photopea.com/promo/no_ads.png, it seems that the blank space could be removed.

[stephenhawk8054]

Even when I manually go to https://www.photopea.com/promo/no_ads.png I get redirected to data:text/plain;base64,Cg==, so it doesn't depend on clicking on that eye icon next to "No ads".

It's a png image but it's animated somehow.

It's because of the filter /no_ads. in EL. If you add this filter

@@||photopea.com/promo/no_ads.png$xhr,1p

It will show properly.

[MasterKia]

Yeah that is the case, thanks for clarifying. I thought I would see something like uBlock Origin has prevented the following page from loading because of the following filter.

So these two filters should be adequate then (or only the first one):

photopea.com##+js(no-fetch-if, /googlesyndication|uniconsent/)
@@||photopea.com/promo/no_ads.png$xhr,1p

What about that blank space? I think it's possible to remove it.

[stephenhawk8054]

Yeah that is the case, thanks for clarifying. I thought I would see something like uBlock Origin has prevented the following page from loading because of the following filter.

The blocked xhr connections on that page are redirected to noop text page due to the filter *$xhr,redirect-rule=nooptext,domain=photopea.com. That's why you saw a blank page.

What about that blank space? I think it's possible to remove it.

Currently it's quite hard to remove the space as far as I know since it would need complicated CSS modifications.

[MasterKia]

https://github.com/uBlockOrigin/uAssets/issues/13094#issuecomment-1120129347

[MasterKia]

I've managed to find a workaround which causes the website itself to remove the blank space (worked on Vivaldi, didn't work on Edge). I'm not sure whether something good can be made out of it or not (in terms of an actual filter).

https://user-images.githubusercontent.com/17685483/167136037-178e70a7-c403-4772-9dce-a38a2180189e.png https://user-images.githubusercontent.com/17685483/167137003-9441a081-6911-4f40-a88c-bec29a5dfffb.png

Using Vivaldi, go to photopea.com and press F12 to open inspect tools and make the inspect tools large enough and refresh the page; then the blank spaces get removed (there is no need to activate vertical tabs in Vivaldi).

It seems that the website decides to remove the blank space for smaller screens, maybe if we could trigger that check somehow?

https://user-images.githubusercontent.com/17685483/167237682-11537631-7e03-4e44-9577-f1d4c6d42f64.mp4

[MasterKia]

@stephenhawk8054 @krystian3w @uBlock-user @mapx- https://github.com/uBlockOrigin/uAssets/issues/13094#issuecomment-1120129347 ?

[krystian3w]

IMO change viewport or override is out of scope for latest resources in uBo.

[stephenhawk8054]

Best way I can think of is you need to manually check your document.documentElement.clientWidth in your console then set innerWidth to document.documentElement.clientWidth + 320.

For example if your document.documentElement.clientWidth is 1920 then you can use this filter:

photopea.com##+js(set, innerWidth, 2240)

or you can add this line to your userscript extension:

window.innerWidth = document.documentElement.clientWidth + 320;

[MasterKia]

Thanks for explaining, I might end up resorting to userscripts.

So as you said, the page is deliberately adjusting it's own width to be lower than the actual screen width. I tried to stop the page from reading the screen width using aopr or aopw. photopea.com##+js(aopr, window.screen.width) => Blank page photopea.com##+js(aopw, window.screen.width) => Made the page width smaller (!)

photopea.com##+js(aopr, innerWidth) => Blank page photopea.com##+js(aopw, innerWidth) => Blank page, only ads

Probably related code

```javascript eJ.prototype.e9 = function(w, V) { w = Math.floor(w); V = Math.floor(V); var l = c.t6("WUMK&AM"), a = ai.RT, y = c.bt[ai.Wp], i = Math.max(w, window.screen.width), <<<<<<<<<<<<<<<<<<=============== P = Math.max(V, window.screen.height), <<<<<<<<<<<<<<<<<<=============== _ = 0; window.addEventListener("beforeinstallprompt", function(f) { if (window.innerWidth > 400) f.preventDefault(); <<<<<<<<<<<<<<<<<<=============== this.UI.cT = f }.bind(this)); ```

Maybe these codes from the pp.js are changing the screen width but just like krystian3w said I think we can't defuse those codes using current resources in uBO. But I do believe there is some code that checks the screen width and because of that I could trick the website (to remove the blank space) using the inspect panel trick.

[krystian3w]

photopea.com##+js(aopr, window.screen.width

can't work without ).

[MasterKia]

can't work without ).

Sorry, it was a typo.

[MasterKia]

Best way I can think of is you need to manually check your document.documentElement.clientWidth in your console then set innerWidth to document.documentElement.clientWidth + 320.

For example if your document.documentElement.clientWidth is 1920 then you can use this filter:

photopea.com##+js(set, innerWidth, 2240)

or you can add this line to your userscript extension:

window.innerWidth = document.documentElement.clientWidth + 320;

@Yuki2718 Could you add photopea.com#%#window.innerWidth = document.documentElement.clientWidth + 320; to AdGuard Annoyance?

[Yuki2718]

Could you add photopea.com#%#window.innerWidth = document.documentElement.clientWidth + 320; to AdGuard Annoyance?

If I understand correctly, this is to remove the right blank space? I'm not very willing to add script rule just to get rid of placeholder, tho AG team may address them.

[MasterKia]

this is to remove the right blank space

It's a tactic used by the dev to lure users into buying a subscription, just for getting rid of the blank space. Quote from dev: "Without a Premium account, there will still be a "gap" on the right side. I think it is no big difference, if the gap is empty, or contains an ad." Also users want that blank space gone: https://www.reddit.com/r/photopea/comments/mq45p0/how_to_remove_dead_space_on_right_side/ https://www.reddit.com/r/photopea/comments/p46w6e/why_is_there_so_much_free_space_on_the_right_side/

Actually it's not blank; if it detects adblock, it'll re-insert ads + adblock detection warning: https://user-images.githubusercontent.com/17685483/174291914-7bc2b9e5-f557-4a15-ac33-e75447df25e5.png That was fixed here https://github.com/uBlockOrigin/uAssets/commit/d731aa1d1b202f5f0d2d4ec67bcb7b92111e2da2. But the blank space still remains.

[Yuki2718]

Added

[Yuki2718]

Wait, so is this ad-reinsertion? I didn't read all.

[MasterKia]

The blank space serves as a place for ad-insertion + adblock detection warning, and also serves to lure users into buying a premium just to remove it.

"Without a Premium account, there will still be a "gap" on the right side. I think it is no big difference, if the gap is empty, or contains an ad."

[MasterKia]

But the ad-reinsertion does happen, if there is no('prevent-fetch', '/pagead2\.googlesyndication\.com|cmp\.uniconsent\.com/').

[Yuki2718]

I wrongly thought it's soft anti-adb. If this is reinsertaion the rules should be moved to Base. Is @@||photopea.com/promo/no_ads.png$xhr,1p still needed? I don't see this request on Brave.

[MasterKia]

That exception rule is to solve: https://github.com/uBlockOrigin/uAssets/issues/13094#issuecomment-1119511590

[Yuki2718]

Can't even access https://www.photopea.com/promo/no_ads.png

[MasterKia]

Try using Chrome.

Vivaldi: https://user-images.githubusercontent.com/17685483/174294388-fbccacc1-a577-4c41-aee3-80df6d96eec7.png

[Yuki2718]

Okay I see, but is this something average user will access?

[MasterKia]

Well just for the sake of site functionality (btw the breakage comes from EasyList). The average user also doesn't access criteo but I remember there was a discussion to whitelist/badfilter it.

[MasterKia]

If you're gonna move rules to AdGuard Base then these rules in AdGuard Annoyance should be reconsidered:

photopea.com##+js(no-fetch-if, pagead2.googlesyndication.com)
photopea.com##+js(no-setTimeout-if, /String\.fromCharCode[\s\S]*?Math\.round/)
photopea.com##+js(set-constant, jsLoadedOK, true)
photopea.com##.rightmost

I think all of them are broken except the first one. Edit: I copied them from AdGuard Annoyance in uBO.

[MasterKia]

If this is reinsertaion the rules should be moved to Base.

On that note, these two rules from uBlock Annoyance should also be moved to uBlock filters. https://github.com/uBlockOrigin/uAssets/commit/d731aa1d1b202f5f0d2d4ec67bcb7b92111e2da2

[Yuki2718]

Well just for the sake of site functionality (btw the breakage comes from EasyList). The average user also doesn't access criteo but I remember there was a discussion to whitelist/badfilter it.

Criteo can be accessed by usual user flow (e.g. search engine). If that matters only if user directly visit the url (i.e. no link for that) I don't see need for fix.

[MasterKia]

Criteo can be accessed by usual user flow (e.g. search engine)

What you mean? I just searched for criteo and clicked on the first result (https://www.criteo.com): "uBlock Origin has prevented the following page from loading, Found in: Peter Lowe’s list"

[Yuki2718]

That's the problem. If criteo could't be reached by such a way, I wouldn't have insisted my opinion that way as in the discussion.

[MasterKia]

In Photopea's case, average user "might" want to know the benefits of buying a premium (i.e. No Ads) by clicking on the "eye" icon.

But the paradox is that the average user with adblock probably wouldn't care about that "No Ads" benefit of premium anyway.

[realgooseman]

Hi @MasterKia and contributors, any updates for this ?

The ads are gone but the big sidebar on the right is still present in June 2024. There are Tampermonkey/Violentmonkey userscripts that fix this but I don't really want to install them just for one script. No uBlock Origin filter or workaround ?

[MasterKia]

There are Tampermonkey/Violentmonkey userscripts that fix this

Could you share link for a working one?

[realgooseman]

There are a few, but the last updated one works great: https://greasyfork.org/en/scripts/496647-photopea-ad-sidebar-remove Still hoping for something like this on uBlock tho, or a straightforward way to import userscripts to uBlock.

[stephenhawk8054]

@MasterKia Looks like our old filter?

[MasterKia]

@stephenhawk8054 This works for me:

||photopea.com^$doc,replace=/<\/script>/<\/script><script>Object.defineProperty(window, 'innerWidth', {get() { return document.documentElement.offsetWidth + 320 },});<\/script>/

We can't use rpnt since there's no usable script tag when the page is loading.

[D4niloMR]

Now there is a script tag so this works:

photopea.com##+js(rpnt, script, added=false;, "added=false;Object.defineProperty(window, 'innerWidth', {get() { return document.documentElement.offsetWidth + 320 },})")