From a1b3d41712374a4330b6d047d2ab3c5f2b14c790 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 22 Apr 2025 17:08:52 +0800
Subject: [PATCH] fix: clickjacking (#18552)

---
 api/.env.example                              |  5 +++-
 docker/.env.example                           |  3 ++
 docker/docker-compose-template.yaml           |  3 +-
 docker/docker-compose.yaml                    |  2 ++
 web/.env.example                              |  3 ++
 .../app/overview/embedded/index.tsx           | 10 +++----
 web/docker/entrypoint.sh                      |  1 +
 web/middleware.ts                             | 28 +++++++++++++------
 8 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/api/.env.example b/api/.env.example
index 95da531a1d..4f973737c9 100644
--- a/api/.env.example
+++ b/api/.env.example
@@ -430,4 +430,7 @@ CREATE_TIDB_SERVICE_JOB_ENABLED=false
 # Maximum number of submitted thread count in a ThreadPool for parallel node execution
 MAX_SUBMIT_COUNT=100
 # Lockout duration in seconds
-LOGIN_LOCKOUT_DURATION=86400
\ No newline at end of file
+LOGIN_LOCKOUT_DURATION=86400
+
+# Prevent Clickjacking
+ALLOW_EMBED=false
\ No newline at end of file
diff --git a/docker/.env.example b/docker/.env.example
index b21bdc7085..0faf9a337d 100644
--- a/docker/.env.example
+++ b/docker/.env.example
@@ -932,3 +932,6 @@ MAX_SUBMIT_COUNT=100
 
 # The maximum number of top-k value for RAG.
 TOP_K_MAX_VALUE=10
+
+# Prevent Clickjacking
+ALLOW_EMBED=false
\ No newline at end of file
diff --git a/docker/docker-compose-template.yaml b/docker/docker-compose-template.yaml
index 9f1cb3d741..6c48aaf87c 100644
--- a/docker/docker-compose-template.yaml
+++ b/docker/docker-compose-template.yaml
@@ -1,4 +1,4 @@
-x-shared-env: &shared-api-worker-env
+x-shared-env: &shared-api-worker-env 
 services:
   # API service
   api:
@@ -56,6 +56,7 @@ services:
       NEXT_TELEMETRY_DISABLED: ${NEXT_TELEMETRY_DISABLED:-0}
       TEXT_GENERATION_TIMEOUT_MS: ${TEXT_GENERATION_TIMEOUT_MS:-60000}
       CSP_WHITELIST: ${CSP_WHITELIST:-}
+      ALLOW_EMBED: ${ALLOW_EMBED:-false}
       TOP_K_MAX_VALUE: ${TOP_K_MAX_VALUE:-}
       INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH: ${INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH:-}
 
diff --git a/docker/docker-compose.yaml b/docker/docker-compose.yaml
index cece2af76d..bef04e2e59 100644
--- a/docker/docker-compose.yaml
+++ b/docker/docker-compose.yaml
@@ -389,6 +389,7 @@ x-shared-env: &shared-api-worker-env
   CREATE_TIDB_SERVICE_JOB_ENABLED: ${CREATE_TIDB_SERVICE_JOB_ENABLED:-false}
   MAX_SUBMIT_COUNT: ${MAX_SUBMIT_COUNT:-100}
   TOP_K_MAX_VALUE: ${TOP_K_MAX_VALUE:-10}
+  ALLOW_EMBED: ${ALLOW_EMBED:-false}
 
 services:
   # API service
@@ -447,6 +448,7 @@ services:
       NEXT_TELEMETRY_DISABLED: ${NEXT_TELEMETRY_DISABLED:-0}
       TEXT_GENERATION_TIMEOUT_MS: ${TEXT_GENERATION_TIMEOUT_MS:-60000}
       CSP_WHITELIST: ${CSP_WHITELIST:-}
+      ALLOW_EMBED: ${ALLOW_EMBED:-false}
       TOP_K_MAX_VALUE: ${TOP_K_MAX_VALUE:-}
       INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH: ${INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH:-}
 
diff --git a/web/.env.example b/web/.env.example
index e2117ddfd8..7ddf600624 100644
--- a/web/.env.example
+++ b/web/.env.example
@@ -31,3 +31,6 @@ NEXT_PUBLIC_TOP_K_MAX_VALUE=10
 
 # The maximum number of tokens for segmentation
 NEXT_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH=4000
+
+# Default is not allow to embed into iframe to prevent Clickjacking: https://owasp.org/www-community/attacks/Clickjacking
+NEXT_PUBLIC_ALLOW_EMBED=
diff --git a/web/app/components/app/overview/embedded/index.tsx b/web/app/components/app/overview/embedded/index.tsx
index b71a3c3fdf..5d363b421a 100644
--- a/web/app/components/app/overview/embedded/index.tsx
+++ b/web/app/components/app/overview/embedded/index.tsx
@@ -24,7 +24,7 @@ const OPTION_MAP = {
   iframe: {
     getContent: (url: string, token: string) =>
       `<iframe
- src="${url}/chatbot/${token}"
+ src="${url}/chat/${token}"
  style="width: 100%; height: 100%; min-height: 700px"
  frameborder="0"
  allow="microphone">
@@ -35,12 +35,12 @@ const OPTION_MAP = {
       `<script>
  window.difyChatbotConfig = {
   token: '${token}'${isTestEnv
-  ? `,
+        ? `,
   isDev: true`
-  : ''}${IS_CE_EDITION
-  ? `,
+        : ''}${IS_CE_EDITION
+          ? `,
   baseUrl: '${url}'`
-  : ''}
+          : ''}
  }
 </script>
 <script
diff --git a/web/docker/entrypoint.sh b/web/docker/entrypoint.sh
index bad95b6cbe..cddde6be04 100755
--- a/web/docker/entrypoint.sh
+++ b/web/docker/entrypoint.sh
@@ -23,6 +23,7 @@ export NEXT_TELEMETRY_DISABLED=${NEXT_TELEMETRY_DISABLED}
 
 export NEXT_PUBLIC_TEXT_GENERATION_TIMEOUT_MS=${TEXT_GENERATION_TIMEOUT_MS}
 export NEXT_PUBLIC_CSP_WHITELIST=${CSP_WHITELIST}
+export NEXT_PUBLIC_ALLOW_EMBED=${ALLOW_EMBED}
 export NEXT_PUBLIC_TOP_K_MAX_VALUE=${TOP_K_MAX_VALUE}
 export NEXT_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH=${INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH}
 
diff --git a/web/middleware.ts b/web/middleware.ts
index e0f8f3782f..80adc81a65 100644
--- a/web/middleware.ts
+++ b/web/middleware.ts
@@ -3,10 +3,26 @@ import { NextResponse } from 'next/server'
 
 const NECESSARY_DOMAIN = '*.sentry.io http://localhost:* http://127.0.0.1:* https://analytics.google.com googletagmanager.com *.googletagmanager.com https://www.google-analytics.com https://api.github.com'
 
+const wrapResponseWithXFrameOptions = (response: NextResponse, pathname: string) => {
+  // prevent clickjacking: https://owasp.org/www-community/attacks/Clickjacking
+  // Chatbot page should be allowed to be embedded in iframe. It's a feature
+  if (process.env.NEXT_PUBLIC_ALLOW_EMBED !== 'true' && !pathname.startsWith('/chat'))
+    response.headers.set('X-Frame-Options', 'DENY')
+
+  return response
+}
 export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl
+  const requestHeaders = new Headers(request.headers)
+  const response = NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  })
+
   const isWhiteListEnabled = !!process.env.NEXT_PUBLIC_CSP_WHITELIST && process.env.NODE_ENV === 'production'
   if (!isWhiteListEnabled)
-    return NextResponse.next()
+    return wrapResponseWithXFrameOptions(response, pathname)
 
   const whiteList = `${process.env.NEXT_PUBLIC_CSP_WHITELIST} ${NECESSARY_DOMAIN}`
   const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
@@ -33,7 +49,6 @@ export function middleware(request: NextRequest) {
     .replace(/\s{2,}/g, ' ')
     .trim()
 
-  const requestHeaders = new Headers(request.headers)
   requestHeaders.set('x-nonce', nonce)
 
   requestHeaders.set(
@@ -41,17 +56,12 @@ export function middleware(request: NextRequest) {
     contentSecurityPolicyHeaderValue,
   )
 
-  const response = NextResponse.next({
-    request: {
-      headers: requestHeaders,
-    },
-  })
   response.headers.set(
     'Content-Security-Policy',
     contentSecurityPolicyHeaderValue,
   )
 
-  return response
+  return wrapResponseWithXFrameOptions(response, pathname)
 }
 
 export const config = {
@@ -73,4 +83,4 @@ export const config = {
       // ],
     },
   ],
-}
+}
\ No newline at end of file