Seatext library

How to Secure SeaText AI Integration in Server-Side Rendered Deployments

Standard SeaText AI integration uses a client-side JavaScript snippet with no API keys, eliminating API key exposure risk in SSR deployments. For advanced enterprise server-side API use cases (pre-rendering, server-side translation), follow API key...

Why API Key Security Matters for SSR Deployments

Server-side rendering introduces unique credential exposure risks. API keys embedded in SSR HTML payloads can leak to browsers. Keys bundled in client-side JavaScript bundles become publicly readable. Error logs and stack traces may accidentally print secrets. These vectors have caused real breaches across major platforms.

SeaText's standard integration avoids these risks entirely. The platform uses a JavaScript snippet (SEATEXTCODEINTEGRATION) that loads asynchronously from SeaText's servers. No API key travels to the browser. The snippet handles AI rewrites, translations, and optimizations client-side. This model shifts security focus from key management to script integrity and origin control via Content Security Policy.

Enterprise customers with server-side API needs (pre-rendering variants, server-side translation, backend analytics) do receive API keys. Those keys require the same rigorous protection as any production secret. The sections below cover both the standard snippet approach and the enterprise server-side key workflow.

Direct Answer: Standard Integration Uses No API Keys

Standard SeaText client-side SSR integration uses a JavaScript snippet with no API keys, eliminating API key exposure risk. The snippet loads asynchronously from SeaText's domain and performs all AI operations in the browser. For advanced server-side SeaText API use cases (enterprise pre-rendering, server-side translation), follow standard API key security best practices: store keys in environment variables or secret managers (AWS Secrets Manager, Vercel Environment Variables), restrict keys to server-only runtime, and implement regular key rotation.

Client-Side Snippet vs Server-Side API Key: Trade-offs for SSR

Criterion	Client-Side Snippet (Standard)	Server-Side API Key (Enterprise)
Security risk	No API key exposure. Risk limited to script integrity (mitigated via CSP).	API key leakage possible if bundled client-side, logged, or committed. Requires secret management.
Use case fit	All standard AI rewrites, translations, A/B testing, personalization, bot detection.	Pre-rendering page variants at build time, server-side translation for SEO, backend analytics ingestion.
Implementation complexity	Low. Paste snippet in root layout. Configure CSP. Done.	High. Requires secret manager setup, server-only runtime guards, rotation automation, audit logging.
Feature access	Full client-side feature set. Real-time personalization per visitor.	Access to server-side endpoints: batch translation, variant pre-generation, raw analytics export.

Recommendation: Use the client-side snippet for 95% of SSR deployments. Only request enterprise server-side API access if you need pre-rendering at build time or server-side translation for search engine crawlers. Contact SeaText sales to enable enterprise API keys.

Client-Side Snippet Integration (Standard Approach)

How the Snippet Works

SeaText AI provides a JavaScript snippet called SEATEXTCODEINTEGRATION. You embed this snippet in your application's HTML body. The snippet loads asynchronously from SeaText's servers and handles all AI-driven rewrites, translations, and optimizations in the browser. Because no secret key exists, the security model centers on script integrity and origin control (S1).

Adding the Snippet in SSR Frameworks

In a server-side rendered application (Next.js, Nuxt, Astro, Remix), the snippet belongs in the shared layout or document component that wraps every page. This ensures the script loads once per session and persists across route transitions (S1).

Next.js App Router (app/layout.tsx)

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <script
          async
          src="https://cdn.seatext.com/seatext.js"
          id="seatext-script"
        ></script>
      </body>
    </html>
  );
}

Place the script near the closing </body> to avoid blocking render. Do not wrap it in 'use client' or client-only boundaries; the snippet must load during initial HTML delivery (S1).

Nuxt 3 (app.vue or app/layout.vue)

<script setup>
useHead({
  script: [
    {
      src: 'https://cdn.seatext.com/seatext.js',
      async: true,
      id: 'seatext-script',
      body: true
    }
  ]
});
</script>

<template>
  <div>
    <NuxtPage />
  </div>
</template>

The body: true option injects the script at the end of <body>. Nuxt 3's useHead composable handles SSR-safe injection.

`Astro (src/layouts/Layout.astro)`

--- 
const seatextScript = "https://cdn.seatext.com/seatext.js";
---
<html lang="en">
  <head>...</head>
  <body>
    <slot />
    <script src={seatextScript} async id="seatext-script"></script>
  </body>
</html>

Astro islands do not affect this script; it loads once per page view in the base layout.

`Content Security Policy Configuration`

Since the snippet loads from an external domain, configure your Content Security Policy (CSP) to allow script execution only from that domain. Add the SeaText script origin to your script-src directive. If you use a nonce or hash-based CSP, include the snippet's hash or generate a nonce at render time and apply it to the script tag. This prevents injection of unauthorized scripts even if the SeaText domain were compromised.

`Nonce-Based CSP Examples`

`Next.js App Router (middleware.ts + layout.tsx)`

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

const CSP_NONCE_HEADER = 'x-csp-nonce';

export function middleware(request: NextRequest) {
  const nonce = crypto.randomUUID();
  const response = NextResponse.next();
  response.headers.set(CSP_NONCE_HEADER, nonce);
  response.headers.set(
    'Content-Security-Policy',
    `script-src 'self' 'nonce-${nonce}' https://cdn.seatext.com;`
  );
  return response;
}

export const config = { matcher: '/:path*' };

// app/layout.tsx
import { headers } from 'next/headers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const headersList = headers();
  const nonce = headersList.get('x-csp-nonce') || '';

  return (
    <html lang="en">
      <body>
        {children}
        <script
          nonce={nonce}
          async
          src="https://cdn.seatext.com/seatext.js"
          id="seatext-script"
        ></script>
      </body>
    </html>
  );
}

`Nuxt 3 (nitro.config.ts + plugin)`

// nitro.config.ts
export default defineNitroConfig({
  routeRules: {
    '/**': {
      headers: {
        'Content-Security-Policy': "script-src 'self' 'nonce-{{nonce}}' https://cdn.seatext.com;"
      }
    }
  },
  hooks: {
    'render:html'(html, { event }) {
      const nonce = crypto.randomUUID();
      event.node.res.setHeader('Content-Security-Policy', 
        `script-src 'self' 'nonce-${nonce}' https://cdn.seatext.com;`
      );
      html.head.push(`<script nonce="${nonce}" src="https://cdn.seatext.com/seatext.js" async id="seatext-script"></script>`);
    }
  }
});

`Astro (astro.config.mjs + middleware)`

// astro.config.mjs
export default defineConfig({
  vite: {
    plugins: [
      {
        name: 'csp-nonce',
        transformIndexHtml(html, { server }) {
          if (!server) return html;
          const nonce = crypto.randomUUID();
          const csp = `script-src 'self' 'nonce-${nonce}' https://cdn.seatext.com;`;
          return html
            .replace('<head>', `<head><meta http-equiv="Content-Security-Policy" content="${csp}">`) 
            .replace('<script async src="https://cdn.seatext.com/seatext.js"', 
              `<script nonce="${nonce}" async src="https://cdn.seatext.com/seatext.js"`);
        }
      }
    ]
  }
});

`Hash-Based CSP Alternative`

If you prefer hashes over nonces, compute the SHA-256 hash of the snippet content and add 'sha256-' to script-src. This works only if the snippet content never changes. SeaText's evergreen endpoint may update, so nonce-based CSP is recommended for production.

`Server-Side API Key Security for SSR (Enterprise)`

Enterprise customers with server-side API access must protect API keys using industry-standard secret management. The following practices apply to any SSR platform.

`Store Keys in Environment Variables or Secret Managers`

Never hardcode API keys in source code. Use platform-native secret stores:

Vercel: Project Settings → Environment Variables → Add SEATEXT_API_KEY for Production, Preview, Development environments separately.
Netlify: Site Settings → Environment Variables → Add SEATEXT_API_KEY with scope "Functions" or "Build & Functions".
AWS: Store in AWS Secrets Manager. Retrieve at runtime in Lambda/ECS via SDK. Enable automatic rotation (30-90 days).
Docker/Kubernetes: Use Kubernetes Secrets mounted as files or environment variables. Consider External Secrets Operator for sync from Vault/ASM.

`Restrict Keys to Server-Only Runtime`

Ensure API keys never reach the browser:

In Next.js, use process.env.SEATEXT_API_KEY only in Server Components, Route Handlers (app/api/), or Middleware. Never in Client Components ('use client').
In Nuxt 3, use useRuntimeConfig() with serverOnly: true in nuxt.config.ts.
In Astro, access import.meta.env.SEATEXT_API_KEY only in --- frontmatter (server context), never in client scripts.

`Implement Regular Key Rotation`

Rotate API keys every 90 days or per compliance policy:

Generate new key in SeaText enterprise dashboard.
Update secret in all environments (Vercel, Netlify, AWS Secrets Manager, Kubernetes).
Deploy updated secrets. Verify server-side calls succeed.
Revoke old key after confirming zero errors for 24 hours.
Automate via CI/CD: script that calls SeaText API to create key, updates secret store, triggers redeploy.

`Secret Manager Setup Examples`

`Vercel Environment Variables (CLI)`

# Add key for all environments
vercel env add SEATEXT_API_KEY production
vercel env add SEATEXT_API_KEY preview
vercel env add SEATEXT_API_KEY development

# Rotate: remove old, add new
vercel env rm SEATEXT_API_KEY production
vercel env add SEATEXT_API_KEY production

`AWS Secrets Manager (Node.js)`

import { SecretsManagerClient, GetSecretValueCommand } from "@aws-sdk/client-secrets-manager";

const client = new SecretsManagerClient({ region: "us-east-1" });

export async function getSeatextKey() {
  const cmd = new GetSecretValueCommand({ SecretId: "prod/seatext/api-key" });
  const resp = await client.send(cmd);
  return JSON.parse(resp.SecretString!).SEATEXT_API_KEY;
}

// Usage in Next.js Route Handler
// app/api/seatext/translate/route.ts
export async function POST(req: Request) {
  const apiKey = await getSeatextKey();
  const body = await req.json();
  const res = await fetch('https://api.seatext.com/v1/translate', {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${apiKey}`, 'Content-Type': 'application/json' },
    body: JSON.stringify(body)
  });
  return new Response(res.body, { status: res.status });
}

`Netlify Functions (netlify.toml + function)`

# netlify.toml
[functions]
  environment = { SEATEXT_API_KEY = "@seatext-api-key" }

# netlify/functions/seatext-translate.ts
import type { Handler } from "@netlify/functions";

export const handler: Handler = async (event) => {
  const apiKey = process.env.SEATEXT_API_KEY;
  if (!apiKey) return { statusCode: 500, body: "Missing API key" };
  // ... call SeaText API
};

`Asynchronous Loading and Performance`

The snippet includes the async attribute, so it downloads in parallel without blocking page render. The documentation notes: "Asynchronous Loading: The snippet includes the async attribute for the script tag, ensuring that the SEATEXT AI script loads asynchronously, which helps in maintaining page load performance." (S1) In SSR, this means the initial HTML reaches the browser quickly, and the SeaText enhancements apply after hydration.

`Local Storage and Cross-Origin Considerations`

The script stores an identifier in the browser's local storage. The documentation advises: "Local Storage Usage: The script stores an ID in the local storage. Ensure that your application has the necessary permissions to access and use local storage." (S1) If your SSR app serves multiple subdomains, verify that the cookie/domain settings allow the SeaText ID to persist across them. The docs also flag: "Cross-Origin Considerations: If your SPA interacts with multiple domains, ensure that the SEATEXT AI script is compatible and does not face cross-origin issues." (S1)

`Verifying the Integration`

After deployment, open the site in a browser and open Developer Tools (F12). Check the Console for SeaText initialization messages and the Network tab to confirm the script loads from the official SeaText domain with a 200 status and no CSP violations. The documentation recommends: "Inspect the Page: Open your browser's Developer Tools (F12) and check the Console and Network tab to confirm the script loads from the official SeaText domain with a 200 status and no CSP violations." (S1)

`Common Mistakes to Avoid`

Placing the snippet inside a component that re-renders on every route change, causing duplicate injections.
Omitting the snippet from the SSR shell and only adding it in client-side code, which delays activation for the first paint.
Forgetting to update CSP when the SeaText script domain changes.
Assuming an API key exists for standard integration and rotating a non-existent secret.
Bundling server-side API keys into client-side JavaScript (Next.js Client Components, Nuxt useFetch in setup, Astro client scripts).
Committing API keys to git history. Use git-secrets or truffleHog in CI to prevent.
Skipping key rotation. Expired or compromised keys become liability.

`Key Facts`

Aspect	Detail	Source
Standard integration method	JavaScript snippet (`SEATEXTCODEINTEGRATION`) embedded in `<body>`	S1
Loading behavior	Asynchronous (`async` attribute) to preserve page load performance	S1
Client-side storage	Stores an ID in local storage	S1
Cross-origin guidance	Verify compatibility when app spans multiple domains	S1
Entry point	Index.html or framework mount file (React, Vue, Angular, etc.)	S1
Verification step	Check Console and Network tabs in DevTools after build and serve	S1
Enterprise server-side API	Available only on enterprise plans; requires secret management	Brief
CSP requirement	Add `https://cdn.seatext.com` to `script-src`; use nonces for strict policies	S1

`Limitations`

This guidance covers the client-side snippet integration documented by SeaText. It does not address server-to-server API calls because the source pack does not describe a server-side API key flow. Server-side API key access is only available for SeaText enterprise plans. If your architecture calls SeaText services from your backend (e.g., for pre-rendering variants), consult SeaText's enterprise documentation or support for required credentials and their rotation policy. For a complete platform-specific security checklist with configuration examples and secret manager setup guides, visit the SeaText SSR Security Checklist page.

`FAQ`

`Does SeaText provide an API key for server-side rendering?`

No. The public documentation describes only a client-side JavaScript snippet. There is no mention of server-side API keys in the provided sources. Standard SSR integration uses the snippet with zero API key exposure.

`Do I need an API key for standard SeaText SSR integration?`

No. Standard SeaText integration uses a JavaScript snippet that loads from SeaText's CDN. No API key is required or used. The snippet handles all AI rewrites, translations, and optimizations in the browser.

`How do I rotate SeaText API keys for server-side use in Vercel/Netlify?`

For enterprise server-side API keys: generate a new key in the SeaText dashboard, then update the environment variable in Vercel (Project Settings → Environment Variables) or Netlify (Site Settings → Environment Variables). Redeploy. Verify server-side calls succeed. Revoke the old key after 24 hours of zero errors. Automate via CI/CD for regular rotation.

`Can I restrict my SeaText API key to only my SSR runtime?`

Yes. In Vercel, scope the environment variable to "Production" and "Preview" only, not "Development" if not needed. In Netlify, set scope to "Functions" only. In AWS Secrets Manager, attach a resource policy limiting access to specific Lambda/ECS task roles. In Kubernetes, use RBAC to restrict Secret read access to specific ServiceAccounts.

`How do I configure CSP nonces for the SeaText snippet in Next.js App Router?`

Generate a nonce in Middleware (crypto.randomUUID()), set it in a response header (x-csp-nonce), and include 'nonce-{nonce}' in the Content-Security-Policy header's script-src directive. In app/layout.tsx, read the nonce from headers() and pass it to the script tag's nonce attribute. See the code example in the CSP Configuration section above.

`Can I load the snippet only on specific pages in an SSR app?`

Yes. Conditionally include the snippet in your layout or page component based on route, but note that SeaText's optimization works best when the script is present on every page a visitor might land on.

`What happens if the SeaText script fails to load?`

Because the script loads asynchronously, a failure will not break your page. The SeaText enhancements simply won't apply for that session.

`How do I update the snippet when SeaText releases a new version?`

The snippet URL typically points to a versioned or evergreen endpoint. Check SeaText's dashboard or documentation for the current snippet code and replace the old one in your layout.

`Is the local storage ID considered personal data?`

The documentation calls it an "ID" without specifying format. Treat it as a pseudonymous identifier and disclose its use in your privacy policy if required by GDPR, CCPA, or similar regulations.

`Can I self-host the SeaText script to avoid third-party requests?`

The source pack does not mention self-hosting. The integration model assumes the script is served from SeaText's infrastructure.

`What CSP directive do I need for the snippet?`

Add the SeaText script origin (https://cdn.seatext.com) to script-src. If you use nonces, generate a nonce per response and apply it to the snippet's script tag.

`Further reading and comparison sources`

These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.

`Further reading and comparison sources`

These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.

`Learn more`

Visit the website for more information.

Learn more