Implementation:Langgenius Dify Security Proxy

Knowledge Sources	Langgenius_Dify
Domains	Frontend, Security, Middleware
Last Updated	2026-02-08 00:00 GMT

Overview

Next.js middleware proxy that enforces Content Security Policy headers, generates per-request nonces, and applies X-Frame-Options protection against clickjacking attacks.

Description

The Security Proxy module is a Next.js middleware function that processes incoming requests to apply security headers. It provides two layers of protection:

X-Frame-Options (Clickjacking Prevention):

• Sets X-Frame-Options: DENY on all responses except for chatbot, workflow, completion, and webapp-signin pages that need to be embeddable in iframes.
• Respects the NEXT_PUBLIC_ALLOW_EMBED environment variable to optionally skip X-Frame-Options entirely.

Content Security Policy (CSP):

• Only enabled when NEXT_PUBLIC_CSP_WHITELIST is set and NODE_ENV is production.
• Generates a unique nonce per request using crypto.randomUUID() and base64-encodes it.
• Builds a comprehensive CSP header covering default-src, connect-src, script-src, style-src, worker-src, media-src, img-src, font-src, object-src, base-uri, and form-action directives.
• Includes necessary domains for Sentry, Google Analytics, Google Tag Manager, GitHub API, and Amplitude analytics.
• Sets upgrade-insecure-requests for HTTPS enforcement.
• The nonce is also passed as an x-nonce request header for downstream use by inline scripts.

The route matcher excludes Next.js static files, image optimization endpoints, and the favicon from middleware processing.

Usage

This middleware runs automatically on matched routes in the Next.js request pipeline. It is imported and used from the web/middleware.ts file. Configure it via environment variables for CSP whitelisting and embed permissions.

Code Reference

Source Location

• Repository: Langgenius_Dify
• File: web/proxy.ts

Signature

export function proxy(request: NextRequest): NextResponse

export const config: {
  matcher: Array<{ source: string }>
}

Import

import { proxy, config } from '@/proxy'

I/O Contract

Inputs

Name	Type	Required	Description
request	NextRequest	Yes	The incoming Next.js request object
NEXT_PUBLIC_CSP_WHITELIST	string	No	Space-separated list of trusted domains for CSP
NEXT_PUBLIC_ALLOW_EMBED	string	No	Set to "true" to skip X-Frame-Options on all routes
NODE_ENV	string	Auto	Must be "production" for CSP enforcement

Outputs

Name	Type	Description
NextResponse	NextResponse	Modified response with security headers applied
Content-Security-Policy	string	CSP header value (when CSP whitelist is configured)
X-Frame-Options	string	Set to "DENY" for non-embeddable routes
x-nonce	string	Base64-encoded nonce for inline script authorization

Usage Examples

// In web/middleware.ts
import { proxy } from './proxy'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  return proxy(request)
}

export { config } from './proxy'

# Enable CSP in production
NEXT_PUBLIC_CSP_WHITELIST="https://api.example.com https://cdn.example.com" pnpm build

# Allow embedding in iframes
NEXT_PUBLIC_ALLOW_EMBED=true pnpm build

Related Pages

• Langgenius_Dify_Next_Config - Next.js build configuration that works alongside the middleware
• Langgenius_Dify_Embed_Widget - Embeddable chatbot widget that relies on iframe-friendly CSP settings