Content Security Policy may restrict contenteditable behavior
OS: Windows 11 · Device: Desktop or Laptop Any · Browser: Chrome 120.0 · Keyboard: US
Open case →Scenario
Content Security Policy may restrict contenteditable behavior
When a page has a strict Content Security Policy (CSP), certain contenteditable operations may be restricted. Pasting content, executing scripts, or inserting HTML may be blocked depending on the CSP directives.
other
Scenario ID
scenario-csp-restrictions
Details
When a page has a strict Content Security Policy (CSP), certain contenteditable operations may be restricted. Pasting content, executing scripts, or inserting HTML may be blocked depending on the CSP directives.
References
- MDN: Content Security Policy script-src - CSP script-src directive
- Content Security Policy: require-trusted-types-for - Trusted Types documentation
- Stack Overflow: Why isn’t inline JavaScript blocked by CSP? - Script execution behavior
- LateNode Community: Block JavaScript in design-mode iframe - Security considerations
- XJavaScript: Can scripts be inserted with innerHTML? - Script insertion behavior
Scenario flow
Visual view of how this scenario connects to its concrete cases and environments. Nodes can be dragged and clicked.
Variants
Each row is a concrete case for this scenario, with a dedicated document and playground.
| Case | OS | Device | Browser | Keyboard | Status |
|---|---|---|---|---|---|
| ce-0074-contenteditable-with-content-security-policy | Windows 11 | Desktop or Laptop Any | Chrome 120.0 | US | draft |
Cases
Open a case to see the detailed description and its dedicated playground.
Related Scenarios
Other scenarios that share similar tags or category.
Tags: chrome, windows
autofocus attribute does not work on contenteditable
The autofocus attribute, which automatically focuses form inputs on page load, does not work on contenteditable elements. There is no built-in way to automatically focus a contenteditable region when a page loads.
1 case
Tags: chrome, windows
CSS contain property may affect contenteditable selection
When a contenteditable element or its parent has the CSS contain property, selection behavior may be affected. Selection may not extend beyond the contained element, and caret movement may be restricted.
1 case
Tags: chrome, windows
Fullscreen API may affect contenteditable focus and selection
When a contenteditable element enters or exits fullscreen mode using the Fullscreen API, focus and selection may be lost. The caret position may reset, and editing may be disrupted.
1 case
Tags: chrome, windows
ResizeObserver may cause layout shifts during contenteditable editing
When a ResizeObserver is attached to a contenteditable element, the observer may trigger during editing as content changes size. This can cause layout recalculations and visual jumps, especially when the contenteditable has dynamic height.
1 case
Tags: chrome, windows
contenteditable behavior differs inside Web Components
When a contenteditable element is inside a Web Component (custom element), its behavior may differ from when it's in standard HTML. Event handling, selection, and focus management may be affected by the component's shadow DOM or encapsulation.
1 case
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.