Enhanced node components with improved shadow effects for better visual depth

src/main/frontend/app/routes/configurations/configuration-file-tile.tsx

@@ -40,7 +40,7 @@ export default function ConfigurationFileTile({
   }
 
   return (
-    <div className="border-border bg-background flex h-75 w-100 flex-col gap-3 rounded border p-4 shadow-sm">
+    <div className="border-border bg-background flex h-75 w-100 flex-col gap-3 rounded border p-4 shadow-md">
       <div className="flex items-start justify-between gap-2">
         <p className="text-foreground min-w-0 flex-1 truncate font-semibold" title={relativePath}>
           {relativePath}
@@ -55,7 +55,7 @@ export default function ConfigurationFileTile({
           <p className="text-foreground-muted text-xs font-semibold tracking-wider uppercase">
             {adapterNames.length === 1 ? 'Adapter' : 'Adapters'}
           </p>
-          <div className="border-border flex-1 overflow-y-auto rounded border p-2 shadow-inner">
+          <div className="border-border flex-1 overflow-y-auto rounded border p-2 inset-shadow-sm">
             <ul className="space-y-2">
               {adapterNames.map((name, index) => (
                 <AdapterListItem
@@ -100,7 +100,7 @@ interface AdapterListItemProperties {
 
 function AdapterListItem({ name, adapterPosition, onOpenInStudio }: Readonly<AdapterListItemProperties>) {
   return (
-    <li className="border-border bg-background flex items-center justify-between gap-3 rounded border px-3 py-2 shadow-sm">
+    <li className="border-border bg-background flex items-center justify-between gap-3 rounded border px-3 py-2 shadow-md">
       <span className="text-foreground min-w-0 flex-1 truncate text-sm" title={name}>
         {name}
       </span>

src/main/frontend/app/routes/studio/canvas/nodetypes/child-node.tsx

@@ -136,7 +136,7 @@
       // Add child recursively
       addChildToChild(rootId, child.id, newChild)
     },
     [
       setDraggedName,
       canAcceptChild,
       showNodeContextMenu,
@@ -159,7 +159,7 @@
     <div
       data-childnode-id={child.id}
       className={clsx(
-        'bg-background relative mr-0.5 mb-2 rounded-md border',
+        'bg-background relative mr-0.5 mb-2 rounded-md border shadow-md',
         isSelected && 'border-1',
         !isSelected && dragForbidden && 'border-2 border-dashed',
         !isSelected && !dragForbidden && 'border-border',
@@ -197,7 +197,7 @@
       </div>
 
       {/* Body */}
-      <div className="child-node-body relative min-h-25 px-1 py-1">
+      <div className="child-node-body border-border/40 relative min-h-25 rounded-b-md border px-1 py-1">
         {child.attributes &&
           Object.entries(child.attributes).map(([key, value]) => (
             <div key={key} className="my-1">

src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx

@@ -30,7 +30,7 @@ export default function ExitNodeComponent(properties: NodeProps<ExitNode>) {
         <ResizeIcon />
       </NodeResizeControl>
       <div
-        className={`bg-background flex h-full w-full flex-col items-center rounded-md border ${
+        className={`bg-background flex h-full w-full flex-col items-center rounded-md border shadow-md ${
           properties.selected ? 'border-blue-500' : 'border-border'
         }`}
         style={{

src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx

@@ -353,7 +353,7 @@
 
       addChild(properties.id, child)
     },
     [
       properties.id,
       addChild,
       setIsNewNode,
@@ -529,7 +529,7 @@
         <ResizeIcon />
       </NodeResizeControl>
       <div
-        className={`bg-background border-border relative flex w-full flex-col items-center overflow-x-visible rounded-md border ${isManuallyResized ? 'h-full overflow-y-hidden' : 'overflow-y-visible'}`}
+        className={`bg-background border-border relative flex w-full flex-col items-center overflow-x-visible rounded-md border shadow-md ${isManuallyResized ? 'h-full overflow-y-hidden' : 'overflow-y-visible'}`}
         style={{
           minWidth: `${minNodeWidth}px`,
           ...(properties.selected && { borderColor: `var(${colorVariable})` }),
@@ -584,7 +584,7 @@
           ))}
         {(properties.data.children.length > 0 || dragOver || canDropDraggedElement) && (
           <div className="w-full p-4">
-            <div className="border-border bg-background w-full rounded-md p-4 shadow-[inset_0px_2px_4px_rgba(0,0,0,0.1)]">
+            <div className="border-border/40 bg-background w-full rounded-md border p-4 inset-shadow-sm">
               {properties.data.children.map((child) => (
                 <div key={child.id} data-child-id={child.id} className="child-drop-zone">
                   <ChildNodeComponent

src/main/frontend/app/utils/api.ts

@@ -1,7 +1,5 @@
-import variables from '../../environment/environment'
-
 export function apiUrl(path: string): string {
-  return `${variables.apiBaseUrl}/api${path}`
+  return `/api${path}`
 }
 
 const getAnonymousSessionId = () => {

src/main/frontend/vite.config.ts

@@ -28,5 +28,8 @@ export default defineConfig({
   },
   server: {
     port: 3000,
+    proxy: {
+      '/api': 'http://localhost:8080',
+    },
   },
 })

src/main/java/org/frankframework/flow/common/config/CsrfCookieFilter.java

@@ -0,0 +1,32 @@
+package org.frankframework.flow.common.config;
+
+import jakarta.servlet.FilterChain;
+import jakarta.servlet.ServletException;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import java.io.IOException;
+import org.jspecify.annotations.NonNull;
+import org.springframework.security.web.csrf.CsrfToken;
+import org.springframework.web.filter.OncePerRequestFilter;
+
+/**
+ * Forces the deferred {@link CsrfToken} to load on every request so the XSRF-TOKEN cookie is
+ * written. Otherwise the cookie is only minted when something reads the token, leaving a SPA with no
+ * token to echo back as X-XSRF-TOKEN.
+ */
+public class CsrfCookieFilter extends OncePerRequestFilter {
+
+	@Override
+	protected void doFilterInternal(
+			@NonNull HttpServletRequest request,
+			@NonNull HttpServletResponse response,
+			@NonNull FilterChain filterChain
+	) throws ServletException, IOException {
+		CsrfToken csrfToken = (CsrfToken) request.getAttribute(CsrfToken.class.getName());
+		if (csrfToken != null) {
+			csrfToken.getToken();
+		}
+
+		filterChain.doFilter(request, response);
+	}
+}

src/main/java/org/frankframework/flow/common/config/SecurityChainConfigurer.java

@@ -17,12 +17,14 @@
 import org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity;
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
 import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
+import org.springframework.security.config.annotation.web.configurers.AbstractHttpConfigurer;
 import org.springframework.security.config.annotation.web.configurers.FormLoginConfigurer;
 import org.springframework.security.config.annotation.web.configurers.HeadersConfigurer;
 import org.springframework.security.config.annotation.web.configurers.LogoutConfigurer;
 import org.springframework.security.config.http.SessionCreationPolicy;
 import org.springframework.security.web.SecurityFilterChain;
 import org.springframework.security.web.csrf.CookieCsrfTokenRepository;
+import org.springframework.security.web.csrf.CsrfFilter;
 import org.springframework.security.web.util.matcher.AnyRequestMatcher;
 
 @Configuration
@@ -49,14 +51,7 @@ public void setEnvironment(Environment environment) {
 	public SecurityFilterChain configureChain(IAuthenticator authenticator, HttpSecurity http) throws Exception {
 		configureAuthenticator(authenticator);
 		http.headers(headers -> headers.frameOptions(HeadersConfigurer.FrameOptionsConfig::sameOrigin));
-		http.csrf(csrf -> {
-			if (csrfEnabled) {
-				csrf.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
-				csrf.csrfTokenRequestHandler(new SpaCsrfTokenRequestHandler());
-				return;
-			}
-			csrf.disable();
-		});
+		configureCsrf(http);
 		http.securityMatcher(AnyRequestMatcher.INSTANCE);
 		http.formLogin(FormLoginConfigurer::disable);
 		http.logout(LogoutConfigurer::disable);
@@ -75,4 +70,18 @@ private void configureAuthenticator(IAuthenticator authenticator) {
 		servletConfig.setUrlMapping("/*");
 		authenticator.registerServlet(servletConfig);
 	}
+
+	private void configureCsrf(HttpSecurity http) {
+		if (!csrfEnabled) {
+			http.csrf(AbstractHttpConfigurer::disable);
+			return;
+		}
+
+		http.csrf(csrf -> {
+			csrf.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
+			csrf.csrfTokenRequestHandler(new SpaCsrfTokenRequestHandler());
+		});
+
+		http.addFilterAfter(new CsrfCookieFilter(), CsrfFilter.class);
+	}
 }