chore: force HTTPS protocol for protocol-relative URLs

Author: nd0ut

example/pages/index.tsx

@@ -14,7 +14,7 @@ const Home: NextPage = () => (
     <div className={styles.card}>
       <h1>
         Uploadcare custom loader for Image Component{' '}
-        <a href="https://github.com/uploadcare/nextjs-loader">
+        <a href="//github.com/uploadcare/nextjs-loader">
           @uploadcare/nextjs-loader
         </a>
       </h1>
@@ -29,7 +29,7 @@ const Home: NextPage = () => (
       <Image
         loader={uploadcareLoader}
         alt="Vercel logo"
-        src="https://ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/vercel.png"
+        src="//ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/vercel.png"
         width={1000}
         height={1000}
       />
@@ -40,7 +40,7 @@ const Home: NextPage = () => (
       </p>
       <UploadcareImage
         alt="Vercel logo"
-        src="https://ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/vercel.png"
+        src="//ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/vercel.png"
         width={500}
         height={500}
       />
@@ -53,7 +53,7 @@ const Home: NextPage = () => (
       </p>
       <UploadcareImage
         alt="Vercel logo"
-        src="https://ucarecdn.com/c768f1c2-891a-4f54-8e1e-7242df218b51/pinewatt2Hzmz15wGikunsplash.jpg"
+        src="//ucarecdn.com/c768f1c2-891a-4f54-8e1e-7242df218b51/pinewatt2Hzmz15wGikunsplash.jpg"
         width={500}
         height={500}
         placeholder="blur"
@@ -66,7 +66,7 @@ const Home: NextPage = () => (
       <p>It will be proxied through Media Proxy.</p>
       <Image
         alt="Next.js logo"
-        src="https://assets.vercel.com/image/upload/v1538361091/repositories/next-js/next-js.png"
+        src="//assets.vercel.com/image/upload/v1538361091/repositories/next-js/next-js.png"
         width={1200}
         height={400}
         loader={uploadcareLoader}
@@ -75,14 +75,14 @@ const Home: NextPage = () => (
       <p>SVGs and GIFs will be used without transformations</p>
       <Image
         alt="Next.js logo"
-        src="https://ucarecdn.com/375bba4b-35db-4cb8-8fc7-7540625f2181/next.svg"
+        src="//ucarecdn.com/375bba4b-35db-4cb8-8fc7-7540625f2181/next.svg"
         width={64}
         height={64}
         loader={uploadcareLoader}
       />
       <Image
         alt="Vercel logo"
-        src="https://ucarecdn.com/0f23a269-13eb-4fc9-b378-86f224380d26/vercel.gif"
+        src="//ucarecdn.com/0f23a269-13eb-4fc9-b378-86f224380d26/vercel.gif"
         width={64}
         height={64}
         loader={uploadcareLoader}
@@ -101,7 +101,7 @@ const Home: NextPage = () => (
       />
       <hr className={styles.hr} />
       Checkout the project documentation on Github{' '}
-      <a href="https://github.com/uploadcare/nextjs-loader">
+      <a href="//github.com/uploadcare/nextjs-loader">
         @uploadcare/nextjs-loader
       </a>
       .

src/__tests__/ensure-url-protocol.spec.ts

@@ -0,0 +1,16 @@
+import { ensureUrlProtocol } from '../utils/helpers';
+
+describe('ensureUrlProtocol', () => {
+  it('should force https protocol for protocol relative URLs', () => {
+    expect(ensureUrlProtocol('//domain.com')).toBe('https://domain.com');
+  });
+
+  it('should not modify relative URLs', () => {
+    expect(ensureUrlProtocol('/path/')).toBe('/path/');
+  });
+
+  it('should not modify absolute URLs', () => {
+    expect(ensureUrlProtocol('https://domain.com')).toBe('https://domain.com');
+    expect(ensureUrlProtocol('http://domain.com')).toBe('http://domain.com');
+  });
+});

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

@@ -14,20 +14,21 @@ describe('isCdnUrl', () => {
     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/
     );
+    expect(() => isCdnUrl('//ucarecdn.com', 'ucarecdn.com')).toThrowError(
+      /Invalid URL/
+    );
   });
 });

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

@@ -0,0 +1,13 @@
+import { isRelativeUrl } from '../utils/helpers';
+
+describe('isRelativeUrl', () => {
+  it('should return true when relative URL provided', () => {
+    expect(isRelativeUrl('/relative/path/')).toBeTruthy();
+    expect(isRelativeUrl('/')).toBeTruthy();
+  });
+
+  it('should return false when non-relative URL provided', () => {
+    expect(isRelativeUrl('http://domain.com')).toBeFalsy();
+    expect(isRelativeUrl('//domain.com')).toBeFalsy();
+  });
+});

src/utils/helpers.ts

@@ -113,14 +113,25 @@ export function generateCustomProxyEndpoint(customProxyDomain: string): string {
   return `https://${customProxyDomain}`;
 }
 
+function isProtocolRelativeUrl(url: string): boolean {
+  return url.startsWith('//');
+}
+
+export function isRelativeUrl(url: string): boolean {
+  return url.startsWith('/') && !isProtocolRelativeUrl(url);
+}
+
+export function ensureUrlProtocol(url: string): string {
+  if (isProtocolRelativeUrl(url)) {
+    return 'https:' + url;
+  }
+  return url;
+}
+
 export function isCdnUrl(url: string, cdnDomain: string): boolean {
-  url = url.trim();
-  if (url.startsWith('//')) {
-    url = location.protocol + url;
-  } else if (url.startsWith('/')) {
+  if (isRelativeUrl(url)) {
     return false;
   }
-
   return new URL(url).hostname === cdnDomain.trim();
 }
 

src/utils/loader.ts

@@ -18,7 +18,9 @@ import {
   isProduction,
   mergeParams,
   parseUserParamsString,
-  trimTrailingSlash
+  trimTrailingSlash,
+  isRelativeUrl,
+  ensureUrlProtocol
 } from './helpers';
 
 export function uploadcareLoader({
@@ -43,10 +45,11 @@ export function uploadcareLoader({
     process.env.NEXT_PUBLIC_UPLOADCARE_APP_BASE_URL || ''
   );
 
+  src = ensureUrlProtocol(src);
   const proxy = trimTrailingSlash(proxyEndpoint);
   const isProductionMode = isProduction();
   const isImageOnCdn = isCdnUrl(src, cdnDomain);
-  const isImageRelative = src.startsWith('/');
+  const isImageRelative = isRelativeUrl(src);
 
   // Development mode; not on CDN.
   if (!isProductionMode && !isImageOnCdn) {