Remove errant protocol from cloudflare urls

__tests__/url.test.ts

@@ -1,5 +1,4 @@
-import { makeUrlAbsolute, shortenUrl } from '@/utility/url';
+import { makeUrlAbsolute, removeUrlProtocol, shortenUrl } from '@/utility/url';
-import '@testing-library/jest-dom';
 
 const URL_LONG_1  = 'https://www.example.com/';
 const URL_LONG_2  = 'https://www.example.com';
@@ -12,9 +11,10 @@ const URL_LONG_7  = 'https://example.com/final-path/';
 const URL_SHORT_1 = 'example.com';
 const URL_SHORT_2 = 'example.com/';
 const URL_SHORT_3 = 'example.com/final-path';
+const URL_SHORT_4 = 'www.example.com';
 
-describe('String', () => {
+describe('URL', () => {
-  it('url can be shortened', () => {
+  it('can be shortened', () => {
     expect(shortenUrl(URL_LONG_1)).toBe(URL_SHORT_1);
     expect(shortenUrl(URL_LONG_2)).toBe(URL_SHORT_1);
     expect(shortenUrl(URL_LONG_3)).toBe(URL_SHORT_1);
@@ -23,7 +23,15 @@ describe('String', () => {
     expect(shortenUrl(URL_LONG_6)).toBe(URL_SHORT_3);
     expect(shortenUrl(URL_LONG_7)).toBe(URL_SHORT_3);
   });
-  it('url can be made absolute', () => {
+  it('can have protocol removed', () => {
+    expect(removeUrlProtocol(URL_LONG_1)).toBe(URL_SHORT_4);
+    expect(removeUrlProtocol(URL_LONG_2)).toBe(URL_SHORT_4);
+    expect(removeUrlProtocol(URL_LONG_4)).toBe(URL_SHORT_1);
+    expect(removeUrlProtocol(URL_LONG_5)).toBe(URL_SHORT_1);
+    expect(removeUrlProtocol(URL_LONG_6)).toBe(URL_SHORT_3);
+    expect(removeUrlProtocol(URL_LONG_7)).toBe(URL_SHORT_3);
+  });
+  it('can be made absolute', () => {
     expect(makeUrlAbsolute(URL_SHORT_1)).toBe(URL_LONG_5);
     expect(makeUrlAbsolute(URL_SHORT_2)).toBe(URL_LONG_5);
   });

next.config.ts

@@ -1,3 +1,4 @@
+import { removeUrlProtocol } from '@/utility/url';
 import type { NextConfig } from 'next';
 import { RemotePattern } from 'next/dist/shared/lib/image-config';
 
@@ -20,26 +21,29 @@ const HOSTNAME_AWS_S3 =
     : undefined;
 
 const generateRemotePattern = (hostname: string) =>
-  ({ protocol: 'https', hostname, port: '', pathname: '/**' } as const);
+  ({
+    protocol: 'https',
+    hostname: removeUrlProtocol(hostname)!,
+    port: '',
+    pathname: '/**',
+  } as const);
 
-const generateRemotePatterns = () => {
+const remotePatterns: RemotePattern[] = [];
-  const remotePatterns: RemotePattern[] = [];
+
-  if (HOSTNAME_VERCEL_BLOB) {
+if (HOSTNAME_VERCEL_BLOB) {
-    remotePatterns.push(generateRemotePattern(HOSTNAME_VERCEL_BLOB));
+  remotePatterns.push(generateRemotePattern(HOSTNAME_VERCEL_BLOB));
-  }
+}
-  if (HOSTNAME_CLOUDFLARE_R2) {
+if (HOSTNAME_CLOUDFLARE_R2) {
-    remotePatterns.push(generateRemotePattern(HOSTNAME_CLOUDFLARE_R2));
+  remotePatterns.push(generateRemotePattern(HOSTNAME_CLOUDFLARE_R2));
-  }
+}
-  if (HOSTNAME_AWS_S3) {
+if (HOSTNAME_AWS_S3) {
-    remotePatterns.push(generateRemotePattern(HOSTNAME_AWS_S3));
+  remotePatterns.push(generateRemotePattern(HOSTNAME_AWS_S3));
-  }
+}
-  return remotePatterns;
-};
 
 const nextConfig: NextConfig = {
   images: {
     imageSizes: [200],
-    remotePatterns: generateRemotePatterns(),
+    remotePatterns,
     minimumCacheTTL: 31536000,
   },
 };

src/services/storage/cloudflare-r2.ts

@@ -6,13 +6,14 @@ import {
   CopyObjectCommand,
 } from '@aws-sdk/client-s3';
 import { StorageListResponse, generateStorageId } from '.';
+import { removeUrlProtocol } from '@/utility/url';
 
 const CLOUDFLARE_R2_BUCKET =
   process.env.NEXT_PUBLIC_CLOUDFLARE_R2_BUCKET ?? '';
 const CLOUDFLARE_R2_ACCOUNT_ID =
   process.env.NEXT_PUBLIC_CLOUDFLARE_R2_ACCOUNT_ID ?? '';
 const CLOUDFLARE_R2_PUBLIC_DOMAIN =
-  process.env.NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_DOMAIN ?? '';
+  removeUrlProtocol(process.env.NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_DOMAIN) ?? '';
 const CLOUDFLARE_R2_ACCESS_KEY =
   process.env.CLOUDFLARE_R2_ACCESS_KEY ?? '';
 const CLOUDFLARE_R2_SECRET_ACCESS_KEY =

src/utility/url.ts

@@ -5,6 +5,13 @@ export const shortenUrl = (url?: string) => url
     .replace(/\/$/, '')
   : undefined;
 
+// Remove protocol, and trailing slash from url
+export const removeUrlProtocol = (url?: string) => url
+  ? url
+    .replace(/^(?:https?:\/\/)?/i, '')
+    .replace(/\/$/, '')
+  : undefined;
+
 // Add protocol to url and remove trailing slash
 export const makeUrlAbsolute = (url?: string) => url !== undefined
   ? (!url.startsWith('http') ? `https://${url}` : url)