diff --git a/__generated__/dockview-core-exports.txt b/__generated__/dockview-core-exports.txt
index 37337d9969..2929aef082 100644
--- a/__generated__/dockview-core-exports.txt
+++ b/__generated__/dockview-core-exports.txt
@@ -19,6 +19,7 @@ ContextMenuItemConfig
 Contraints
 CreateComponentOptions
 CreateContextMenuItemComponentOptions
+CspNonce
 DEFAULT_TAB_GROUP_COLORS
 DefaultDockviewDeserialzier
 DefaultTab
diff --git a/packages/dockview-angular/src/lib/dockview/dockview-angular.component.ts b/packages/dockview-angular/src/lib/dockview/dockview-angular.component.ts
index 6dcbdc15de..0599d4b699 100644
--- a/packages/dockview-angular/src/lib/dockview/dockview-angular.component.ts
+++ b/packages/dockview-angular/src/lib/dockview/dockview-angular.component.ts
@@ -26,6 +26,7 @@ import {
     PROPERTY_KEYS_DOCKVIEW,
     DockviewFrameworkOptions,
     DockviewComponentOptions,
+    CspNonce,
     GetTabContextMenuItemsParams,
     GetTabGroupChipContextMenuItemsParams,
     BuiltInChipContextMenuItem,
@@ -94,6 +95,7 @@ export class DockviewAngularComponent implements OnInit, OnDestroy, OnChanges {
     @Input() disableFloatingGroups?: boolean;
     @Input() floatingGroupBounds?: 'boundedWithinViewport';
     @Input() popoutUrl?: string;
+    @Input() nonce?: CspNonce;
     @Input() debug?: boolean;
     @Input() locked?: boolean;
     @Input() disableAutoResizing?: boolean;
diff --git a/packages/dockview-core/src/__tests__/dockview/options.spec.ts b/packages/dockview-core/src/__tests__/dockview/options.spec.ts
new file mode 100644
index 0000000000..eecb9df159
--- /dev/null
+++ b/packages/dockview-core/src/__tests__/dockview/options.spec.ts
@@ -0,0 +1,7 @@
+import { PROPERTY_KEYS_DOCKVIEW } from '../../dockview/options';
+
+describe('PROPERTY_KEYS_DOCKVIEW', () => {
+    test('includes nonce so framework wrappers (React, Vue) auto-forward it', () => {
+        expect(PROPERTY_KEYS_DOCKVIEW).toContain('nonce');
+    });
+});
diff --git a/packages/dockview-core/src/__tests__/dom.spec.ts b/packages/dockview-core/src/__tests__/dom.spec.ts
index 2ad46a4fe4..030f97cd51 100644
--- a/packages/dockview-core/src/__tests__/dom.spec.ts
+++ b/packages/dockview-core/src/__tests__/dom.spec.ts
@@ -1,4 +1,5 @@
 import {
+    addStyles,
     disableIframePointEvents,
     isInDocument,
     quasiDefaultPrevented,
@@ -80,4 +81,146 @@ describe('dom', () => {
         expect(el3.style.pointerEvents).toBe('inherit');
         expect(el4.style.pointerEvents).toBe('');
     });
+
+    describe('addStyles', () => {
+        function makeTargetDocument() {
+            return document.implementation.createHTMLDocument('target');
+        }
+
+        function makeStyleSheet(rules: string[], href?: string): CSSStyleSheet {
+            return {
+                href,
+                type: 'text/css',
+                cssRules: rules.map((cssText) => ({ cssText })),
+            } as unknown as CSSStyleSheet;
+        }
+
+        function makeStyleSheetList(sheets: CSSStyleSheet[]): StyleSheetList {
+            const list: any = {
+                length: sheets.length,
+                [Symbol.iterator]: function* () {
+                    for (const s of sheets) yield s;
+                },
+            };
+            sheets.forEach((s, i) => (list[i] = s));
+            return list as StyleSheetList;
+        }
+
+        test('applies nonce to every created <style> element', () => {
+            const targetDoc = makeTargetDocument();
+            const sheets = makeStyleSheetList([
+                makeStyleSheet(['.a { color: red; }', '.b { color: blue; }']),
+            ]);
+
+            addStyles(targetDoc, sheets, { nonce: 'abc123' });
+
+            const styles = targetDoc.head.querySelectorAll('style');
+            expect(styles.length).toBe(2);
+            expect(styles[0].getAttribute('nonce')).toBe('abc123');
+            expect(styles[1].getAttribute('nonce')).toBe('abc123');
+            expect(styles[0].textContent).toBe('.a { color: red; }');
+            expect(styles[1].textContent).toBe('.b { color: blue; }');
+        });
+
+        test('omits nonce attribute when no nonce is supplied', () => {
+            const targetDoc = makeTargetDocument();
+            const sheets = makeStyleSheetList([
+                makeStyleSheet(['.b { color: blue; }']),
+            ]);
+
+            addStyles(targetDoc, sheets);
+
+            const style = targetDoc.head.querySelector('style')!;
+            expect(style.hasAttribute('nonce')).toBe(false);
+        });
+
+        test('appends <link> for external stylesheet hrefs and does not duplicate rules inline', () => {
+            const targetDoc = makeTargetDocument();
+            const sheets = makeStyleSheetList([
+                makeStyleSheet(
+                    ['.c { color: green; }'],
+                    'https://example.test/main.css'
+                ),
+            ]);
+
+            addStyles(targetDoc, sheets, { nonce: 'xyz' });
+
+            const link = targetDoc.head.querySelector('link');
+            expect(link).not.toBeNull();
+            expect(link?.getAttribute('rel')).toBe('stylesheet');
+            expect(link?.getAttribute('href')).toBe(
+                'https://example.test/main.css'
+            );
+            // The <link> already loads the sheet in the target document;
+            // we must not also inject inline <style> for the same rules.
+            expect(targetDoc.head.querySelectorAll('style').length).toBe(0);
+        });
+
+        test('preserves source order across readable and unreadable sheets', () => {
+            // Simulate a CORS-restricted sheet whose cssRules throws on access.
+            const unreadable: any = {
+                href: 'https://cdn.test/blocked.css',
+                type: 'text/css',
+                get cssRules(): CSSRuleList {
+                    throw new DOMException('SecurityError', 'SecurityError');
+                },
+            };
+
+            const targetDoc = makeTargetDocument();
+            const sheets = makeStyleSheetList([
+                makeStyleSheet(['.first { color: red; }']),
+                unreadable,
+                makeStyleSheet(['.third { color: green; }']),
+            ]);
+
+            const warn = jest
+                .spyOn(console, 'warn')
+                .mockImplementation(() => {});
+
+            addStyles(targetDoc, sheets, { nonce: 'n1' });
+
+            const appended = Array.from(targetDoc.head.children).filter(
+                (el) => el.tagName === 'STYLE' || el.tagName === 'LINK'
+            );
+            expect(appended.length).toBe(3);
+            expect(appended[0].tagName).toBe('STYLE');
+            expect(appended[0].textContent).toBe('.first { color: red; }');
+            expect(appended[1].tagName).toBe('LINK');
+            expect((appended[1] as HTMLLinkElement).getAttribute('href')).toBe(
+                'https://cdn.test/blocked.css'
+            );
+            expect(appended[2].tagName).toBe('STYLE');
+            expect(appended[2].textContent).toBe('.third { color: green; }');
+
+            warn.mockRestore();
+        });
+
+        test('nonce accepts a function that receives the target document', () => {
+            const targetDoc = makeTargetDocument();
+            const meta = targetDoc.createElement('meta');
+            meta.setAttribute('name', 'csp-nonce');
+            meta.setAttribute('content', 'from-popout');
+            targetDoc.head.appendChild(meta);
+
+            const sheets = makeStyleSheetList([
+                makeStyleSheet(['.x { color: red; }']),
+            ]);
+
+            const nonceFn = jest.fn(
+                (doc: Document) =>
+                    doc
+                        .querySelector<HTMLMetaElement>(
+                            'meta[name="csp-nonce"]'
+                        )
+                        ?.getAttribute('content') ?? undefined
+            );
+
+            addStyles(targetDoc, sheets, { nonce: nonceFn });
+
+            expect(nonceFn).toHaveBeenCalledTimes(1);
+            expect(nonceFn).toHaveBeenCalledWith(targetDoc);
+            const style = targetDoc.head.querySelector('style')!;
+            expect(style.getAttribute('nonce')).toBe('from-popout');
+        });
+    });
 });
diff --git a/packages/dockview-core/src/__tests__/popoutWindow.spec.ts b/packages/dockview-core/src/__tests__/popoutWindow.spec.ts
new file mode 100644
index 0000000000..71449bb133
--- /dev/null
+++ b/packages/dockview-core/src/__tests__/popoutWindow.spec.ts
@@ -0,0 +1,157 @@
+import { PopoutWindow } from '../popoutWindow';
+
+describe('PopoutWindow', () => {
+    function makeFakeExternalWindow() {
+        const externalDoc =
+            document.implementation.createHTMLDocument('popout');
+        const listeners: Record<string, EventListener[]> = {};
+
+        const externalWindow: any = {
+            document: externalDoc,
+            close: jest.fn(),
+            addEventListener: (type: string, fn: EventListener) => {
+                (listeners[type] ||= []).push(fn);
+            },
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        };
+
+        const fireLoad = () => {
+            for (const fn of listeners['load'] ?? []) {
+                fn(new Event('load'));
+            }
+        };
+
+        return { externalWindow, externalDoc, fireLoad };
+    }
+
+    function withParentStyleSheet<T>(cssText: string, fn: () => T): T {
+        const styleEl = document.createElement('style');
+        styleEl.appendChild(document.createTextNode(cssText));
+        document.head.appendChild(styleEl);
+        try {
+            return fn();
+        } finally {
+            styleEl.remove();
+        }
+    }
+
+    test('forwards nonce from options through addStyles into the popout document', async () => {
+        const { externalWindow, externalDoc, fireLoad } =
+            makeFakeExternalWindow();
+        const openSpy = jest
+            .spyOn(window, 'open')
+            .mockReturnValue(externalWindow as Window);
+
+        try {
+            await withParentStyleSheet('.dv { color: red; }', async () => {
+                const popout = new PopoutWindow('target-id', 'dv-test-class', {
+                    url: 'about:blank',
+                    top: 0,
+                    left: 0,
+                    width: 100,
+                    height: 100,
+                    nonce: 'popout-nonce-123',
+                });
+
+                const opened = popout.open();
+                fireLoad();
+                await opened;
+
+                const styles = externalDoc.head.querySelectorAll('style');
+                expect(styles.length).toBeGreaterThan(0);
+                styles.forEach((s) => {
+                    expect(s.getAttribute('nonce')).toBe('popout-nonce-123');
+                });
+
+                popout.dispose();
+            });
+        } finally {
+            openSpy.mockRestore();
+        }
+    });
+
+    test('resolves nonce function against the popout document', async () => {
+        const { externalWindow, externalDoc, fireLoad } =
+            makeFakeExternalWindow();
+        const meta = externalDoc.createElement('meta');
+        meta.setAttribute('name', 'csp-nonce');
+        meta.setAttribute('content', 'from-popout-meta');
+        externalDoc.head.appendChild(meta);
+
+        const openSpy = jest
+            .spyOn(window, 'open')
+            .mockReturnValue(externalWindow as Window);
+
+        try {
+            await withParentStyleSheet('.dv { color: red; }', async () => {
+                const nonceFn = jest.fn(
+                    (doc: Document) =>
+                        doc
+                            .querySelector<HTMLMetaElement>(
+                                'meta[name="csp-nonce"]'
+                            )
+                            ?.getAttribute('content') ?? undefined
+                );
+
+                const popout = new PopoutWindow('target-id', 'dv-test-class', {
+                    url: 'about:blank',
+                    top: 0,
+                    left: 0,
+                    width: 100,
+                    height: 100,
+                    nonce: nonceFn,
+                });
+
+                const opened = popout.open();
+                fireLoad();
+                await opened;
+
+                expect(nonceFn).toHaveBeenCalledWith(externalDoc);
+                const styles = externalDoc.head.querySelectorAll('style');
+                expect(styles.length).toBeGreaterThan(0);
+                styles.forEach((s) => {
+                    expect(s.getAttribute('nonce')).toBe('from-popout-meta');
+                });
+
+                popout.dispose();
+            });
+        } finally {
+            openSpy.mockRestore();
+        }
+    });
+
+    test('does not set a nonce attribute when no nonce option is supplied', async () => {
+        const { externalWindow, externalDoc, fireLoad } =
+            makeFakeExternalWindow();
+        const openSpy = jest
+            .spyOn(window, 'open')
+            .mockReturnValue(externalWindow as Window);
+
+        try {
+            await withParentStyleSheet('.dv { color: red; }', async () => {
+                const popout = new PopoutWindow('target-id', 'dv-test-class', {
+                    url: 'about:blank',
+                    top: 0,
+                    left: 0,
+                    width: 100,
+                    height: 100,
+                });
+
+                const opened = popout.open();
+                fireLoad();
+                await opened;
+
+                const styles = externalDoc.head.querySelectorAll('style');
+                expect(styles.length).toBeGreaterThan(0);
+                styles.forEach((s) => {
+                    expect(s.hasAttribute('nonce')).toBe(false);
+                });
+
+                popout.dispose();
+            });
+        } finally {
+            openSpy.mockRestore();
+        }
+    });
+});
diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabGroupIndicator.ts b/packages/dockview-core/src/dockview/components/titlebar/tabGroupIndicator.ts
index 6ddb0350dc..c0cbfc58f7 100644
--- a/packages/dockview-core/src/dockview/components/titlebar/tabGroupIndicator.ts
+++ b/packages/dockview-core/src/dockview/components/titlebar/tabGroupIndicator.ts
@@ -342,7 +342,7 @@ export class WrapTabGroupIndicator extends BaseTabGroupIndicator {
         let svg = underline.firstElementChild as SVGSVGElement | null;
         let path: SVGPathElement;
         if (!svg || svg.tagName !== 'svg') {
-            underline.innerHTML = '';
+            underline.replaceChildren();
             svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
             svg.style.display = 'block';
             path = document.createElementNS(
@@ -494,7 +494,7 @@ export class NoneTabGroupIndicator extends BaseTabGroupIndicator {
 
         // Clear any SVG content left over from a mode switch
         if (underline.firstElementChild) {
-            underline.innerHTML = '';
+            underline.replaceChildren();
         }
 
         underline.style.backgroundColor = color;
diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts
index 6849509331..114d30f41e 100644
--- a/packages/dockview-core/src/dockview/dockviewComponent.ts
+++ b/packages/dockview-core/src/dockview/dockviewComponent.ts
@@ -891,6 +891,7 @@ export class DockviewComponent
                 height: box.height,
                 onDidOpen: options?.onDidOpen,
                 onWillClose: options?.onWillClose,
+                nonce: this.options?.nonce,
             }
         );
 
diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts
index 625afcf221..e725b25f29 100644
--- a/packages/dockview-core/src/dockview/options.ts
+++ b/packages/dockview-core/src/dockview/options.ts
@@ -17,6 +17,8 @@ import { Contraints } from '../gridview/gridviewPanel';
 import { AcceptableEvent, IAcceptableEvent } from '../events';
 import { DockviewTheme } from './theme';
 import { ITabGroup } from './tabGroup';
+import { CspNonce } from '../dom';
+export { CspNonce } from '../dom';
 import { DockviewTabGroupColorEntry } from './tabGroupAccent';
 
 export interface IHeaderActionsRenderer extends IDisposable {
@@ -108,6 +110,7 @@ export interface DockviewOptions {
               minimumWidthWithinViewport?: number;
           };
     popoutUrl?: string;
+    nonce?: CspNonce;
     defaultRenderer?: DockviewPanelRenderer;
     defaultHeaderPosition?: DockviewHeaderPosition;
     debug?: boolean;
@@ -228,6 +231,7 @@ export const PROPERTY_KEYS_DOCKVIEW: (keyof DockviewOptions)[] = (() => {
         disableFloatingGroups: undefined,
         floatingGroupBounds: undefined,
         popoutUrl: undefined,
+        nonce: undefined,
         defaultRenderer: undefined,
         defaultHeaderPosition: undefined,
         debug: undefined,
diff --git a/packages/dockview-core/src/dom.ts b/packages/dockview-core/src/dom.ts
index 9f05eeb09d..ab41818c06 100644
--- a/packages/dockview-core/src/dom.ts
+++ b/packages/dockview-core/src/dom.ts
@@ -209,8 +209,22 @@ export function quasiDefaultPrevented(event: Event): boolean {
     return (event as any)[QUASI_PREVENT_DEFAULT_KEY];
 }
 
-export function addStyles(document: Document, styleSheetList: StyleSheetList) {
+export type CspNonce =
+    | string
+    | ((targetDocument: Document) => string | undefined);
+
+export interface AddStylesOptions {
+    nonce?: CspNonce;
+}
+
+export function addStyles(
+    document: Document,
+    styleSheetList: StyleSheetList,
+    options: AddStylesOptions = {}
+) {
     const styleSheets = Array.from(styleSheetList);
+    const { nonce } = options;
+    const resolvedNonce = typeof nonce === 'function' ? nonce(document) : nonce;
 
     for (const styleSheet of styleSheets) {
         if (styleSheet.href) {
@@ -219,6 +233,10 @@ export function addStyles(document: Document, styleSheetList: StyleSheetList) {
             link.type = styleSheet.type;
             link.rel = 'stylesheet';
             document.head.appendChild(link);
+            // The <link> will load and apply its rules in the target
+            // document. Reading cssRules here would duplicate them
+            // (and throws for cross-origin sheets).
+            continue;
         }
 
         let cssTexts: string[] = [];
@@ -236,11 +254,16 @@ export function addStyles(document: Document, styleSheetList: StyleSheetList) {
             );
         }
 
+        const fragment = document.createDocumentFragment();
         for (const rule of cssTexts) {
             const style = document.createElement('style');
+            if (resolvedNonce) {
+                style.setAttribute('nonce', resolvedNonce);
+            }
             style.appendChild(document.createTextNode(rule));
-            document.head.appendChild(style);
+            fragment.appendChild(style);
         }
+        document.head.appendChild(fragment);
     }
 }
 
diff --git a/packages/dockview-core/src/popoutWindow.ts b/packages/dockview-core/src/popoutWindow.ts
index 870dec4aa6..58f2c2012d 100644
--- a/packages/dockview-core/src/popoutWindow.ts
+++ b/packages/dockview-core/src/popoutWindow.ts
@@ -1,4 +1,4 @@
-import { addStyles } from './dom';
+import { addStyles, CspNonce } from './dom';
 import { Emitter, addDisposableListener } from './events';
 import { CompositeDisposable, Disposable, IDisposable } from './lifecycle';
 import { Box } from './types';
@@ -7,6 +7,7 @@ export type PopoutWindowOptions = {
     url: string;
     onDidOpen?: (event: { id: string; window: Window }) => void;
     onWillClose?: (event: { id: string; window: Window }) => void;
+    nonce?: CspNonce;
 } & Box;
 
 export class PopoutWindow extends CompositeDisposable {
@@ -140,7 +141,9 @@ export class PopoutWindow extends CompositeDisposable {
 
                     externalDocument.body.appendChild(container);
 
-                    addStyles(externalDocument, window.document.styleSheets);
+                    addStyles(externalDocument, window.document.styleSheets, {
+                        nonce: this.options.nonce,
+                    });
 
                     /**
                      * beforeunload must be registered after load for reasons I could not determine
diff --git a/packages/docs/docs/advanced/csp.mdx b/packages/docs/docs/advanced/csp.mdx
new file mode 100644
index 0000000000..cb2f1588af
--- /dev/null
+++ b/packages/docs/docs/advanced/csp.mdx
@@ -0,0 +1,86 @@
+---
+title: Content Security Policy
+description: How to run Dockview under a strict Content Security Policy that forbids `style-src 'unsafe-inline'`.
+---
+
+# Content Security Policy
+
+Dockview is designed to work under a strict [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP). This page covers what Dockview does at runtime, what you need to allow, and how to configure Dockview so that a strict policy doesn't break popout windows.
+
+## What Dockview does at runtime
+
+For the main document Dockview only writes to `element.style` properties (e.g. positioning, sizing), manipulates `classList`, and attaches event listeners via `addEventListener`. None of those are restricted by `style-src` or `script-src`. Dockview does not use `eval`, the `Function` constructor, `setTimeout`/`setInterval` with string arguments, `document.write`, inline event handlers, or any CSS-in-JS runtime.
+
+The **one** place Dockview needs dynamic styling is when opening a **popout window**: Dockview reads the parent window's stylesheets and recreates them in the popout's `<head>` as `<style>` elements, preserving the original cascade order. This is the path that interacts with `style-src`.
+
+## Recommended CSP
+
+A policy like the following is enough to run Dockview with popouts:
+
+```
+Content-Security-Policy:
+  default-src 'self';
+  style-src   'self' 'nonce-RANDOM_NONCE';
+  script-src  'self' 'nonce-RANDOM_NONCE';
+```
+
+Note that:
+
+- You do **not** need `'unsafe-inline'` in `style-src`.
+- `RANDOM_NONCE` must be regenerated per response. It should be the same nonce that your server-rendered HTML applies to its own `<script>` / `<style>` tags.
+- If your popout is same-origin (the default for `window.open(url)` where `url` is on your origin), the popout document inherits your CSP and nonce, so the same nonce works for both windows.
+
+## Passing the nonce to Dockview
+
+Dockview forwards a `nonce` option to every `<style>` element it creates. The nonce must be valid for the document the `<style>` lands in, which — for popout windows — is **not** the opener document. Because `popout.html` is a separate HTTP response with its own freshly-generated nonce, the parent page's nonce is never valid in the popout's CSP context.
+
+For this reason `nonce` accepts either a **string** (when the same nonce is known to cover both documents, e.g. during local development with a static policy) or a **function** that is called with the target `Document` so you can read the nonce directly off the popout page.
+
+The recommended setup is to have your `popout.html` emit a `<meta name="csp-nonce">` element with its request nonce, then read it through the function form:
+
+```tsx title="React"
+<DockviewReact
+    nonce={(doc) =>
+        doc
+            .querySelector<HTMLMetaElement>('meta[name="csp-nonce"]')
+            ?.content
+    }
+    onReady={onReady}
+    components={components}
+/>
+```
+
+```vue
+<!-- Vue -->
+<dockview-vue :nonce="readCspNonce" @ready="onReady" />
+```
+
+```ts title="Angular"
+<dockview-angular [nonce]="readCspNonce" (ready)="onReady($event)"></dockview-angular>
+```
+
+```ts title="Vanilla"
+import { createDockview } from 'dockview-core';
+
+const api = createDockview(element, {
+    nonce: (doc) =>
+        doc
+            .querySelector<HTMLMetaElement>('meta[name="csp-nonce"]')
+            ?.content,
+    createComponent: (options) => { /* ... */ },
+});
+```
+
+If your popout markup uses a different convention (for example a global like `window.__CSP_NONCE__`), return that from the function instead.
+
+## Trusted Types
+
+Dockview is also compatible with [Trusted Types](https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API) (`require-trusted-types-for 'script'`). Dockview clears DOM subtrees with `Node.replaceChildren()` rather than `element.innerHTML = ''`, which Trusted Types treats as a sink.
+
+## Checklist
+
+- Add `'nonce-<value>'` to your `style-src` directive on **both** the main page and the popout page.
+- Generate a fresh nonce per response (on both pages).
+- In the popout HTML, expose the nonce in a known location (a `<meta name="csp-nonce">` tag is the most portable choice).
+- Provide the function form of `nonce` to Dockview so it reads the popout's own nonce at the moment styles are injected.
+- Serve the popout from the same origin as the host so it inherits your origin's CSP defaults.