Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proxy content via public-api, even when we're on a simple site. #90895

Merged
merged 3 commits into from
May 24, 2024

Conversation

devicenull
Copy link
Contributor

@devicenull devicenull commented May 20, 2024

Related to #87642

Proposed Changes

In order to solve #87642, we need to proxy any images in the media area via the public API.

This solves two main cases:

  1. Where the primary redirect is not yet pointed to us via DNS
  2. Where a service like Cloudflare is in front of the primary redirect, and blocks "hotlinking" images

These cases both used to work fine, as media was served from *.files.wordpress.com regardless of the actual domain being used. Once this was been moved to use wp-content/uploads (in order to fix issues when third party cookies are blocked), the two cases above (and probably some others we don't know about) stopped working.

This will not work until D149138-code is deployed (this has been deployed)

Testing Instructions

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • Have you written new tests for your changes?
  • Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
  • Have you checked for TypeScript, React or other console errors?
  • [n/a] Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
  • [n/a] Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • [n/a] For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

@matticbot
Copy link
Contributor

matticbot commented May 20, 2024

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~166 bytes removed 📉 [gzipped])

name                 parsed_size           gzip_size
entry-subscriptions       -533 B  (-0.0%)      -95 B  (-0.0%)
entry-stepper             -353 B  (-0.0%)      -80 B  (-0.0%)
entry-main                -353 B  (-0.0%)      -80 B  (-0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~1716 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
settings-podcast                      +311 B  (+0.1%)      +42 B  (+0.0%)
write-flow                            +298 B  (+0.0%)      +84 B  (+0.0%)
woocommerce-installation              +298 B  (+0.1%)      +96 B  (+0.1%)
videopress-flow                       +298 B  (+0.0%)      +84 B  (+0.0%)
themes                                +298 B  (+0.0%)      +86 B  (+0.0%)
subscribers                           +298 B  (+0.0%)      +76 B  (+0.0%)
stats                                 +298 B  (+0.0%)     +104 B  (+0.0%)
site-purchases                        +298 B  (+0.0%)      +83 B  (+0.0%)
site-monitoring                       +298 B  (+0.0%)      +69 B  (+0.0%)
settings-writing                      +298 B  (+0.0%)      +96 B  (+0.1%)
settings-security                     +298 B  (+0.1%)      +96 B  (+0.1%)
settings-reading                      +298 B  (+0.1%)      +96 B  (+0.1%)
settings-performance                  +298 B  (+0.1%)      +96 B  (+0.1%)
settings-newsletter                   +298 B  (+0.1%)      +76 B  (+0.0%)
settings-jetpack                      +298 B  (+0.0%)      +96 B  (+0.1%)
settings-discussion                   +298 B  (+0.1%)      +96 B  (+0.1%)
settings                              +298 B  (+0.0%)      +42 B  (+0.0%)
scan                                  +298 B  (+0.0%)      +96 B  (+0.0%)
reader                                +298 B  (+0.0%)      +96 B  (+0.0%)
posts-custom                          +298 B  (+0.0%)      +90 B  (+0.0%)
posts                                 +298 B  (+0.0%)      +90 B  (+0.0%)
plugins                               +298 B  (+0.0%)      +86 B  (+0.0%)
plans                                 +298 B  (+0.0%)      +78 B  (+0.0%)
people                                +298 B  (+0.0%)      +42 B  (+0.0%)
pages                                 +298 B  (+0.1%)      +96 B  (+0.1%)
marketing                             +298 B  (+0.0%)      +96 B  (+0.0%)
jetpack-social                        +298 B  (+0.1%)      +96 B  (+0.1%)
jetpack-search                        +298 B  (+0.0%)      +96 B  (+0.1%)
jetpack-cloud-settings                +298 B  (+0.0%)      +96 B  (+0.1%)
jetpack-cloud-plugin-management       +298 B  (+0.0%)      +86 B  (+0.0%)
jetpack-cloud-agency-sites-v2         +298 B  (+0.0%)      +83 B  (+0.0%)
import                                +298 B  (+0.1%)      +96 B  (+0.1%)
hosting                               +298 B  (+0.0%)      +86 B  (+0.0%)
home                                  +298 B  (+0.0%)     +104 B  (+0.0%)
google-my-business                    +298 B  (+0.1%)      +70 B  (+0.0%)
github-deployments                    +298 B  (+0.0%)      +78 B  (+0.0%)
export                                +298 B  (+0.1%)      +96 B  (+0.1%)
email                                 +298 B  (+0.0%)      +83 B  (+0.0%)
earn                                  +298 B  (+0.0%)      +80 B  (+0.0%)
domains                               +298 B  (+0.0%)      +83 B  (+0.0%)
comments                              +298 B  (+0.0%)      +60 B  (+0.0%)
checkout                              +298 B  (+0.0%)     +101 B  (+0.0%)
build-flow                            +298 B  (+0.0%)      +84 B  (+0.0%)
backup                                +298 B  (+0.0%)      +83 B  (+0.0%)
add-ons                               +298 B  (+0.1%)      +96 B  (+0.1%)
activity                              +298 B  (+0.0%)      +96 B  (+0.0%)
a8c-for-agencies-sites                +298 B  (+0.0%)      +83 B  (+0.0%)
media                                 +283 B  (+0.0%)      +83 B  (+0.0%)
site-blocks                           +270 B  (+0.0%)      +90 B  (+0.0%)
security                              +270 B  (+0.0%)      +76 B  (+0.0%)
purchases                             +270 B  (+0.0%)      +77 B  (+0.0%)
privacy                               +270 B  (+0.0%)      +90 B  (+0.0%)
notification-settings                 +270 B  (+0.0%)      +70 B  (+0.0%)
me                                    +270 B  (+0.0%)      +90 B  (+0.0%)
link-in-bio-tld-flow                  +270 B  (+0.0%)      +78 B  (+0.0%)
help                                  +270 B  (+0.0%)      +71 B  (+0.0%)
developer                             +270 B  (+0.0%)      +90 B  (+0.0%)
account-close                         +270 B  (+0.0%)      +90 B  (+0.0%)
account                               +270 B  (+0.0%)      +76 B  (+0.0%)
newsletter-post-setup-flow             -28 B  (-0.0%)       -6 B  (-0.0%)
link-in-bio-post-setup-flow            -28 B  (-0.0%)       -6 B  (-0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~336 bytes added 📈 [gzipped])

name                                                 parsed_size           gzip_size
async-load-store-app-store-stats                          +298 B  (+0.1%)      +96 B  (+0.1%)
async-load-design-playground                              +298 B  (+0.0%)      +96 B  (+0.0%)
async-load-design                                         +298 B  (+0.0%)      +61 B  (+0.0%)
async-load-calypso-my-sites-checkout-modal                +298 B  (+0.0%)     +101 B  (+0.0%)
async-load-calypso-components-web-preview-component       +298 B  (+0.1%)      +84 B  (+0.1%)
async-load-calypso-blocks-editor-checkout-modal           +298 B  (+0.0%)     +101 B  (+0.0%)
async-load-calypso-post-editor-editor-media-modal         +270 B  (+0.0%)      +90 B  (+0.0%)
async-load-signup-steps-p2-complete-profile                -28 B  (-0.0%)       -6 B  (-0.0%)
async-load-design-blocks                                   -28 B  (-0.0%)       -6 B  (-0.0%)
async-load-calypso-post-editor-media-modal                 -28 B  (-0.0%)       -6 B  (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

In order to solve #87642, we need to proxy any images in the media area via the public API.

This solves two main cases:
1) Where the primary redirect is not yet pointed to us via DNS
2) Where a service like Cloudflare is in front of the primary redirect, and blocks "hotlinking" images

These cases both used to work fine, as media was served from *.files.wordpress.com regardless of the actual
domain being used.  Once this was been moved to use wp-content/uploads (in order to fix issues when third
party cookies are blocked), the two cases above (and probably some others we don't know about) stopped working.
@fullofcaffeine
Copy link
Contributor

fullofcaffeine commented May 24, 2024

The changes look simple enough that manual testing might suffice, but I personally would add a unit test for both functions to ensure that we get the right output for each permutation of values. If you're not acquainted with adding unit tests here, I can have a look tomorrow and help you to add them.

Copy link
Member

@tyxla tyxla left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to confirm: we want to proxy content for all sites, just not for non-atomic Jetpack sites?

I agree with Marcelo's feedback and left a few more suggestions.

I think most of those are minor issues though and this can be shipped after addressing our feedback.

client/blocks/image-editor/image-editor-canvas.jsx Outdated Show resolved Hide resolved
client/blocks/image-editor/image-editor-canvas.jsx Outdated Show resolved Hide resolved
client/my-sites/media-library/media-file.tsx Outdated Show resolved Hide resolved
@devicenull
Copy link
Contributor Author

Just to confirm: we want to proxy content for all sites, just not for non-atomic Jetpack sites?

Correct

Copy link
Member

@tyxla tyxla left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@devicenull devicenull merged commit 178b093 into trunk May 24, 2024
11 checks passed
@devicenull devicenull deleted the fix-media-library-images branch May 24, 2024 14:53
devicenull added a commit that referenced this pull request Jun 3, 2024
This reapplies the change from #90895 - there have been some changes to public-api.wordpress.com
that resolved the problem that caused that MR to get reverted (D150124-wpcom).  This change ultimately
causes all links in the media library to be proxied via public-api.wordpress.com, which ensures that
they are accessible even in the case of broken primary domains.
devicenull added a commit that referenced this pull request Jun 4, 2024
This reapplies the change from #90895 - there have been some changes to public-api.wordpress.com
that resolved the problem that caused that MR to get reverted (D150124-wpcom).  This change ultimately
causes all links in the media library to be proxied via public-api.wordpress.com, which ensures that
they are accessible even in the case of broken primary domains.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants