From 696fa4c706cf30e1b8005c85845beddf90e79173 Mon Sep 17 00:00:00 2001
From: Volker Rose <v.rose@tricks.de>
Date: Fri, 1 Mar 2024 10:36:44 +0100
Subject: [PATCH] feat: encode reserved characters in URI path

---
 src/runtime/providers/ipx.ts |  4 +++-
 test/providers.ts            |  4 ++--
 test/unit/providers.test.ts  | 19 +++++++++++++++++++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/runtime/providers/ipx.ts b/src/runtime/providers/ipx.ts
index 05bc3b73d..960117aae 100644
--- a/src/runtime/providers/ipx.ts
+++ b/src/runtime/providers/ipx.ts
@@ -23,7 +23,9 @@ export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL } = {}
     delete modifiers.height
   }
 
-  const params = operationsGenerator(modifiers) || '_'
+  let params = operationsGenerator(modifiers) || '_'
+
+  params = encodeURIComponent(params)
 
   if (!baseURL) {
     baseURL = joinURL(ctx.options.nuxt.baseURL, '/_ipx')
diff --git a/test/providers.ts b/test/providers.ts
index acb5eb2a1..3b63b8721 100644
--- a/test/providers.ts
+++ b/test/providers.ts
@@ -142,7 +142,7 @@ export const images = [
   {
     args: ['/test.png', { width: 200, height: 200, fit: 'contain' }],
     none: { url: '/test.png' },
-    ipx: { url: '/_ipx/fit_contain&s_200x200/test.png' },
+    ipx: { url: '/_ipx/fit_contain%26s_200x200/test.png' },
     aliyun: { url: '/test.png?image_process=fit,contain/resize,fw_200,fh_200' },
     awsAmplify: { url: '/?url=%2Ftest.png&w=320&q=100' },
     cloudflare: { url: '/cdn-cgi/image/w=200,h=200,fit=contain/test.png' },
@@ -177,7 +177,7 @@ export const images = [
   {
     args: ['/test.png', { width: 200, height: 200, fit: 'contain', format: 'jpeg' }],
     none: { url: '/test.png' },
-    ipx: { url: '/_ipx/fit_contain&f_jpeg&s_200x200/test.png' },
+    ipx: { url: '/_ipx/fit_contain%26f_jpeg%26s_200x200/test.png' },
     aliyun: { url: '/test.png?image_process=fit,contain/format,jpeg/resize,fw_200,fh_200' },
     awsAmplify: { url: '/?url=%2Ftest.png&w=320&q=100' },
     cloudflare: { url: '/cdn-cgi/image/w=200,h=200,fit=contain,f=jpeg/test.png' },
diff --git a/test/unit/providers.test.ts b/test/unit/providers.test.ts
index 598a821ab..8b00a0c3f 100644
--- a/test/unit/providers.test.ts
+++ b/test/unit/providers.test.ts
@@ -73,6 +73,25 @@ describe('Providers', () => {
       url: '/_ipx/_/images/test.png'
     })
   })
+
+  it('ipx encodes reserved URI characters', () => {
+    const context = { ...emptyContext }
+
+    const src = '/images/test.png'
+    const generated = ipx.getImage(src, {
+      modifiers: {
+        fit: 'inside',
+        format: 'png',
+        width: 1200,
+        height: 630,
+      }
+    }, context)
+    generated.url = cleanDoubleSlashes(generated.url)
+    expect(generated).toMatchObject({
+      url: '/_ipx/fit_inside%26f_png%26s_1200x630/images/test.png'
+    })
+  })
+
   it('aliyun', () => {
     const providerOptions = {
       baseURL: '/'