poc: proxy embed links when possible
Description
At the moment it only supports Twitter->xcancel and this PR serves as a way to visualize #2664.
ProxyLink detects a supported embed URL and applies the related proxy service (if available), e.g. twitter is replaced with xcancel.
The places where the alternative link is shown:
- Item title with URL
- Embeds
ProxyLink will only show up if the user has enabled proxyEmbeds in the settings: show proxy links for 3rd party embeds
Screenshots
Item title:
Embed:
Settings:
Additional Context
-
We can't embed xcancel because of their
frame-ancestors: noneCSP. So the next best thing is to show a small link that takes the user to a supported proxy. -
I'm not entirely sure that this is something we'd want to comfortably support, considering that proxies can go down. On the other hand, it's a really straightforward solution that doesn't require a bot.
-
Since the only supported proxy is for Twitter,
ProxyLinkis used only on that specific embed. The currentEmbedstructure forces us to repeatProxyLinkon every provider, but it can be refactored to avoid repetitions.
I noticed that the setting show images, video, and 3rd party embeds is not respected: we still show an embed if this is false.
I'll open an issue
Checklist
Are your changes backward compatible? Please answer below:
For example, a change is not backward compatible if you removed a GraphQL field or dropped a database column.
Yes, added proxyEmbeds to User
On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below: 8, it's just a link replace but depends on xcancel status.
For frontend changes: Tested on mobile, light and dark mode? Please answer below: Yes
Did you introduce any new environment variables? If so, call them out explicitly here: No
Did you use AI for this? If so, how much did it assist you? No
[!NOTE] Adds user-controlled proxy links for 3rd-party embeds (currently Twitter → xcancel) and wires it through UI, GraphQL, validation, and DB.
- Embeds/UI
- Add
ProxyLinkcomponent and show alongside item URLs and Twitter embeds incomponents/item.jsandcomponents/embed.js.- Update settings UI to toggle showing proxy links:
proxyEmbedscheckbox inpages/settings/index.js.- GraphQL/API
- Extend
SettingsInputandUserPrivateswithproxyEmbedsinapi/typeDefs/user.js.- Fetch
proxyEmbedsinfragments/users.js.- Validation
- Add
proxyEmbedstosettingsSchemainlib/validate.js.- Utilities
- Implement
proxyEmbedUrlandTWITTER_URL_REGEXP; use inparseEmbedUrlinlib/url.js.- DB
- Add
proxyEmbedsboolean tousers(Prisma schema + migration).- Styles
- Exclude proxy links from visited color rule using
[data-proxy-link]incomponents/item.module.css.Written by Cursor Bugbot for commit d2f53bcbb980f193d76c61a01fd8d250fb03d19e. This will update automatically on new commits. Configure here.