Skip to content

feat: add imgproxy #1337

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

Draft
casualmatt wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

feat: add imgproxy #1337

Show file tree
Hide file tree
Changes from all 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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
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

@danielroe danielroe Apr 22, 2024

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

@casualmatt casualmatt Apr 22, 2024

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
Loading

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

@casualmatt casualmatt Apr 23, 2024

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 •
edited
Loading

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.

Copy link
Member

@pi0 pi0 Apr 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

I suggest nobel-hashes if sync HMAC is needed for time being. We can have a smart node/js util from uncrypto later that is sync for better perf.

"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: {
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
View file
Open in desktop
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