Merge branch 'main' into feat/next-13-image

# Conflicts:
#	example/pages/index.tsx

Author: nd0ut

.github/workflows/codeql.yml

@@ -0,0 +1,41 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  schedule:
+    - cron: "55 20 * * 1"
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ javascript ]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          queries: +security-and-quality
+
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2
+        with:
+          category: "/language:${{ matrix.language }}"

.gitignore

@@ -3,3 +3,6 @@ build
 .github
 .husky
 .env
+
+# Local Netlify folder
+.netlify

example/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "build:ci": "NEXT_PUBLIC_UPLOADCARE_APP_BASE_URL=$DEPLOY_PRIME_URL NODE_ENV=production next build",
     "start": "next start",
     "lint": "next lint"
   },

example/pages/index.tsx

@@ -35,7 +35,7 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
     <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>
@@ -50,7 +50,7 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
       <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={500}
         height={500}
         sizes="(max-width: 50rem) 100vw, 50rem"
@@ -63,7 +63,7 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
       </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}
         sizes="(max-width: 50rem) 100vw, 50rem"
@@ -94,7 +94,7 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
       <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={500}
         height={166}
         loader={uploadcareLoader}
@@ -104,14 +104,14 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
       <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}
@@ -140,7 +140,7 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
       />
       <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

@@ -0,0 +1,34 @@
+/**
+ * @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();
+  });
+
+  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();
+  });
+
+  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/__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

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

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) {
@@ -109,6 +112,9 @@ export function uploadcareLoader({
 
     // Return the relative url AS IS if the base path is not set.
     if (!isBasePathSet) {
+      console.warn(
+        'Env variable "NEXT_PUBLIC_UPLOADCARE_APP_BASE_URL" is not set. You should set it to be able to serve local images.'
+      );
       return src;
     }