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.

Sign up for GitHub

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

Jump to bottom

feat: add imgproxy #1337

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
+6,132 −8,236
Draft

feat: add imgproxy #1337

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2ef6452
feat: add imgproxy
casualmatt Apr 22, 2024
523edba
fix: key and salt for test domain
casualmatt Apr 22, 2024
d51a19a
fix: imgproxy options key, add test img h.
casualmatt Apr 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"consola": "^3.2.3",
"defu": "^6.1.4",
"h3": "^1.11.1",
"hash.js": "^1.1.7",
Copy link
Member

Choose a reason for hiding this comment

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

as you've suggested, let's switch to ohash 🙏

Copy link
Author

Choose a reason for hiding this comment

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

I'm not so experienced in hash or ohash, but I think that ohash misses the hmac function to generate the signature.

  const hmac = hash.hmac(hash.sha256, hexDecode(secret));

More in general, I'm open to suggestions on this topic.

Copy link

@everyx everyx Apr 23, 2024 •
edited

Choose a reason for hiding this comment

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

@casualmatt I have a implement at #963, using uncrypto, but need async getImage support

Copy link
Author

Choose a reason for hiding this comment

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

Ty for the hint, I will work on it tomorrow or later today👍🏻

Copy link
Author

Choose a reason for hiding this comment

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

@everyx
I see, .. so to properly support imgproxy, and to do it safely or imgproxy will allow us to optimize any URL provided; we are waiting for:
#276 --> To securely sign the URLs with uncrypto.
#963 --> To support getImage and not just the NuxtImg component.
I hope to get it right,

For now, as an alternative, @danielroe, we could remove the signing of the URL and add big, pretty big, I would say, disclaimer to use the EnvVar IMGPROXY_ALLOWED_SOURCES to secure the install of imgproxy.

"image-meta": "^0.2.0",
"node-fetch-native": "^1.6.4",
"ohash": "^1.1.3",
Expand All @@ -41,6 +42,7 @@
"ufo": "^1.5.3"
},
"devDependencies": {
"@nuxt/eslint-config": "0.3.8",
"@nuxt/image": "link:",
"@nuxt/module-builder": "0.5.5",
"@nuxt/test-utils": "^3.12.1",
Expand All @@ -62,8 +64,7 @@
"vitest": "^1.4.0",
"vitest-environment-nuxt": "^1.0.0",
"vue": "3.4.23",
"vue-tsc": "^2.0.14",
"@nuxt/eslint-config": "0.3.8"
"vue-tsc": "^2.0.14"
},
"optionalDependencies": {
"ipx": "^2.1.0"
Expand Down
5 changes: 5 additions & 0 deletions playground/nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,11 @@ export default defineNuxtConfig({
imgix: {
baseURL: 'https://assets.imgix.net',
},
imgproxy: {
imgProxyUrl: 'https://localhost:8080',
imgProxySalt: '73616c74',
imgProxyKey: '6b6579',
casualmatt marked this conversation as resolved.
Show resolved Hide resolved
},
imagekit: {
baseURL: 'https://ik.imagekit.io/demo',
},
Expand Down
9 changes: 9 additions & 0 deletions playground/providers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,15 @@ export const providers: Provider[] = [
},
],
},
// imgproxy
{
name: "imgproxy",
samples: [
{
src: "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=900",
},
],
},
// imgix
{
name: 'imgix',
Expand Down