chore: use native URL API to detect whether URL is on our CDN

Author: nd0ut

src/__tests__/is-cdn-url.spec.ts

@@ -0,0 +1,33 @@
+/**
+ * @jest-environment jsdom
+ */
+import { isCdnUrl } from '../utils/helpers';
+
+describe('isCdnUrl', () => {
+  it('should return true in cases when provided URL matches provided domain', () => {
+    expect(
+      isCdnUrl('https://ucarecdn.com/:uuid/:filename', 'ucarecdn.com')
+    ).toBeTruthy();
+    expect(isCdnUrl('http://ucarecdn.com/', 'ucarecdn.com')).toBeTruthy();
+    expect(isCdnUrl('http://ucarecdn.com', 'ucarecdn.com')).toBeTruthy();
+    expect(isCdnUrl('http://ucarecdn.com:8080', 'ucarecdn.com')).toBeTruthy();
+    expect(
+      isCdnUrl('http://custom.domain.com', 'custom.domain.com')
+    ).toBeTruthy();
+    expect(isCdnUrl('//ucarecdn.com/', 'ucarecdn.com')).toBeTruthy();
+  });
+
+  it("should return false in cases when provided URL doesn't matches provided domain", () => {
+    expect(
+      isCdnUrl('https://ucarecdn.com/:uuid/:filename', 'other.com')
+    ).toBeFalsy();
+    expect(isCdnUrl('http://custom.domain.com', 'ucarecdn.com')).toBeFalsy();
+    expect(isCdnUrl('//custom.domain.com/', 'ucarecdn.com')).toBeFalsy();
+  });
+
+  it('should throw a error if invalid URL provided', () => {
+    expect(() => isCdnUrl('ucarecdn', 'ucarecdn.com')).toThrowError(
+      /Invalid URL/
+    );
+  });
+});

src/__tests__/uploadcare-loader.spec.ts

@@ -67,7 +67,7 @@ describe('uploadcareLoader', () => {
 
     const t = () => {
       uploadcareLoader({
-        src: '',
+        src: 'https://example.com',
         width: 0,
         quality: 80
       });
@@ -95,7 +95,7 @@ describe('uploadcareLoader', () => {
   });
 
   test('The loader parses user paramters properly', () => {
-    const src = 'https:/example.com/image.jpg';
+    const src = 'https://example.com/image.jpg';
 
     addEnvVar('NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY', 'test-public-key');
 
@@ -108,7 +108,7 @@ describe('uploadcareLoader', () => {
     });
 
     expect(result).toBe(
-      'https://test-public-key.ucr.io/-/format/auto/-/stretch/off/-/progressive/yes/-/resize/500x/-/quality/normal/https:/example.com/image.jpg'
+      'https://test-public-key.ucr.io/-/format/auto/-/stretch/off/-/progressive/yes/-/resize/500x/-/quality/normal/https://example.com/image.jpg'
     );
 
     // Override default params, including resize and quality.
@@ -125,7 +125,7 @@ describe('uploadcareLoader', () => {
     });
 
     expect(result).toBe(
-      'https://test-public-key.ucr.io/-/format/jpg/-/stretch/on/-/progressive/no/-/resize/1x/-/quality/smart_retina/https:/example.com/image.jpg'
+      'https://test-public-key.ucr.io/-/format/jpg/-/stretch/on/-/progressive/no/-/resize/1x/-/quality/smart_retina/https://example.com/image.jpg'
     );
 
     // Add a new parameter (no defaults).
@@ -142,15 +142,15 @@ describe('uploadcareLoader', () => {
     });
 
     expect(result).toBe(
-      'https://test-public-key.ucr.io/-/format/auto/-/stretch/off/-/progressive/yes/-/resize/500x/-/quality/normal/-/new/parameter/https:/example.com/image.jpg'
+      'https://test-public-key.ucr.io/-/format/auto/-/stretch/off/-/progressive/yes/-/resize/500x/-/quality/normal/-/new/parameter/https://example.com/image.jpg'
     );
 
     removeEnvVar('NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY');
     removeEnvVar('NEXT_PUBLIC_UPLOADCARE_TRANSFORMATION_PARAMETERS');
   });
 
   test("The loader doesn't process SVG and GIF (absolute url)", () => {
-    const src = 'https:/example.com/image.svg';
+    const src = 'https://example.com/image.svg';
 
     addEnvVar('NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY', 'test-public-key');
 
@@ -242,7 +242,7 @@ describe('uploadcareLoader', () => {
 
     // Not a jpg image. Should be max 3000 width.
 
-    let src = 'https:/example.com/image.png';
+    let src = 'https://example.com/image.png';
 
     addEnvVar(
       'NEXT_PUBLIC_UPLOADCARE_TRANSFORMATION_PARAMETERS',
@@ -256,7 +256,7 @@ describe('uploadcareLoader', () => {
     });
 
     expect(result).toBe(
-      'https://test-public-key.ucr.io/-/format/auto/-/stretch/off/-/progressive/yes/-/resize/3000x/-/quality/normal/https:/example.com/image.png'
+      'https://test-public-key.ucr.io/-/format/auto/-/stretch/off/-/progressive/yes/-/resize/3000x/-/quality/normal/https://example.com/image.png'
     );
 
     // Jpg image by format. Should be max 5000 width.
@@ -273,13 +273,13 @@ describe('uploadcareLoader', () => {
     });
 
     expect(result).toBe(
-      'https://test-public-key.ucr.io/-/format/jpeg/-/stretch/off/-/progressive/yes/-/resize/5000x/-/quality/normal/https:/example.com/image.png'
+      'https://test-public-key.ucr.io/-/format/jpeg/-/stretch/off/-/progressive/yes/-/resize/5000x/-/quality/normal/https://example.com/image.png'
     );
 
     // // Jpg image by extension with auto format.
     // // Should be max 5000 width with /format/jpeg/ forced.
 
-    src = 'https:/example.com/image.jpg';
+    src = 'https://example.com/image.jpg';
 
     addEnvVar(
       'NEXT_PUBLIC_UPLOADCARE_TRANSFORMATION_PARAMETERS',
@@ -293,7 +293,7 @@ describe('uploadcareLoader', () => {
     });
 
     expect(result).toBe(
-      'https://test-public-key.ucr.io/-/format/jpeg/-/stretch/off/-/progressive/yes/-/resize/5000x/-/quality/normal/https:/example.com/image.jpg'
+      'https://test-public-key.ucr.io/-/format/jpeg/-/stretch/off/-/progressive/yes/-/resize/5000x/-/quality/normal/https://example.com/image.jpg'
     );
 
     removeEnvVar('NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY');

src/utils/helpers.ts

@@ -114,13 +114,14 @@ export function generateCustomProxyEndpoint(customProxyDomain: string): string {
 }
 
 export function isCdnUrl(url: string, cdnDomain: string): boolean {
-  //eslint-disable-next-line
-  const escapedCdnDomain = cdnDomain.replace('.', '.');
-
-  //eslint-disable-next-line
-  const regexp = new RegExp(`^https?:\/\/${escapedCdnDomain}`);
+  url = url.trim();
+  if (url.startsWith('//')) {
+    url = location.protocol + url;
+  } else if (url.startsWith('/')) {
+    return false;
+  }
 
-  return regexp.test(url);
+  return new URL(url).hostname === cdnDomain.trim();
 }
 
 export function isProduction(): boolean {