Implementation for HortiView Platform¶

We are currently using the following CSP header for the Bayer HortiView platform:

# Environment-specific overrides:
#   - localhost:* is only allowed for SDC-* envs and BAYER-TES
#   - STATISTICS_API - the respective API URL for the environment

# Only allow resources from same origin by default
CSP="default-src 'self'; "

# ToDo: solution for this security requirement is work in progress, currently allowing all connections for now
CSP+="connect-src *; "

# Restrict form submissions
CSP+="form-action 'self' https://*.stripe.com https://*.userpilot.io; "

# blob: required for Azure Maps drawing tools
CSP+="worker-src 'self' blob:; "

# ToDo: unsafe-inline removal is work in progress
CSP+="style-src 'self' 'unsafe-inline' ${LOCALHOST_POLICY} https://fonts.googleapis.com; "
CSP+="script-src 'self' ${LOCALHOST_POLICY} ${STATISTICS_API} https://*.stripe.com https://*.stripe.network https://*.userpilot.io; "

# iframes for Stripe and Userpilot
CSP+="frame-src 'self' https://*.stripe.com https://*.stripe.network https://*.userpilot.io; "

# data: required for @element-public embedded fonts
CSP+="font-src 'self' data: https://fonts.gstatic.com https://fonts.googleapis.com https://atlas.microsoft.com; "

# blob: required for Azure Maps image sprites
# data: required for Azure Maps WebP support detection
# URLs required for country flag libraries
CSP+="img-src 'self' blob: data: https://react-circle-flags.pages.dev https://flagcdn.com https://upload.wikimedia.org"

During March 2026, the CSP header will be applied to all environments. It will be implemented as a response header for the HTML document of the Bayer HortiView application, and thus will apply to all resources loaded within that context, including those from vendor modules.

It allows resources from the same origin by default, while also allowing specific external sources for form actions, styles, scripts, iframes, fonts, and images as needed for the functionality of Bayer HortiView. Furthermore, it is configured with environment-specific overrides for localhost and the statistics API URL.

Compliance with Bayer Development Security Guidelines¶

The header currently fulfills most requirements of the Bayer Development Security Guidelines, with some exceptions that are being addressed in ongoing work to further enhance the security posture of Bayer HortiView:

• allowing data: and blob: sources for specific directives due to requirements from dependencies like Azure Maps and the Element Design System
• allowing 'unsafe-inline' for styles due to dependencies like Userpilot and the Element Design System, with work in progress to remove this allowance in the future
• allowing all connections for connect-src due to the needs of vendor modules, with work in progress to implement a vendor-friendly solution to restrict this further in the future.

Directives Explained¶

default-src¶

The default-src directive serves as a fallback for other resource types that do not have their own specific directives, which include:

• child-src
• connect-src
• font-src
• frame-src
• img-src
• manifest-src
• media-src
• object-src
• prefetch-src
• script-src
• script-src-elem
• script-src-attr
• style-src
• style-src-elem
• style-src-attr
• worker-src

In our case, the default-src directive allows resources to be loaded only from the same origin ('self'), e.g. on app.hortiview.com, only resources from app.hortiview.com are allowed by default.

connect-src¶

The connect-src directive restricts the URLs which can be loaded using script interfaces, such as fetch, XMLHttpRequest, WebSocket, and EventSource.

This is important for the functionality of the vendor modules, which require connections to various external APIs.

form-action¶

The form-action directive restricts the URLs which can be used as the target of a form submissions from a given context.

We currently allow form submissions to the same origin ('self') as well as to Stripe and Userpilot, which are necessary for payment processing and user onboarding flows.

worker-src¶

The worker-src directive specifies valid sources for Worker, SharedWorker, or ServiceWorker scripts.

This is necessary for the Azure Maps drawing tools, which require loading worker scripts from blob URLs.

style-src and script-src¶

The style-src and script-src directives specify valid sources for stylesheets and scripts, respectively.

Currently, we allow styles and scripts from the same origin ('self'), as well as from specific external sources required for the functionality of Bayer HortiView, including the localhost policy for development environments, the statistics API URL, and Stripe and Userpilot for payment processing and user onboarding flows.

We are working on removing the unsafe-inline allowance for styles, which is currently necessary for inline styles from dependencies like Userpilot or the Element Design System, but we aim to eliminate this in the future to enhance security.

frame-src¶

The frame-src directive specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>.

We currently allow iframes from the same origin ('self') as well as from Stripe and Userpilot, which are necessary for payment processing and user onboarding flows.

font-src¶

The font-src directive specifies valid sources for fonts loaded using @font-face.

Currently, we allow fonts from the same origin ('self'), as well as from specific external sources required for the functionality of Bayer HortiView, including Google Fonts for typography, data URLs for embedded fonts from the Element Design System, and Azure Maps for map-related fonts.

img-src¶

The img-src directive specifies valid sources of images and favicons.

Currently, we allow images from the same origin ('self'), as well as from specific external sources required for the functionality of Bayer HortiView, including blob URLs and data URLs for images from dependencies like Azure Maps, and specific URLs for country flag libraries used in the application.