From 70ac2225ba3abad2d1729fe9f91a0f1e7eb2f077 Mon Sep 17 00:00:00 2001 From: stijnpotters Date: Mon, 15 Jun 2026 12:07:42 +0200 Subject: [PATCH 1/5] Add /build to .gitignore to exclude build artifacts --- src/main/frontend/.gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/main/frontend/.gitignore b/src/main/frontend/.gitignore index c65a0878..fc091fc6 100644 --- a/src/main/frontend/.gitignore +++ b/src/main/frontend/.gitignore @@ -9,3 +9,5 @@ /.env /.env.production /.env.development + +/build From 3355b90b72008f0c8b82bc1f57405c01c160840b Mon Sep 17 00:00:00 2001 From: stijnpotters Date: Mon, 15 Jun 2026 12:52:28 +0200 Subject: [PATCH 2/5] Update development environment configuration and enhance security settings --- src/main/frontend/environment/development.ts | 2 +- src/main/frontend/vite.config.ts | 3 ++ .../flow/common/config/CsrfCookieFilter.java | 32 +++++++++++++++++++ .../config/SecurityChainConfigurer.java | 6 ++++ 4 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 src/main/java/org/frankframework/flow/common/config/CsrfCookieFilter.java diff --git a/src/main/frontend/environment/development.ts b/src/main/frontend/environment/development.ts index 50d445be..9796d233 100644 --- a/src/main/frontend/environment/development.ts +++ b/src/main/frontend/environment/development.ts @@ -2,7 +2,7 @@ import base, { type EnvironmentVariables } from './base' const development: EnvironmentVariables = { ...base, - apiBaseUrl: 'http://localhost:8080', + apiBaseUrl: '', } export default development diff --git a/src/main/frontend/vite.config.ts b/src/main/frontend/vite.config.ts index 80d9c0f3..6260d8f4 100644 --- a/src/main/frontend/vite.config.ts +++ b/src/main/frontend/vite.config.ts @@ -28,5 +28,8 @@ export default defineConfig({ }, server: { port: 3000, + proxy: { + '/api': 'http://localhost:8080', + }, }, }) diff --git a/src/main/java/org/frankframework/flow/common/config/CsrfCookieFilter.java b/src/main/java/org/frankframework/flow/common/config/CsrfCookieFilter.java new file mode 100644 index 00000000..78758233 --- /dev/null +++ b/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); + } +} diff --git a/src/main/java/org/frankframework/flow/common/config/SecurityChainConfigurer.java b/src/main/java/org/frankframework/flow/common/config/SecurityChainConfigurer.java index d1084c00..87659b4c 100644 --- a/src/main/java/org/frankframework/flow/common/config/SecurityChainConfigurer.java +++ b/src/main/java/org/frankframework/flow/common/config/SecurityChainConfigurer.java @@ -23,6 +23,7 @@ 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 @@ -61,6 +62,11 @@ public SecurityFilterChain configureChain(IAuthenticator authenticator, HttpSecu http.formLogin(FormLoginConfigurer::disable); http.logout(LogoutConfigurer::disable); http.sessionManagement(management -> management.sessionCreationPolicy(SessionCreationPolicy.IF_REQUIRED)); + + if (csrfEnabled) { + http.addFilterAfter(new CsrfCookieFilter(), CsrfFilter.class); + } + return authenticator.configureHttpSecurity(http); } From 669cf901c35c7e204e273b0fef49ac9c00a90254 Mon Sep 17 00:00:00 2001 From: stijnpotters Date: Mon, 15 Jun 2026 13:24:06 +0200 Subject: [PATCH 3/5] Refactor API URL handling and improve CSRF configuration --- src/main/frontend/.gitignore | 2 -- src/main/frontend/app/utils/api.ts | 4 +-- src/main/frontend/environment/base.ts | 9 ------ src/main/frontend/environment/development.ts | 8 ----- src/main/frontend/environment/environment.ts | 9 ------ src/main/frontend/environment/production.ts | 7 ----- .../config/SecurityChainConfigurer.java | 29 ++++++++++--------- 7 files changed, 17 insertions(+), 51 deletions(-) delete mode 100644 src/main/frontend/environment/base.ts delete mode 100644 src/main/frontend/environment/development.ts delete mode 100644 src/main/frontend/environment/environment.ts delete mode 100644 src/main/frontend/environment/production.ts diff --git a/src/main/frontend/.gitignore b/src/main/frontend/.gitignore index fc091fc6..c65a0878 100644 --- a/src/main/frontend/.gitignore +++ b/src/main/frontend/.gitignore @@ -9,5 +9,3 @@ /.env /.env.production /.env.development - -/build diff --git a/src/main/frontend/app/utils/api.ts b/src/main/frontend/app/utils/api.ts index 3279a424..888e5994 100644 --- a/src/main/frontend/app/utils/api.ts +++ b/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 = () => { diff --git a/src/main/frontend/environment/base.ts b/src/main/frontend/environment/base.ts deleted file mode 100644 index 299efc10..00000000 --- a/src/main/frontend/environment/base.ts +++ /dev/null @@ -1,9 +0,0 @@ -export interface EnvironmentVariables { - apiBaseUrl: string -} - -const base: EnvironmentVariables = { - apiBaseUrl: '', -} - -export default base diff --git a/src/main/frontend/environment/development.ts b/src/main/frontend/environment/development.ts deleted file mode 100644 index 9796d233..00000000 --- a/src/main/frontend/environment/development.ts +++ /dev/null @@ -1,8 +0,0 @@ -import base, { type EnvironmentVariables } from './base' - -const development: EnvironmentVariables = { - ...base, - apiBaseUrl: '', -} - -export default development diff --git a/src/main/frontend/environment/environment.ts b/src/main/frontend/environment/environment.ts deleted file mode 100644 index e42c2d24..00000000 --- a/src/main/frontend/environment/environment.ts +++ /dev/null @@ -1,9 +0,0 @@ -import development from './development' -import production from './production' -import type { EnvironmentVariables } from './base' - -const environment = process.env.NODE_ENV - -const variables: EnvironmentVariables = environment === 'development' ? development : production - -export default variables diff --git a/src/main/frontend/environment/production.ts b/src/main/frontend/environment/production.ts deleted file mode 100644 index 71565e0a..00000000 --- a/src/main/frontend/environment/production.ts +++ /dev/null @@ -1,7 +0,0 @@ -import base, { type EnvironmentVariables } from './base' - -const production: EnvironmentVariables = { - ...base, -} - -export default production diff --git a/src/main/java/org/frankframework/flow/common/config/SecurityChainConfigurer.java b/src/main/java/org/frankframework/flow/common/config/SecurityChainConfigurer.java index 87659b4c..96d1f8db 100644 --- a/src/main/java/org/frankframework/flow/common/config/SecurityChainConfigurer.java +++ b/src/main/java/org/frankframework/flow/common/config/SecurityChainConfigurer.java @@ -17,6 +17,7 @@ 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; @@ -50,23 +51,11 @@ 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); http.sessionManagement(management -> management.sessionCreationPolicy(SessionCreationPolicy.IF_REQUIRED)); - - if (csrfEnabled) { - http.addFilterAfter(new CsrfCookieFilter(), CsrfFilter.class); - } - return authenticator.configureHttpSecurity(http); } @@ -81,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); + } } From fcaa521502533b3fbe6c7a13a14c7ce8b38cb546 Mon Sep 17 00:00:00 2001 From: stijnpotters Date: Mon, 15 Jun 2026 16:17:25 +0200 Subject: [PATCH 4/5] abstracted zoomed node to seperate component to make it reusable --- .../canvas/nodetypes/zoomed-out-node.tsx | 140 ++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 src/main/frontend/app/routes/studio/canvas/nodetypes/zoomed-out-node.tsx diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/zoomed-out-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/zoomed-out-node.tsx new file mode 100644 index 00000000..f8091642 --- /dev/null +++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/zoomed-out-node.tsx @@ -0,0 +1,140 @@ +import { Handle, Position } from '@xyflow/react' +import { FlowConfig } from '~/routes/studio/canvas/flow.config' + +const COMPACT_INITIALS_BOX_SIZE = 160 +const COMPACT_PADDING_TOP = 8 +const COMPACT_HANDLE_SIZE = 15 +const COMPACT_HANDLE_GAP = 4 + +export interface ZoomedOutNodeProps { + subtype: string + name?: string + attributes?: Record + colorVariable: string + selected?: boolean + showTargetHandle?: boolean + sourceHandles?: { type: string; index: number }[] + width?: number +} + +function getAbbreviation(subtype: string): string { + return subtype.replaceAll(/[a-z]/g, '').slice(0, 4) || subtype.slice(0, 2).toUpperCase() +} + +/** + * Compact representation of a node shown when the canvas is zoomed out far enough that the full + * node would be unreadable. Renders an initials box with the subtype, name attributes and the + * handles aligned under it. + */ +export default function ZoomedOutNode({ + subtype, + name, + attributes, + colorVariable, + selected, + showTargetHandle = true, + sourceHandles = [], + width = FlowConfig.NODE_DEFAULT_WIDTH, +}: Readonly) { + const abbr = getAbbreviation(subtype) + + const compactXOffsetPx = (width - COMPACT_INITIALS_BOX_SIZE) / 2 - COMPACT_HANDLE_SIZE - COMPACT_HANDLE_GAP + const compactHandleTop = + COMPACT_PADDING_TOP + COMPACT_INITIALS_BOX_SIZE / 2 - COMPACT_HANDLE_SIZE / 2 + COMPACT_HANDLE_SIZE + + return ( + <> +
+
+ + {abbr} + +
+ + {subtype} + + {name && {name}} + {attributes && + Object.entries(attributes).map(([key, value]) => ( + + {value || key} + + ))} +
+ + {showTargetHandle && ( + <> +
+ + + )} + + {sourceHandles.length > 0 && ( +
+ )} + + {sourceHandles.map((handle) => ( + + ))} + + ) +} From 28d80283bd17dce62711b68a9ba145b62d47d361 Mon Sep 17 00:00:00 2001 From: stijnpotters Date: Mon, 15 Jun 2026 16:18:28 +0200 Subject: [PATCH 5/5] reused zoomed node in exit node as well as in frank node --- .../studio/canvas/nodetypes/exit-node.tsx | 17 ++- .../studio/canvas/nodetypes/frank-node.tsx | 121 ++---------------- 2 files changed, 26 insertions(+), 112 deletions(-) diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx index 330c76a7..a29de2e2 100644 --- a/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx +++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx @@ -1,7 +1,8 @@ -import { Handle, type Node, type NodeProps, NodeResizeControl, Position } from '@xyflow/react' +import { Handle, type Node, type NodeProps, NodeResizeControl, Position, useStore } from '@xyflow/react' import { ResizeIcon } from '~/routes/studio/canvas/nodetypes/frank-node' import { FlowConfig } from '~/routes/studio/canvas/flow.config' import { useSettingsStore } from '~/stores/settings-store' +import ZoomedOutNode from './zoomed-out-node' export type ExitNode = Node<{ subtype: string @@ -14,6 +15,20 @@ export default function ExitNodeComponent(properties: NodeProps) { const minNodeWidth = FlowConfig.EXIT_DEFAULT_WIDTH const minNodeHeight = FlowConfig.EXIT_DEFAULT_HEIGHT const gradientEnabled = useSettingsStore((state) => state.studio.gradient) + const zoom = useStore((state) => state.transform[2]) + const isCompact = zoom < 0.4 + + if (isCompact) { + return ( + + ) + } return ( <> diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx index 7cdc76c9..9faece23 100644 --- a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx +++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx @@ -36,6 +36,7 @@ import { parseXsd, } from '~/utils/xsd-utils' import MissingRequirements from './components/missing-requirements' +import ZoomedOutNode from './zoomed-out-node' export type FrankNodeType = Node<{ subtype: string @@ -117,17 +118,6 @@ export default function FrankNode(properties: NodeProps) { return (dimensions.height - (properties.data.sourceHandles.length - 1) * handleSpacing) / 2 }, [dimensions.height, properties.data.sourceHandles.length]) - const COMPACT_INITIALS_BOX_SIZE = 160 - const COMPACT_PADDING_TOP = 8 - const COMPACT_HANDLE_SIZE = 15 - const COMPACT_HANDLE_GAP = 4 - - const compactXOffsetPx = - (FlowConfig.NODE_DEFAULT_WIDTH - COMPACT_INITIALS_BOX_SIZE) / 2 - COMPACT_HANDLE_SIZE - COMPACT_HANDLE_GAP - - const compactHandleTop = - COMPACT_PADDING_TOP + COMPACT_INITIALS_BOX_SIZE / 2 - COMPACT_HANDLE_SIZE / 2 + COMPACT_HANDLE_SIZE - const allForwardTypesUsed = useMemo(() => { if (availableHandleTypes.length === 0) return true @@ -406,107 +396,16 @@ export default function FrankNode(properties: NodeProps) { }, [draggedName, canAcceptChild, frankElement]) if (isCompact) { - const abbr = - properties.data.subtype.replaceAll(/[a-z]/g, '').slice(0, 4) || properties.data.subtype.slice(0, 2).toUpperCase() - return ( - <> -
-
- - {abbr} - -
- - - {properties.data.subtype} - - - {properties.data.name && ( - {properties.data.name} - )} - {properties.data.attributes && - Object.entries(properties.data.attributes).map(([key, value]) => ( - - {value || key} - - ))} -
- - {properties.data.subtype !== 'Receiver' && ( - <> -
- - - )} - - {properties.data.sourceHandles.length > 0 && ( -
- )} - - {properties.data.sourceHandles.map((handle) => ( - - ))} - + ) }