feat: allow adding remote file allowed url patterns

e2e-tests/adapters/cypress/e2e/remote-file.cy.ts

@@ -222,20 +222,30 @@ for (const config of configs) {
 
       it(`File CDN`, () => {
         cy.get('[data-testid="file-public"]').then(async $urls => {
-          const urls = Array.from(
-            $urls.map((_, $url) => $url.getAttribute("href"))
+          const fileCdnFixtures = Array.from(
+            $urls.map((_, $url) => {
+              return {
+                urlWithoutOrigin: $url.getAttribute("href"),
+                allowed: $url.getAttribute("data-allowed") === "true",
+              }
+            })
           )
 
           // urls is array of href attribute, not absolute urls, so it already is stripped of origin
-          for (const urlWithoutOrigin of urls) {
+          for (const { urlWithoutOrigin, allowed } of fileCdnFixtures) {
             // using Netlify Image CDN
             expect(urlWithoutOrigin).to.match(
               new RegExp(`^${PATH_PREFIX}/_gatsby/file`)
             )
             const res = await fetch(urlWithoutOrigin, {
               method: "HEAD",
             })
-            expect(res.ok).to.be.true
+            if (allowed) {
+              expect(res.ok).to.be.true
+            } else {
+              expect(res.ok).to.be.false
+              expect(res.status).to.be.equal(500)
+            }
           }
         })
       })

e2e-tests/adapters/gatsby-node.ts

@@ -47,6 +47,7 @@ export const createPages: GatsbyNode["createPages"] = async ({
           url
           filename
           publicUrl
+          isAllowed
         }
       }
     }
@@ -138,7 +139,9 @@ export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"]
       addRemoteFilePolyfillInterface(
         schema.buildObjectType({
           name: "MyRemoteFile",
-          fields: {},
+          fields: {
+            isAllowed: `String!`,
+          },
           interfaces: ["Node", "RemoteFile"],
         }),
         {
@@ -148,6 +151,13 @@ export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"]
         }
       )
     )
+
+    if (typeof actions.addRemoteFileAllowedUrl === `function`) {
+      actions.addRemoteFileAllowedUrl([
+        `https://images.unsplash.com/*`,
+        `https://www.gatsbyjs.com/*`,
+      ])
+    }
   }
 
 export const sourceNodes: GatsbyNode["sourceNodes"] = function sourceNodes({
@@ -191,6 +201,16 @@ export const sourceNodes: GatsbyNode["sourceNodes"] = function sourceNodes({
       mimeType: "image/svg+xml",
       filename: "Gatsby-Logo.svg",
       type: `MyRemoteFile`,
+      isAllowed: true,
+    },
+    {
+      // svg is not considered for image cdn - file cdn will be used
+      name: "fileB.svg",
+      url: "https://www.not-allowed.com/not-allowed.svg",
+      mimeType: "image/svg+xml",
+      filename: "Gatsby-Logo.svg",
+      type: `MyRemoteFile`,
+      isAllowed: false,
     },
   ]
 

e2e-tests/adapters/src/pages/routes/remote-file.jsx

@@ -43,7 +43,11 @@ const RemoteFile = ({ data }) => {
         return (
           <div key={node.id}>
             <h2>
-              <a href={node.publicUrl} data-testid="file-public">
+              <a
+                href={node.publicUrl}
+                data-testid="file-public"
+                data-allowed={node.isAllowed}
+              >
                 {node.filename}
               </a>
             </h2>
@@ -91,6 +95,7 @@ export const pageQuery = graphql`
         url
         filename
         publicUrl
+        isAllowed
       }
     }
   }

e2e-tests/adapters/src/pages/routes/ssr/remote-file.jsx

@@ -43,7 +43,11 @@ const RemoteFile = ({ data }) => {
         return (
           <div key={node.id}>
             <h2>
-              <a href={node.publicUrl} data-testid="file-public">
+              <a
+                href={node.publicUrl}
+                data-testid="file-public"
+                data-allowed={node.isAllowed}
+              >
                 {node.filename}
               </a>
             </h2>
@@ -98,6 +102,7 @@ export const pageQuery = graphql`
         url
         filename
         publicUrl
+        isAllowed
       }
     }
   }

e2e-tests/adapters/src/templates/remote-file-from-context.jsx

@@ -42,7 +42,11 @@ const RemoteFile = ({ pageContext: data }) => {
         return (
           <div key={node.id}>
             <h2>
-              <a href={node.publicUrl} data-testid="file-public">
+              <a
+                href={node.publicUrl}
+                data-testid="file-public"
+                data-allowed={node.isAllowed}
+              >
                 {node.filename}
               </a>
             </h2>

packages/gatsby-adapter-netlify/.babelrc

@@ -3,7 +3,7 @@
     [
       "babel-preset-gatsby-package",
       {
-        "keepDynamicImports": ["./src/index.ts"]
+        "keepDynamicImports": ["./src/index.ts", "./src/allowed-remote-urls.ts"]
       }
     ]
   ]

packages/gatsby-adapter-netlify/package.json

@@ -33,6 +33,7 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@netlify/cache-utils": "^5.1.5",
+    "@netlify/config": "^20.10.0",
     "@netlify/functions": "^1.6.0",
     "cookie": "^0.5.0",
     "fastq": "^1.15.0",

packages/gatsby-adapter-netlify/src/allowed-remote-urls.ts

@@ -0,0 +1,54 @@
+import type { Reporter, RemoteFileAllowedUrls } from "gatsby"
+
+export async function handleAllowedRemoteUrlsNetlifyConfig({
+  remoteFileAllowedUrls,
+  reporter,
+}: {
+  remoteFileAllowedUrls: RemoteFileAllowedUrls
+  reporter: Reporter
+}): Promise<void> {
+  const { resolveConfig } = await import(`@netlify/config`)
+  const cfg = await resolveConfig()
+
+  if (cfg?.config) {
+    const allowedUrlsInNetlifyToml: Array<string> =
+      cfg.config.images?.remote_images ?? []
+
+    const allowedUrlsInNetlifyTomlRegexes = allowedUrlsInNetlifyToml.map(
+      regexSource => new RegExp(regexSource)
+    )
+
+    const missingAllowedUrlsInNetlifyToml: Array<string> = []
+    for (const remoteFileAllowedUrl of remoteFileAllowedUrls) {
+      // test if url pattern already passes one of the regexes in netlify.toml
+      const isAlreadyAllowed = allowedUrlsInNetlifyTomlRegexes.some(
+        allowedRegex => allowedRegex.test(remoteFileAllowedUrl.urlPattern)
+      )
+
+      if (!isAlreadyAllowed) {
+        missingAllowedUrlsInNetlifyToml.push(remoteFileAllowedUrl.regexSource)
+      }
+    }
+
+    if (missingAllowedUrlsInNetlifyToml.length > 0) {
+      const entriesToAddToToml = `${missingAllowedUrlsInNetlifyToml
+        .map(
+          missingAllowedUrlInNetlifyToml =>
+            `  ${JSON.stringify(missingAllowedUrlInNetlifyToml)}`
+        )
+        .join(`,\n`)},\n`
+
+      if (typeof cfg.config.images?.remote_images === `undefined`) {
+        reporter.warn(
+          `Missing allowed URLs in your Netlify configuration. Add following to your netlify.toml:\n\`\`\`toml\n[images]\nremote_images = [\n${entriesToAddToToml}]\n\`\`\``
+        )
+      } else {
+        reporter.warn(
+          `Missing allowed URLs in your Netlify configuration. Add following entries to your existing \`images.remote_images\` configuration in netlify.toml:\n\`\`\`toml\n${entriesToAddToToml}\`\`\``
+        )
+      }
+    }
+  } else {
+    reporter.verbose(`[gatsby-adapter-netlify] no netlify.toml found`)
+  }
+}

packages/gatsby-adapter-netlify/src/file-cdn-handler.ts

@@ -3,6 +3,8 @@ import * as path from "path"
 
 import packageJson from "gatsby-adapter-netlify/package.json"
 
+import type { RemoteFileAllowedUrls } from "gatsby"
+
 export interface IFunctionManifest {
   version: 1
   functions: Array<
@@ -27,8 +29,10 @@ export interface IFunctionManifest {
 
 export async function prepareFileCdnHandler({
   pathPrefix,
+  remoteFileAllowedUrls,
 }: {
   pathPrefix: string
+  remoteFileAllowedUrls: RemoteFileAllowedUrls
 }): Promise<void> {
   const functionId = `file-cdn`
 
@@ -48,21 +52,20 @@ export async function prepareFileCdnHandler({
   )
 
   const handlerSource = /* typescript */ `
-    import type { Context } from "@netlify/edge-functions"
+    const allowedUrlPatterns = [${remoteFileAllowedUrls.map(
+      allowedUrl => `new RegExp(\`${allowedUrl.regexSource}\`)`
+    )}]
 
-    export default async (req: Request, context: Context): Promise<Response> => {
+    export default async (req: Request): Promise<Response> => {
       const url = new URL(req.url)
       const remoteUrl = url.searchParams.get("url")
-
-      // @todo: use allowed remote urls to decide wether request should be allowed
-      // blocked by https://github.com/gatsbyjs/gatsby/pull/38719
-      const isAllowed = true
+
+      const isAllowed = allowedUrlPatterns.some(allowedUrlPattern => allowedUrlPattern.test(remoteUrl))
       if (isAllowed) {
-        console.log(\`URL allowed\`, { remoteUrl })
         return fetch(remoteUrl);
       } else {
         console.error(\`URL not allowed: \${remoteUrl}\`)
-        return new Response("Not allowed", { status: 403 })
+        return new Response("Bad request", { status: 500 })
       }
     }
   `

packages/gatsby-adapter-netlify/src/file-cdn-url-generator.ts

@@ -29,8 +29,8 @@ export const generateFileUrl: FileCdnUrlGeneratorFn = function generateFileUrl(
 
     baseURL.searchParams.append(`url`, source.url)
     baseURL.searchParams.append(`cd`, source.internal.contentDigest)
-    return `${baseURL.pathname}${baseURL.search}`
   }
+
   return `${baseURL.pathname}${baseURL.search}`
 }
 

packages/gatsby-adapter-netlify/src/index.ts

@@ -4,6 +4,7 @@ import { prepareFunctionVariants } from "./lambda-handler"
 import { prepareFileCdnHandler } from "./file-cdn-handler"
 import { handleRoutesManifest } from "./route-handler"
 import packageJson from "gatsby-adapter-netlify/package.json"
+import { handleAllowedRemoteUrlsNetlifyConfig } from "./allowed-remote-urls"
 
 interface INetlifyCacheUtils {
   restore: (paths: Array<string>) => Promise<boolean>
@@ -84,9 +85,19 @@ const createNetlifyAdapter: AdapterInit<INetlifyAdapterOptions> = options => {
       functionsManifest,
       headerRoutes,
       pathPrefix,
+      remoteFileAllowedUrls,
+      reporter,
     }): Promise<void> {
       if (useNetlifyImageCDN) {
-        await prepareFileCdnHandler({ pathPrefix })
+        await handleAllowedRemoteUrlsNetlifyConfig({
+          remoteFileAllowedUrls,
+          reporter,
+        })
+
+        await prepareFileCdnHandler({
+          pathPrefix,
+          remoteFileAllowedUrls,
+        })
       }
 
       const { lambdasThatUseCaching } = await handleRoutesManifest(

packages/gatsby-source-contentful/src/gatsby-node.js

@@ -43,7 +43,10 @@ const validateContentfulAccess = async pluginOptions => {
   return undefined
 }
 
-export const onPreInit = async ({ store, reporter }) => {
+export const onPreInit = async (
+  { store, reporter, actions },
+  pluginOptions
+) => {
   // if gatsby-plugin-image is not installed
   try {
     await import(`gatsby-plugin-image/graphql-utils`)
@@ -69,6 +72,12 @@ export const onPreInit = async ({ store, reporter }) => {
       },
     })
   }
+
+  if (typeof actions?.addRemoteFileAllowedUrl === `function`) {
+    actions.addRemoteFileAllowedUrl(
+      `https://images.ctfassets.net/${pluginOptions.spaceId}/*`
+    )
+  }
 }
 
 export const pluginOptionsSchema = ({ Joi }) =>

packages/gatsby-source-drupal/src/gatsby-node.ts

@@ -132,8 +132,12 @@ function gracefullyRethrow(activity, error) {
   }
 }
 
-exports.onPreBootstrap = (_, pluginOptions) => {
+exports.onPreBootstrap = ({ actions }, pluginOptions) => {
   setOptions(pluginOptions)
+
+  if (typeof actions?.addRemoteFileAllowedUrl === `function`) {
+    actions.addRemoteFileAllowedUrl(urlJoin(pluginOptions.baseUrl, `*`))
+  }
 }
 
 exports.sourceNodes = async (

packages/gatsby-source-wordpress/src/gatsby-node.ts

@@ -24,6 +24,7 @@ exports.createSchemaCustomization = runApiSteps(
     steps.ensurePluginRequirementsAreMet,
     steps.ingestRemoteSchema,
     steps.createSchemaCustomization,
+    steps.addRemoteFileAllowedUrl,
   ],
   `createSchemaCustomization`
 )

packages/gatsby-source-wordpress/src/steps/add-remote-file-allowed-url.ts

@@ -0,0 +1,21 @@
+import nodePath from "path"
+import { getStore } from "~/store"
+
+import type { Step } from "~/utils/run-steps"
+
+export const addRemoteFileAllowedUrl: Step = ({ actions }): void => {
+  if (typeof actions?.addRemoteFileAllowedUrl !== `function`) {
+    return
+  }
+
+  const { wpUrl } = getStore().getState().remoteSchema
+
+  if (!wpUrl) {
+    return
+  }
+
+  const wordpressUrl = new URL(wpUrl)
+  wordpressUrl.pathname = nodePath.posix.join(wordpressUrl.pathname, `*`)
+
+  actions.addRemoteFileAllowedUrl(wordpressUrl.href)
+}

packages/gatsby-source-wordpress/src/steps/index.ts

@@ -21,6 +21,7 @@ export { logPostBuildWarnings } from "~/steps/log-post-build-warnings"
 export { imageRoutes } from "~/steps/image-routes"
 
 export { setRequestHeaders } from "./set-request-headers"
+export { addRemoteFileAllowedUrl } from "./add-remote-file-allowed-url"
 
 export {
   hideAuthPluginOptions,