GOOWOO-447: Implement image proxying for generated images to bypass adblockers

[AlejandroPerezMartin]

Changes proposed in this Pull Request:

Registers an endpoint used in the admin to render the AI generated images and bypass adblockers that are currently blocking them. It's only used to render the image previews, the selected images URLs will store the original URL upon saving the campaign.

Closes https://linear.app/a8c/issue/GOOWOO-447/generated-images-are-not-rendered-when-ad-blocker-is-active

Initial approach is to show a message to inform users that adblockers can affect the image previews from loading but I don't think users would create a campaign without knowing what images will be generated and this solution seems to work fine, tested with uBlock, PrivacyBadger and Adblock, none of them are blocking the images anymore.

Screenshots:

Detailed test instructions:

Important: You need to use a publicly accessible URL e.g. Ngrok; local URL's (e.g. woo.test) will not work.

1. Install some adblockers extensions in the browser to test this, most common: Adblock, uBlock.
2. Go to the plugin dashboard
3. Create a new campaign by clicking on 'Add Campaign'
4. Select the campaign options and click 'Continue'
5. A loading screen will be presented informing the user that the content is being generated
6. Once the auto-generated content is loaded, ensure that the generated images are loading correctly

Additional details:

Changelog entry

Prevent adblockers from blocking auto-generated images in the preview

[codecov]

Codecov Report

❌ Patch coverage is 62.14953% with 81 lines in your changes missing coverage. Please review.
✅ Project coverage is 66.2%. Comparing base (686c940) to head (be924cd).

Files with missing lines	Patch %	Lines
js/src/hooks/useAdBlockImage.js	6.5%	37 Missing and 6 partials ⚠️
...Site/Controllers/Ads/AssetImageProxyController.php	81.9%	25 Missing ⚠️
js/src/utils/getProxiedImageUrl.js	0.0%	6 Missing and 4 partials ⚠️
.../asset-group/asset-group-editor/images-selector.js	88.2%	2 Missing ⚠️
...p/asset-group-editor/asset-group-images-section.js	0.0%	1 Missing ⚠️

Additional details and impacted files

@@                         Coverage Diff                         @@
##             feature/GOOWOO-383-genai-assets   #3248     +/-   ##
===================================================================
- Coverage                               66.3%   66.2%   -0.0%     
- Complexity                              5267    5293     +26     
===================================================================
  Files                                    898     901      +3     
  Lines                                  27419   27624    +205     
  Branches                                1645    1658     +13     
===================================================================
+ Hits                                   18174   18298    +124     
- Misses                                  9004    9075     +71     
- Partials                                 241     251     +10     

Flag	Coverage Δ
js-unit-tests	63.6% <25.3%> (-0.5%)	⬇️
php-unit-tests	67.0% <82.0%> (+0.1%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...up/asset-group-editor/gen-ai-image-picker/index.js	43.5% <100.0%> (ø)
...ernal/DependencyManagement/RESTServiceProvider.php	100.0% <100.0%> (ø)
...p/asset-group-editor/asset-group-images-section.js	8.3% <0.0%> (-0.8%)	⬇️
.../asset-group/asset-group-editor/images-selector.js	82.4% <88.2%> (-0.7%)	⬇️
js/src/utils/getProxiedImageUrl.js	0.0% <0.0%> (ø)
...Site/Controllers/Ads/AssetImageProxyController.php	81.9% <81.9%> (ø)
js/src/hooks/useAdBlockImage.js	6.5% <6.5%> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[asvinb]

@AlejandroPerezMartin That's a good start. Can you kindly check my comments please? Also, if you can fix the linting issues, for both JS and PHP please. Thanks!

[jjgrainger]

Thanks @AlejandroPerezMartin overall looks good, I've left some feedback to make this a little more restrictive. Let me know if you have any questions. Thanks

[jjgrainger]

Thanks @AlejandroPerezMartin @jamesmorrison PR looks good

[ankitguptaindia]

QA Status: Need Remediation ⚠️

@AlejandroPerezMartin Thanks for the fixes! It works great when images load after assets genaration but when the user selects those images by selecting via a checkbox, selected images appear as placeholders images.

Browser: Chrome Version 144 with https://getadblock.com/en/ extesntion.

Selection.issue.mp4

Browser: Comet Version 144 with inbuilt AdBlock.

[Copilot]

Pull request overview

This PR implements server-side image proxying to bypass adblockers that block AI-generated images from Google's syndication domain. When adblockers are active, they prevent the direct loading of images from googlesyndication.com, making it impossible for users to preview AI-generated content. The solution proxies these images through the WordPress site's own domain by fetching them server-side and streaming them back to the client.

Changes:

• Added a REST API endpoint /wc/gla/ads/assets/image-proxy that accepts image URLs, fetches them server-side, and returns the binary data
• Created comprehensive test coverage for the proxy endpoint including authentication, error handling, and edge cases
• Integrated the proxy utility into the frontend GenAI image picker component to transparently proxy image URLs at render time

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/API/Site/Controllers/Ads/AssetImageProxyController.php	Implements the image proxy REST controller with validation, fetching, and binary response handling
tests/Unit/API/Site/Controllers/Ads/AssetImageProxyControllerTest.php	Comprehensive test suite covering success, error scenarios, authentication, and security edge cases
src/Internal/DependencyManagement/RESTServiceProvider.php	Registers the new image proxy controller in the dependency injection container
js/src/utils/getProxiedImageUrl.js	Utility function to convert external image URLs to proxied URLs with nonce authentication
js/src/components/paid-ads/asset-group/asset-group-editor/gen-ai-image-picker/index.js	Updates the image picker to use proxied URLs for rendering while preserving original URLs in state

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[asvinb]

@AlejandroPerezMartin That’s a good start. To address the AdBlocker issue outside of GenAIImagePicker, I suggest the following:

• Update handleOnAddSelectedImages in ImagesSelector to include the thumbnail property to images being added. MediaSelector checks for the thumbnail property first and falls back to url only if it’s not present. At the moment, we’re primarily providing the url property.
• The thumbnail value should be derived using getGoogleAdsImageProxyUrl to ensure the image is properly proxied.