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

feat(2d, core, vite-plugin): add cors proxy and integrated into Image component #357

Merged
merged 1 commit into from Feb 23, 2023

Conversation

WaldemarLehner
Copy link
Contributor

@WaldemarLehner WaldemarLehner commented Feb 16, 2023

This PR touches the following packages:

vite-plugin

Adds a new proxy-middleware.ts which defines a Middleware which proxies GET-Requests using the /cors-proxy Endpoint — this is the "main" part of this PR

Also adds a new virtual module, virtual:proxysettings , which returns {enabled: boolean}.
This is used by the changes in core. This value is either true or false depending on if the user has disabled to proxy by setting proxy:false as an option of the vite plugin.

core

Adds a new util, viaProxy.
Anything that might touch a remote resource can use this helper to proxy the request.
The idea behind viaProxy is that it will only rewrite if a resource is rewritable.

  • it only rewrites if enabled (checks via virtual:proxysettings)
  • it restricts itself to http and https to not break inline data: sources
  • it only rewrites images with a different host
  • it does not proxy a proxied request (calling viaProxy multiple times does not break the address)

2d

A small change has been made to the <Image/> component.

The computed prop image wraps the src signal into withProxy.

Closes #338
Closes #234

Relevant Discord Thread: https://discord.com/channels/1071029581009657896/1076868990573477998

@WaldemarLehner WaldemarLehner marked this pull request as ready for review February 16, 2023 13:40
packages/core/src/utils/viaProxy.ts Outdated Show resolved Hide resolved
packages/core/src/utils/viaProxy.ts Outdated Show resolved Hide resolved
}
} catch (_) {
// in case of error just silently pass as-is
return url;
Copy link
Contributor

Choose a reason for hiding this comment

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

IMO a malformed or non-HTTP(S) URL should have an associated warning that the URL isn't being proxied, but maybe that's too verbose.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

i think that the Browser can do that for us — if it is indeed bad value.
Maybe there is some non-standard way of providing a resource that URL does not handle — in this case, the value should probably not be proxied anyways.

If the Browser cannot understand the passed value it will log to the console, if it can, it will interpret it correctly.

packages/vite-plugin/src/main.ts Outdated Show resolved Hide resolved
packages/vite-plugin/src/main.ts Outdated Show resolved Hide resolved
packages/vite-plugin/src/main.ts Outdated Show resolved Hide resolved
packages/vite-plugin/src/proxy-middleware.ts Outdated Show resolved Hide resolved
packages/vite-plugin/src/proxy-middleware.ts Outdated Show resolved Hide resolved
packages/vite-plugin/src/proxy-middleware.ts Outdated Show resolved Hide resolved
packages/vite-plugin/src/proxy-middleware.ts Outdated Show resolved Hide resolved
@exdeejay
Copy link
Contributor

exdeejay commented Feb 16, 2023

Possible idea: in Image.ts, check if the proxy is disabled and if so, set img.crossOrigin = 'anonymous' so that cross-origin images will still work and render properly.

packages/core/src/utils/viaProxy.ts Outdated Show resolved Hide resolved
packages/vite-plugin/src/proxy-middleware.ts Outdated Show resolved Hide resolved
packages/vite-plugin/src/proxy-middleware.ts Outdated Show resolved Hide resolved
packages/vite-plugin/src/proxy-middleware.ts Outdated Show resolved Hide resolved
packages/vite-plugin/src/proxy-middleware.ts Outdated Show resolved Hide resolved
packages/vite-plugin/src/proxy-middleware.ts Outdated Show resolved Hide resolved
packages/vite-plugin/src/proxy-middleware.ts Outdated Show resolved Hide resolved
packages/vite-plugin/src/proxy-middleware.ts Outdated Show resolved Hide resolved
packages/vite-plugin/src/proxy-middleware.ts Outdated Show resolved Hide resolved
packages/vite-plugin/src/proxy-middleware.ts Outdated Show resolved Hide resolved
packages/core/src/utils/proxyUtils.ts Outdated Show resolved Hide resolved
packages/core/src/utils/proxyUtils.ts Outdated Show resolved Hide resolved
packages/core/src/utils/proxyUtils.ts Outdated Show resolved Hide resolved
packages/core/src/utils/proxyUtils.ts Outdated Show resolved Hide resolved
fix(vite-plugin): fix remote sources breaking Rendering by implementing proxy(motion-canvas#338)

feat(core): add viaProxy Utility to rewrite requests to proxy (motion-canvas#338)

Apply proposed changes

Co-authored-by: Jacob <64662184+aarthificial@users.noreply.github.com>
@aarthificial aarthificial merged commit a3c5822 into motion-canvas:main Feb 23, 2023
@WaldemarLehner WaldemarLehner deleted the feat-338 branch February 23, 2023 18:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants