#dynamic nextjs server action allowedOrigins

1 messages · Page 1 of 1 (latest)

slender oasisBOT
#

Hi @dark horizon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Next.js, the allowedOrigins option in the serverActions configuration is used to specify a list of safe origin domains from which Server Actions can be invoked. This is a security measure to prevent Cross-Site Request Forgery (CSRF) attacks. By default, only the same origin is allowed.

If you have a use case where your SaaS works with many custom domains, one custom domain per customer, you can use wildcard patterns in the allowedOrigins configuration. This feature is available in the canary version of Next.js.

Here is an example of how to use wildcards:

module.exports = {
  experimental: {
    serverActions: {
      allowedOrigins: ['*.mydomain.com'],
    },
  },
}

In this example, any subdomain of mydomain.com is allowed. Replace mydomain.com with your domain.

Please note that the wildcard pattern should match the pattern of your users' custom domains. If the pattern is unpredictable, this approach may not work.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@dark horizon kapa.ai is still learning and improving, please let us know how it did by reacting below

dark horizon
#

@slender oasis can i pass allowedOrigins: ["*"]

slender oasisBOT
#

Let me check the knowledge base for you. One moment! :books:

#

No, passing allowedOrigins: ["*"] is not supported in Next.js. The allowedOrigins configuration in serverActions is designed to prevent Cross-Site Request Forgery (CSRF) attacks by only allowing Server Actions to be invoked from specific origins. Using a wildcard "*" would defeat this security measure by allowing any origin.

If you need to allow multiple origins, you should list them explicitly in the allowedOrigins array. If the origins include subdomains, you can use a wildcard for the subdomain part, like *.mydomain.com.

Here is an example:

module.exports = {
  experimental: {
    serverActions: {
      allowedOrigins: ['mydomain.com', '*.mydomain.com'],
    },
  },
}

In this example, mydomain.com and any subdomain of mydomain.com are allowed.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@dark horizon kapa.ai is still learning and improving, please let us know how it did by reacting below

dark horizon
#

@slender oasis my site allows user to assign custom domain apart from the base subdomain urls

so how do i support the custom domains

slender oasisBOT
#

Let me check the knowledge base for you. One moment! :books:

#

To support custom domains in your Next.js application, you can follow these steps:

  1. Allow users to add custom domains: You can provide an interface for your users to add their custom domains. Once a user adds a custom domain, you will need to store this information in your database.

  2. Handle duplicate content between subdomain and custom domain: Since you are generating two different sites for subdomains and custom domains, you can improve on this by:

    • Redirecting subdomain to custom domain if it exists. You can do this by adding a section in your code that performs the redirection.
    • Setting a canonical URL that points to the custom domain if it exists. This helps search engines understand that the custom domain is the primary domain.

  3. Allow adding and redirecting www. subdomains to apex domain: As a platform owner, you might want to allow your users to add www. subdomains along with their apex domain (and have the former redirect to the latter). To achieve this, you will need to make an additional API call to the Vercel Domains API to add the www. version for a domain and set a redirect attribute to make it redirect to the apex domain.

  4. Configure subdomains: You can configure subdomains either with a CNAME record or through the Nameservers method.

  5. Add custom domains for each project: You can add custom domains for each project in your Next.js application.

Remember to update the allowedOrigins configuration in your serverActions to include the new custom domains.

#

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: