@websolutespa/bom-mixer-image 1.8.3 → 2.0.1-next.0

package/CHANGELOG.md

@@ -1,98 +1,115 @@
-# @websolutespa/bom-mixer-image
-
-## 1.8.3
-
-### Patch Changes
-
-- Added: ImageStrategy.Token
-- Updated dependencies
-  - @websolutespa/bom-core@1.8.4
-
-## 1.8.2
-
-### Patch Changes
-
-- Modified: imageHandler
-
-## 1.8.1
-
-### Patch Changes
-
-- Modified: imageHandler
-
-## 1.8.0
-
-### Patch Changes
-
-- Updated dependencies [f8a1d97]
-  - @websolutespa/bom-core@1.8.0
-
-## 1.0.9
-
-### Patch Changes
-
-- Fixing: downgrading eslint to v8.56.0
-- Updated dependencies
-  - @websolutespa/bom-core@1.7.8
-
-## 1.0.8
-
-### Patch Changes
-
-- Added: Cache-Control
-
-## 1.0.7
-
-### Patch Changes
-
-- Fixing: imageHandler Vercel support
-- Updated dependencies
-  - @websolutespa/bom-core@1.7.7
-
-## 1.0.6
-
-### Patch Changes
-
-- Modified: imageHandler, re-route not found to origin
-
-## 1.0.5
-
-### Patch Changes
-
-- Modified: imageHandler
-- Updated dependencies
-  - @websolutespa/bom-core@1.7.6
-
-## 1.0.4
-
-### Patch Changes
-
-- Modified: imageHandler getOriginalImage
-- Updated dependencies
-  - @websolutespa/bom-core@1.7.5
-
-## 1.0.3
-
-### Patch Changes
-
-- 43957d4: Fixing: production local asset public path
-- Updated dependencies
-  - @websolutespa/bom-core@1.7.4
-
-## 1.0.2
-
-### Patch Changes
-
-- 75b1311: Fixing: relative paths
-
-## 1.0.1
-
-### Patch Changes
-
-- Updating: dependencies
-
-## 1.0.0
-
-### Patch Changes
-
-- Added: first release
+# @websolutespa/bom-mixer-image
+
+## 2.0.1-next.0
+
+### Major Changes
+
+- e74b305: Release: Payload 3.7.0
+
+### Patch Changes
+
+- Updated dependencies [e74b305]
+  - @websolutespa/bom-core@2.0.1-next.0
+
+## 1.8.4
+
+### Patch Changes
+
+- Fixing: handling latin1 src
+
+## 1.8.3
+
+### Patch Changes
+
+- Added: ImageStrategy.Token
+- Updated dependencies
+  - @websolutespa/bom-core@1.8.4
+
+## 1.8.2
+
+### Patch Changes
+
+- Modified: imageHandler
+
+## 1.8.1
+
+### Patch Changes
+
+- Modified: imageHandler
+
+## 1.8.0
+
+### Patch Changes
+
+- Updated dependencies [f8a1d97]
+  - @websolutespa/bom-core@1.8.0
+
+## 1.0.9
+
+### Patch Changes
+
+- Fixing: downgrading eslint to v8.56.0
+- Updated dependencies
+  - @websolutespa/bom-core@1.7.8
+
+## 1.0.8
+
+### Patch Changes
+
+- Added: Cache-Control
+
+## 1.0.7
+
+### Patch Changes
+
+- Fixing: imageHandler Vercel support
+- Updated dependencies
+  - @websolutespa/bom-core@1.7.7
+
+## 1.0.6
+
+### Patch Changes
+
+- Modified: imageHandler, re-route not found to origin
+
+## 1.0.5
+
+### Patch Changes
+
+- Modified: imageHandler
+- Updated dependencies
+  - @websolutespa/bom-core@1.7.6
+
+## 1.0.4
+
+### Patch Changes
+
+- Modified: imageHandler getOriginalImage
+- Updated dependencies
+  - @websolutespa/bom-core@1.7.5
+
+## 1.0.3
+
+### Patch Changes
+
+- 43957d4: Fixing: production local asset public path
+- Updated dependencies
+  - @websolutespa/bom-core@1.7.4
+
+## 1.0.2
+
+### Patch Changes
+
+- 75b1311: Fixing: relative paths
+
+## 1.0.1
+
+### Patch Changes
+
+- Updating: dependencies
+
+## 1.0.0
+
+### Patch Changes
+
+- Added: first release

package/dist/{index.mjs → index.cjs}

@@ -1,8 +1,44 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  imageHandler: () => imageHandler
+});
+module.exports = __toCommonJS(index_exports);
+
 // src/image/image.handler.ts
-import * as fs from "fs";
-import * as path from "path";
-import sharp from "sharp";
-import { decryptImageResize, ImageStrategy } from "@websolutespa/bom-core";
+var fs = __toESM(require("fs"), 1);
+var path = __toESM(require("path"), 1);
+var import_sharp = __toESM(require("sharp"), 1);
+var import_bom_core = require("@websolutespa/bom-core");
 
 // src/api/api.handler.ts
 function apiHandler(handler) {
@@ -32,7 +68,7 @@ function errorHandler(error, response) {
 }
 
 // src/image/image.handler.ts
-var IMAGE_STRATEGY = process.env.IMAGE_STRATEGY ? process.env.IMAGE_STRATEGY : ImageStrategy.Mixer;
+var IMAGE_STRATEGY = process.env.IMAGE_STRATEGY ? process.env.IMAGE_STRATEGY : import_bom_core.ImageStrategy.Mixer;
 var IMAGE_MAX_AGE = 604800;
 var IMAGE_FOCAL_X = 50;
 var IMAGE_FOCAL_Y = 50;
@@ -48,7 +84,7 @@ function imageHandler({
       try {
         let imageOptions;
         try {
-          imageOptions = IMAGE_STRATEGY === ImageStrategy.Token ? getEncryptedImageOptions(request, { domains, sizes, quality }) : getImageOptions(request, { domains, sizes, quality });
+          imageOptions = IMAGE_STRATEGY === import_bom_core.ImageStrategy.Token ? getEncryptedImageOptions(request, { domains, sizes, quality }) : getImageOptions(request, { domains, sizes, quality });
         } catch (error) {
           return response.status(400).json({
             errors: [{
@@ -64,10 +100,7 @@ function imageHandler({
           response.setHeader("Cache-Control", `public, max-age=${IMAGE_MAX_AGE}`);
           return response.send(cachedImage);
         }
-        const { headers } = request;
-        const referer = headers.referer;
-        const publicUrl = process.env.NEXT_PUBLIC_URL || "";
-        if (referer && publicUrl !== "https://" && referer.indexOf(publicUrl) !== 0) {
+        if (isInvalidReferer(request)) {
           return response.status(401).send("you are not authorized to perform this action");
         }
         if (imageOptions.url.indexOf("http") === -1 && isVercel()) {
@@ -75,7 +108,9 @@ function imageHandler({
         }
         const originalImageBuffer = await getOriginalImage(imageOptions.url, domains, request.headers);
         if (originalImageBuffer) {
-          const originalImage = sharp(originalImageBuffer);
+          const originalImage = (0, import_sharp.default)(originalImageBuffer, {
+            animated: isGIF(imageOptions.url)
+          });
           const resizedImage = await resizeImage(originalImage, imageOptions);
           const compressedImage = resizedImage.webp({
             quality: imageOptions.q
@@ -99,6 +134,18 @@ function imageHandler({
     }
   });
 }
+function isGIF(src) {
+  return src.indexOf(".gif") !== -1;
+}
+function isInvalidReferer(request) {
+  const { headers } = request;
+  const referer = headers.referer;
+  const publicUrl = process.env.NEXT_PUBLIC_URL || "";
+  if (IMAGE_STRATEGY !== import_bom_core.ImageStrategy.Token && referer && publicUrl !== "https://" && referer.indexOf(publicUrl) !== 0) {
+    return true;
+  }
+  return false;
+}
 function getImageOptions(request, options) {
   const { slugs, origin = "", search = "", w, h, x, y, q } = request.query;
   if (!Array.isArray(slugs) || slugs.length === 0) {
@@ -146,10 +193,11 @@ function getEncryptedImageOptions(request, options) {
   if (typeof t !== "string") {
     throw "missing t parameter";
   }
-  const imageResize = decryptImageResize(t);
-  const url = origin + "/" + slugs.join("/") + search;
+  const imageResize = (0, import_bom_core.decryptImageResize)(t);
+  imageResize.src = decodeURIComponent(imageResize.src);
+  const url = decodeURIComponent(origin + "/" + slugs.join("/") + search);
   if (imageResize.src !== url) {
-    throw "invalid src parameter";
+    throw `invalid src parameter ${imageResize.src} ${url}`;
   }
   return {
     ...imageResize,
@@ -164,8 +212,8 @@ async function resizeImage(originalImage, imageOptions) {
     return originalImage.resize({
       width: resizeWidth,
       height: resizeHeight ? resizeHeight : void 0,
-      fit: sharp.fit.cover,
-      position: sharp.strategy.attention,
+      fit: import_sharp.default.fit.cover,
+      position: import_sharp.default.strategy.attention,
       withoutEnlargement: true
     });
   };
@@ -178,10 +226,10 @@ async function resizeImage(originalImage, imageOptions) {
       const imageToResize = originalImage.clone();
       const scaledImage = imageToResize.resize(prioritizeHeight ? {
         height: resizeHeight,
-        fit: sharp.fit.cover
+        fit: import_sharp.default.fit.cover
       } : {
         width: resizeWidth,
-        fit: sharp.fit.cover
+        fit: import_sharp.default.fit.cover
       });
       const { info: scaledImageInfo } = await scaledImage.toBuffer({ resolveWithObject: true });
       const extractWidth = resizeWidth ?? scaledImageInfo.width;
@@ -209,10 +257,10 @@ async function resizeImage(originalImage, imageOptions) {
     return defaultResizeOptions();
   }
 }
-function getOriginalImage(url, domains, headers, skipUrlValidity = false) {
+function getOriginalImage(url, domains, headers) {
   return new Promise((resolve, reject) => {
     if (url.indexOf("http") === 0) {
-      if (!skipUrlValidity && !checkUrlValidity(url, domains)) {
+      if (isInvalidDomain(url, domains)) {
         return reject({ status: 401, message: "invalid origin" });
       }
       fetch(url, {
@@ -275,10 +323,14 @@ function urlToCachedName(options) {
   const cachedName = options.h ? path.join(cacheDir, `${parsedName.name}_w_${options.w}_h_${options.h || 0}_x_${options.x || IMAGE_FOCAL_X}_y_${options.y || IMAGE_FOCAL_Y}_q_${options.q}${parsedName.ext}`) : path.join(cacheDir, `${parsedName.name}_w_${options.w}_q_${options.q}${parsedName.ext}`);
   return cachedName;
 }
-function checkUrlValidity(src, domains) {
+function isInvalidDomain(src, domains) {
+  if (IMAGE_STRATEGY === import_bom_core.ImageStrategy.Token) {
+    return false;
+  }
   const url = new URL(src);
-  return domains.includes(url.hostname);
+  return !domains.includes(url.hostname);
 }
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   imageHandler
-};
+});

package/dist/index.d.cts

@@ -0,0 +1,15 @@
+import { IImageResize } from '@websolutespa/bom-core';
+
+type IImageHandlerOptions = {
+    domains: string[];
+    sizes: number[];
+    quality: number;
+};
+type IImageOptions = IImageResize & {
+    origin: string;
+    search: string;
+    url: string;
+};
+declare function imageHandler({ domains, sizes, quality, }: IImageHandlerOptions): any;
+
+export { type IImageHandlerOptions, type IImageOptions, imageHandler };

package/dist/index.d.ts

@@ -12,4 +12,4 @@ type IImageOptions = IImageResize & {
 };
 declare function imageHandler({ domains, sizes, quality, }: IImageHandlerOptions): any;
 
-export { IImageHandlerOptions, IImageOptions, imageHandler };
+export { type IImageHandlerOptions, type IImageOptions, imageHandler };

package/dist/index.js

@@ -1,44 +1,8 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  imageHandler: () => imageHandler
-});
-module.exports = __toCommonJS(src_exports);
-
 // src/image/image.handler.ts
-var fs = __toESM(require("fs"));
-var path = __toESM(require("path"));
-var import_sharp = __toESM(require("sharp"));
-var import_bom_core = require("@websolutespa/bom-core");
+import * as fs from "fs";
+import * as path from "path";
+import sharp from "sharp";
+import { decryptImageResize, ImageStrategy } from "@websolutespa/bom-core";
 
 // src/api/api.handler.ts
 function apiHandler(handler) {
@@ -68,7 +32,7 @@ function errorHandler(error, response) {
 }
 
 // src/image/image.handler.ts
-var IMAGE_STRATEGY = process.env.IMAGE_STRATEGY ? process.env.IMAGE_STRATEGY : import_bom_core.ImageStrategy.Mixer;
+var IMAGE_STRATEGY = process.env.IMAGE_STRATEGY ? process.env.IMAGE_STRATEGY : ImageStrategy.Mixer;
 var IMAGE_MAX_AGE = 604800;
 var IMAGE_FOCAL_X = 50;
 var IMAGE_FOCAL_Y = 50;
@@ -84,7 +48,7 @@ function imageHandler({
       try {
         let imageOptions;
         try {
-          imageOptions = IMAGE_STRATEGY === import_bom_core.ImageStrategy.Token ? getEncryptedImageOptions(request, { domains, sizes, quality }) : getImageOptions(request, { domains, sizes, quality });
+          imageOptions = IMAGE_STRATEGY === ImageStrategy.Token ? getEncryptedImageOptions(request, { domains, sizes, quality }) : getImageOptions(request, { domains, sizes, quality });
         } catch (error) {
           return response.status(400).json({
             errors: [{
@@ -100,10 +64,7 @@ function imageHandler({
           response.setHeader("Cache-Control", `public, max-age=${IMAGE_MAX_AGE}`);
           return response.send(cachedImage);
         }
-        const { headers } = request;
-        const referer = headers.referer;
-        const publicUrl = process.env.NEXT_PUBLIC_URL || "";
-        if (referer && publicUrl !== "https://" && referer.indexOf(publicUrl) !== 0) {
+        if (isInvalidReferer(request)) {
           return response.status(401).send("you are not authorized to perform this action");
         }
         if (imageOptions.url.indexOf("http") === -1 && isVercel()) {
@@ -111,7 +72,9 @@ function imageHandler({
         }
         const originalImageBuffer = await getOriginalImage(imageOptions.url, domains, request.headers);
         if (originalImageBuffer) {
-          const originalImage = (0, import_sharp.default)(originalImageBuffer);
+          const originalImage = sharp(originalImageBuffer, {
+            animated: isGIF(imageOptions.url)
+          });
           const resizedImage = await resizeImage(originalImage, imageOptions);
           const compressedImage = resizedImage.webp({
             quality: imageOptions.q
@@ -135,6 +98,18 @@ function imageHandler({
     }
   });
 }
+function isGIF(src) {
+  return src.indexOf(".gif") !== -1;
+}
+function isInvalidReferer(request) {
+  const { headers } = request;
+  const referer = headers.referer;
+  const publicUrl = process.env.NEXT_PUBLIC_URL || "";
+  if (IMAGE_STRATEGY !== ImageStrategy.Token && referer && publicUrl !== "https://" && referer.indexOf(publicUrl) !== 0) {
+    return true;
+  }
+  return false;
+}
 function getImageOptions(request, options) {
   const { slugs, origin = "", search = "", w, h, x, y, q } = request.query;
   if (!Array.isArray(slugs) || slugs.length === 0) {
@@ -182,10 +157,11 @@ function getEncryptedImageOptions(request, options) {
   if (typeof t !== "string") {
     throw "missing t parameter";
   }
-  const imageResize = (0, import_bom_core.decryptImageResize)(t);
-  const url = origin + "/" + slugs.join("/") + search;
+  const imageResize = decryptImageResize(t);
+  imageResize.src = decodeURIComponent(imageResize.src);
+  const url = decodeURIComponent(origin + "/" + slugs.join("/") + search);
   if (imageResize.src !== url) {
-    throw "invalid src parameter";
+    throw `invalid src parameter ${imageResize.src} ${url}`;
   }
   return {
     ...imageResize,
@@ -200,8 +176,8 @@ async function resizeImage(originalImage, imageOptions) {
     return originalImage.resize({
       width: resizeWidth,
       height: resizeHeight ? resizeHeight : void 0,
-      fit: import_sharp.default.fit.cover,
-      position: import_sharp.default.strategy.attention,
+      fit: sharp.fit.cover,
+      position: sharp.strategy.attention,
       withoutEnlargement: true
     });
   };
@@ -214,10 +190,10 @@ async function resizeImage(originalImage, imageOptions) {
       const imageToResize = originalImage.clone();
       const scaledImage = imageToResize.resize(prioritizeHeight ? {
         height: resizeHeight,
-        fit: import_sharp.default.fit.cover
+        fit: sharp.fit.cover
       } : {
         width: resizeWidth,
-        fit: import_sharp.default.fit.cover
+        fit: sharp.fit.cover
       });
       const { info: scaledImageInfo } = await scaledImage.toBuffer({ resolveWithObject: true });
       const extractWidth = resizeWidth ?? scaledImageInfo.width;
@@ -245,10 +221,10 @@ async function resizeImage(originalImage, imageOptions) {
     return defaultResizeOptions();
   }
 }
-function getOriginalImage(url, domains, headers, skipUrlValidity = false) {
+function getOriginalImage(url, domains, headers) {
   return new Promise((resolve, reject) => {
     if (url.indexOf("http") === 0) {
-      if (!skipUrlValidity && !checkUrlValidity(url, domains)) {
+      if (isInvalidDomain(url, domains)) {
         return reject({ status: 401, message: "invalid origin" });
       }
       fetch(url, {
@@ -311,11 +287,13 @@ function urlToCachedName(options) {
   const cachedName = options.h ? path.join(cacheDir, `${parsedName.name}_w_${options.w}_h_${options.h || 0}_x_${options.x || IMAGE_FOCAL_X}_y_${options.y || IMAGE_FOCAL_Y}_q_${options.q}${parsedName.ext}`) : path.join(cacheDir, `${parsedName.name}_w_${options.w}_q_${options.q}${parsedName.ext}`);
   return cachedName;
 }
-function checkUrlValidity(src, domains) {
+function isInvalidDomain(src, domains) {
+  if (IMAGE_STRATEGY === ImageStrategy.Token) {
+    return false;
+  }
   const url = new URL(src);
-  return domains.includes(url.hostname);
+  return !domains.includes(url.hostname);
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   imageHandler
-});
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websolutespa/bom-mixer-image",
-  "version": "1.8.3",
+  "version": "2.0.1-next.0",
   "description": "Mixer Image module of the BOM Repository",
   "keywords": [
     "bom",
@@ -14,37 +14,39 @@
   },
   "scripts": {
     "lint": "eslint *.ts*",
-    "test": "jest",
-    "test-watch": "npm test -- --watch --silent=false",
-    "coverage:integration": "npm run test -- --coverage",
+    "test": "vitest run",
+    "test-watch": "vitest",
+    "coverage:integration": "npm run test -- --coverage.enabled --coverage.provider=istanbul --coverage.all",
     "coverage": "run-s -c --silent coverage:*",
     "compile": "tsup ./src/index.ts --format esm,cjs --dts",
     "prepack": "bom prepack",
-    "postpack": "bom postpack"
+    "postpack": "bom postpack",
+    "types": "tsc --noemit"
   },
   "dependencies": {},
   "peerDependencies": {
-    "@websolutespa/bom-core": "*",
-    "next": ">= 14.1.4",
-    "sharp": ">= 0.30.4"
+    "@websolutespa/bom-core": "2.0.1-next.0",
+    "next": "15.4.10",
+    "sharp": "0.34.2"
   },
   "devDependencies": {
     "@types/sharp": "^0.30.4",
-    "@websolutespa/bom-cli": "*",
-    "@websolutespa/test": "*",
-    "@websolutespa/tsconfig": "*",
-    "eslint": "^8.56.0",
-    "eslint-config-websolute": "*",
-    "npm-run-all": "^4.1.5",
-    "sharp": "0.30.4",
-    "ts-node": "^10.9.1",
-    "tsup": "^6.7.0",
-    "typescript": "^5.4.5"
+    "@websolutespa/bom-cli": "2.0.1-next.0",
+    "@websolutespa/test": "2.0.1-next.0",
+    "@websolutespa/tsconfig": "2.0.1-next.0",
+    "eslint": "9.31.0",
+    "@websolutespa/eslint-config": "2.0.1-next.0",
+    "npm-run-all": "4.1.5",
+    "sharp": "0.34.2",
+    "ts-node": "^10.9.2",
+    "tsup": "8.5.0",
+    "typescript": "5.8.3"
   },
   "publishConfig": {
     "access": "public"
   },
   "sideEffects": false,
+  "type": "module",
   "prepack": {
     "types": "./dist/index.d.ts",
     "main": "./dist/index.js",

package/src/__tests/example.test.ts

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom';
+import { describe, expect, it } from 'vitest';
 
 describe('Example', () => {
   it('passes', async () => {

package/src/image/image.handler.ts

@@ -72,15 +72,7 @@ export function imageHandler({
           return response.send(cachedImage);
         }
         // Check referrer
-        const { headers } = request;
-        const referer = headers.referer;
-        const publicUrl = process.env.NEXT_PUBLIC_URL || '';
-        // console.log('referef', referer, 'publicUrl', publicUrl);
-        if (
-          referer &&
-          publicUrl !== 'https://' &&
-          referer.indexOf(publicUrl) !== 0
-        ) {
+        if (isInvalidReferer(request)) {
           return response.status(401).send('you are not authorized to perform this action');
         }
         // Temporarily fix Vercel local image issue
@@ -92,7 +84,9 @@ export function imageHandler({
         // Checking if the original image exists
         if (originalImageBuffer) {
           // Original image
-          const originalImage = sharp(originalImageBuffer);
+          const originalImage = sharp(originalImageBuffer, {
+            animated: isGIF(imageOptions.url),
+          });
           // Resizing the original image and converting it to WebP format
           const resizedImage = await resizeImage(originalImage, imageOptions);
           // Converting resized image to WebP format
@@ -129,6 +123,26 @@ export function imageHandler({
   });
 }
 
+function isGIF(src: string): boolean {
+  return src.indexOf('.gif') !== -1;
+}
+
+function isInvalidReferer(request: NextApiRequest): boolean {
+  const { headers } = request;
+  const referer = headers.referer;
+  const publicUrl = process.env.NEXT_PUBLIC_URL || '';
+  // console.log('referef', referer, 'publicUrl', publicUrl, 'IMAGE_STRATEGY', IMAGE_STRATEGY, ImageStrategy.Token);
+  if (
+    IMAGE_STRATEGY !== ImageStrategy.Token &&
+    referer &&
+    publicUrl !== 'https://' &&
+    referer.indexOf(publicUrl) !== 0
+  ) {
+    return true;
+  }
+  return false;
+}
+
 function getImageOptions(request: NextApiRequest, options: IImageHandlerOptions): IImageOptions {
   // Destructuring 'slugs', 'origin', 'search', 'w', 'h', 'x', 'y', 'q' from the request query
   const { slugs, origin = '', search = '', w, h, x, y, q } = request.query;
@@ -211,11 +225,12 @@ function getEncryptedImageOptions(request: NextApiRequest, options: IImageHandle
     throw 'invalid q parameter';
   }
   */
+  imageResize.src = decodeURIComponent(imageResize.src);
   // Generating url
-  const url = origin + '/' + slugs.join('/') + search;
+  const url = decodeURIComponent(origin + '/' + slugs.join('/') + search);
   //
   if (imageResize.src !== url) {
-    throw 'invalid src parameter';
+    throw `invalid src parameter ${imageResize.src} ${url}`;
   }
   //
   return {
@@ -285,16 +300,12 @@ async function resizeImage(originalImage: sharp.Sharp, imageOptions: IImageOptio
 }
 
 // Defining the 'getOriginalImage' function
-function getOriginalImage(url: string, domains: string[], headers: IncomingHttpHeaders, skipUrlValidity: boolean = false): Promise<Buffer> {
+function getOriginalImage(url: string, domains: string[], headers: IncomingHttpHeaders): Promise<Buffer> {
   // Returning a new promise
   return new Promise((resolve, reject) => {
     // Checking if 'url' starts with 'http'
     if (url.indexOf('http') === 0) {
-      if (
-        !skipUrlValidity &&
-        !checkUrlValidity(url, domains)
-      ) {
-        // console.error('imageHandler.getOriginalImage.error invalid origin');
+      if (isInvalidDomain(url, domains)) {
         return reject({ status: 401, message: 'invalid origin' });
       }
       // Fetching the image from the URL
@@ -330,21 +341,6 @@ function getOriginalImage(url: string, domains: string[], headers: IncomingHttpH
         // Resolving the promise with the image data
         return resolve(data);
       });
-      /*
-      // Check if the file exists
-      if (fs.existsSync(filePath)) {
-        fs.readFile(filePath, (error, data) => {
-          if (error) {
-            return reject(error);
-          }
-          // Resolving the promise with the image data
-          return resolve(data);
-        });
-      } else {
-        const origin = getOrigin(headers);
-        return getOriginalImage(`${origin}${url}`, domains, headers, true);
-      }
-      */
     }
   });
 }
@@ -369,7 +365,7 @@ function getCachedImage(pathname: string): Promise<Buffer> {
 function urlToFileName(url: string): string {
   // Replacing useless characters with UNDERSCORE
   const segments = url.split('?');
-  const path = segments[0];
+  const path = segments[0]!;
   const query = segments[1];
   let uniqueName = path.replace('://', '_').replace(/\.|\/|\?|=/g, '_');
   // Replacing last UNDERSCORE with a DOT
@@ -407,7 +403,10 @@ function urlToCachedName(options: IImageOptions): string {
   return cachedName;
 }
 
-function checkUrlValidity(src: string, domains: string[]): boolean {
+function isInvalidDomain(src: string, domains: string[]): boolean {
+  if (IMAGE_STRATEGY === ImageStrategy.Token) {
+    return false;
+  }
   const url = new URL(src);
-  return domains.includes(url.hostname);
+  return !domains.includes(url.hostname);
 }