chore: add turnstile for recaptcha (#289)

Author: mxschmitt

control-service/main.go

@@ -125,6 +125,14 @@ func (s *server) initializeHttpServer() {
 	s.server.POST("/service/control/share/create", s.handleShareCreate)
 }
 
+func getTurnstileIP(c echo.Context) string {
+	cfConnectingIP := c.Request().Header.Get("CF-Connecting-IP")
+	if cfConnectingIP != "" {
+		return cfConnectingIP
+	}
+	return c.RealIP()
+}
+
 func (s *server) handleRun(c echo.Context) error {
 	var req *workertypes.WorkerRequestPayload
 	if err := c.Bind(&req); err != nil {
@@ -138,6 +146,14 @@ func (s *server) handleRun(c echo.Context) error {
 		})
 	}
 
+	log.Printf("Validating turnstile")
+	if err := ValidateTurnstile(c.Request().Context(), req.Token, getTurnstileIP(c), os.Getenv("TURNSTILE_SECRET_KEY")); err != nil {
+		log.Printf("Could not validate turnstile: %v", err)
+		return c.JSON(http.StatusUnauthorized, echo.Map{
+			"error": err.Error(),
+		})
+	}
+	log.Printf("Validated turnstile successfully")
 	log.Printf("Obtaining worker")
 	var worker *Worker
 	select {

control-service/turnstile.go

@@ -0,0 +1,64 @@
+package main
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"fmt"
+	"log"
+	"net/http"
+	"time"
+)
+
+type TurnstileResponse struct {
+    Success    bool     `json:"success"`
+    ErrorCodes []string `json:"error-codes,omitempty"`
+}
+
+var turnStileHttpClient = &http.Client{Timeout: 15 * time.Second}
+
+func ValidateTurnstile(ctx context.Context, token string, remoteIP string, secretKey string) error {
+	if secretKey == "" {
+		log.Printf("warning: Turnstile secretKey is empty, skipping validation")
+		return nil
+	}
+	if remoteIP == "" {
+		log.Printf("warning: Turnstile remoteIP is empty, skipping validation")
+		return nil
+	}
+    requestBody, err := json.Marshal(map[string]string{
+        "secret":   secretKey,
+        "response": token,
+        "remoteip": remoteIP,
+    })
+    if err != nil {
+        return fmt.Errorf("failed to marshal request body: %w", err)
+    }
+
+    req, err := http.NewRequestWithContext(ctx, "POST", "https://challenges.cloudflare.com/turnstile/v0/siteverify", bytes.NewBuffer(requestBody))
+    if err != nil {
+        return fmt.Errorf("failed to create request: %w", err)
+    }
+    req.Header.Set("Content-Type", "application/json")
+
+    resp, err := turnStileHttpClient.Do(req)
+    if err != nil {
+        return fmt.Errorf("failed to send request: %w", err)
+    }
+    defer resp.Body.Close()
+
+    if resp.StatusCode != http.StatusOK {
+        return fmt.Errorf("unexpected status code: %v", resp.StatusCode)
+    }
+
+    var result TurnstileResponse
+    if err := json.NewDecoder(resp.Body).Decode(&result); err != nil {
+        return fmt.Errorf("failed to parse response: %w", err)
+    }
+
+    if !result.Success {
+        return fmt.Errorf("turnstile validation failed: %v", result.ErrorCodes)
+    }
+
+    return nil
+}

frontend/index.html

@@ -8,6 +8,7 @@
     <meta name="description" content="An interactive playground for Playwright with various examples available."/>
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎭</text></svg>" />
     <title>Try Playwright</title>
+    <script defer src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-34156117-11"></script>
     <script>
       if (!window.location.search.includes("no-analytics")) {

frontend/src/components/App/index.tsx

@@ -12,26 +12,40 @@ import styles from './index.module.css'
 import CodeLanguageSelector from '../CodeLanguageSelector';
 import useDarkMode from '../../hooks/useDarkMode';
 
+const VITE_TURNSTILE_SITEKEY = '0x4AAAAAAA_K0T_2LZ0rgUtv';
+
 const App: React.FunctionComponent = () => {
   const { code, onChangeRightPanelMode, codeLanguage, onLanguageChange } = useContext(CodeContext)
   const [loading, setLoading] = useState<boolean>(false)
   const [resp, setResponse] = useState<ExecutionResponse|null>(null)
   const handleExecutionRef = useRef<() => Promise<void>>()
   const [darkMode] = useDarkMode()
+  const turnstileRef = useRef<HTMLDivElement>(null)
 
   const handleExecution = async (): Promise<void> => {
     setLoading(true)
     setResponse(null)
 
     trackEvent()
-    setResponse(await runCode(code, codeLanguage))
+    const turnstileToken = await new Promise<string>((resolve) => {
+      try {
+        (window as any).turnstile.reset();
+      } catch (error) {}
+      (window as any).turnstile.execute(turnstileRef.current, {
+        sitekey: VITE_TURNSTILE_SITEKEY,
+        callback: (token: string) => resolve(token),
+        'error-callback': () => resolve(''),
+      });
+    });
+    setResponse(await runCode(code, codeLanguage, turnstileToken))
     setLoading(false)
     onChangeRightPanelMode(false)
   }
   handleExecutionRef.current = handleExecution
 
   return (
     <CustomProvider theme={darkMode ? 'dark' : 'light'}>
+      <div ref={turnstileRef} style={{ display: 'none' }} />
       <Header />
       <Grid fluid className={styles.grid}>
         <Col xs={24} md={12}>

frontend/src/utils.ts

@@ -16,7 +16,7 @@ export type ExecutionResponse = Partial<{
   output: string;
 }>
 
-export const runCode = async (code: string, codeLanguage: CodeLanguage): Promise<ExecutionResponse> => {
+export const runCode = async (code: string, codeLanguage: CodeLanguage, turnstileToken: string): Promise<ExecutionResponse> => {
   if (codeLanguage === CodeLanguage.PLAYWRIGHT_TEST)
     codeLanguage = CodeLanguage.JAVASCRIPT
   const resp = await fetch("/service/control/run", {
@@ -27,6 +27,7 @@ export const runCode = async (code: string, codeLanguage: CodeLanguage): Promise
     body: JSON.stringify({
       code,
       language: codeLanguage,
+      token: turnstileToken,
     })
   })
 

internal/workertypes/types.go

@@ -16,6 +16,7 @@ type WorkerResponsePayload struct {
 }
 
 type WorkerRequestPayload struct {
+	Token    string         `json:"token"`
 	Code     string         `json:"code"`
 	Language WorkerLanguage `json:"language"`
 }

k8/control-deployment.yaml.tpl

@@ -29,6 +29,8 @@ spec:
               value: https://[email protected]/5479806
             - name: WORKER_IMAGE_TAG
               value: ${DOCKER_TAG}
+            - name: TURNSTILE_SECRET_KEY
+              value: "${TURNSTILE_SECRET_KEY}"
           image: ghcr.io/mxschmitt/try-playwright/control-service:${DOCKER_TAG}
           name: control
           imagePullPolicy: IfNotPresent