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: add imgproxy #1337

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions package.json
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

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

@casualmatt casualmatt Apr 24, 2024

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
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: {
url: 'https://localhost:8080',
salt: '73616c74',
key: '6b6579',
},
imagekit: {
baseURL: 'https://ik.imagekit.io/demo',
},
Expand Down
10 changes: 10 additions & 0 deletions playground/providers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,16 @@ 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",
width: 200,
},
],
},
// imgix
{
name: 'imgix',
Expand Down
Loading