fix(CORS): resolve contact form CORS, CSP warnings, and SVG path errors

- Add CORS support to Google Apps Script backend with proper headers
- Remove invalid CSP meta tags from HTML (should be server-side)
- Create _headers file for proper security header deployment
- Fix malformed SVG path in CareerPage.tsx (missing arc flag spaces)
- Improve API error handling with better user-friendly messages
- Add 'cors' mode to fetch requests for better cross-origin support

Fixes contact form submission failures and eliminates console warnings.

Author: sayak-sarkar

backend/thinkREDBot.js

@@ -10,6 +10,11 @@ const EMAIL_CC_CONTACT_FORM = SCRIPT_PROPS.getProperty('EMAIL_CC_CONTACT_FORM');
 const EMAIL_CC_JOB_APPLY = SCRIPT_PROPS.getProperty('EMAIL_CC_JOB_APPLY');
 
 // === ENTRY POINT ===
+function doGet(e) {
+  // Handle preflight OPTIONS requests
+  return createCorsResponse({ success: true, message: 'CORS preflight OK' });
+}
+
 function doPost(e) {
   try {
     const payload = JSON.parse(e.postData.contents);
@@ -85,8 +90,7 @@ https://docs.google.com/spreadsheets/d/${CONTACT_FORM_SHEET_ID}
     htmlBody: htmlBody
   });
 
-  return ContentService.createTextOutput(JSON.stringify({ success: true }))
-    .setMimeType(ContentService.MimeType.JSON);
+  return createCorsResponse({ success: true });
 }
 
 // === JOB APPLICATION HANDLER ===
@@ -166,8 +170,7 @@ https://docs.google.com/spreadsheets/d/${JOB_APPLICATION_SHEET_ID}
     htmlBody: htmlBody
   });
 
-  return ContentService.createTextOutput(JSON.stringify({ success: true }))
-    .setMimeType(ContentService.MimeType.JSON);
+  return createCorsResponse({ success: true });
 }
 
 // === UTILITY FUNCTIONS ===
@@ -177,6 +180,16 @@ function getOrCreateSubFolder(parent, name) {
 }
 
 function createErrorResponse(message) {
-  return ContentService.createTextOutput(JSON.stringify({ success: false, error: message }))
-    .setMimeType(ContentService.MimeType.JSON);
+  return createCorsResponse({ success: false, error: message });
+}
+
+function createCorsResponse(data) {
+  return ContentService.createTextOutput(JSON.stringify(data))
+    .setMimeType(ContentService.MimeType.JSON)
+    .setHeaders({
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+      'Access-Control-Max-Age': '3600'
+    });
 }

frontend/index.html

@@ -13,13 +13,7 @@
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
         <meta name="msapplication-TileColor" content="#E4093E" />
 
-        <!-- Security Headers -->
-        <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self' https://api.thinkred.tech https://script.google.com; object-src 'none'; media-src 'self'; child-src 'none'; frame-src 'none'; worker-src 'self'; manifest-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests; block-all-mixed-content;" />
-        <meta http-equiv="X-Content-Type-Options" content="nosniff" />
-        <meta http-equiv="X-Frame-Options" content="DENY" />
-        <meta http-equiv="X-XSS-Protection" content="1; mode=block" />
-        <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
-        <meta http-equiv="Permissions-Policy" content="geolocation=(), microphone=(), camera=(), fullscreen=(self), payment=()" />
+        <!-- Note: Security headers should be set by the web server, not in HTML meta tags -->
 
         <!-- SEO Meta Tags -->
         <title>ThinkRED Technologies | Simplify Technology & Experience</title>

frontend/public/_headers

@@ -0,0 +1,8 @@
+# Netlify/Vercel Headers Configuration
+/*
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self' https://api.thinkred.tech https://script.google.com; object-src 'none'; media-src 'self'; child-src 'none'; frame-src 'none'; worker-src 'self'; manifest-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'
+  X-Content-Type-Options: nosniff
+  X-Frame-Options: DENY
+  X-XSS-Protection: 1; mode=block
+  Referrer-Policy: strict-origin-when-cross-origin
+  Permissions-Policy: geolocation=(), microphone=(), camera=(), fullscreen=(self), payment=()

frontend/src/pages/CareerPage.tsx

@@ -517,7 +517,7 @@ const CareerPage = () => {
                           strokeLinecap="round"
                           strokeLinejoin="round"
                           strokeWidth={2}
-                          d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0720 13a7.975 7.975 0 01-2.343 5.657z"
+                          d="M17.657 18.657A8 8 0 0 1 6.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0 1 20 13a7.975 7.975 0 0 1-2.343 5.657z"
                         />
                       </svg>
                     </div>

frontend/src/utils/api.ts

@@ -46,6 +46,7 @@ export const submitContactForm = async (
       headers: {
         'Content-Type': 'application/json',
       },
+      mode: 'cors',
       body: JSON.stringify({
         action: 'submitContactForm',
         data: formData,
@@ -67,6 +68,17 @@ export const submitContactForm = async (
       // eslint-disable-next-line no-console
       console.error('Error submitting contact form:', error);
     }
+
+    // Provide a more user-friendly error message
+    if (
+      error instanceof TypeError &&
+      error.message.includes('Failed to fetch')
+    ) {
+      throw new Error(
+        'Unable to submit form. Please check your internet connection or try again later.'
+      );
+    }
+
     throw error;
   }
 };