This repository was archived by the owner on Aug 6, 2026. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
Task(1043334): Added the CSP docs for Rich Text Editor #336
Open
Muthukumar247
wants to merge
3
commits into
development
Choose a base branch
from
1043334-DEV
base: development
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
115 changes: 115 additions & 0 deletions
115
...tor-sdk/angular/rich-text-editor/validation-security/content-security-policy.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| --- | ||
| layout: post | ||
| title: Content Security Policy in Angular Rich Text Editor Component | Syncfusion | ||
| description: Learn how to configure Content Security Policy for the Syncfusion Angular Rich Text Editor component of Syncfusion Essential JS 2 and more. | ||
| platform: rich-text-editor-sdk | ||
| control: Content Security Policy | ||
| documentation: ug | ||
| domainurl: https://help.syncfusion.com/rich-text-editor-sdk | ||
| --- | ||
|
|
||
| # Content Security Policy (CSP) in Angular Rich Text Editor Component | ||
|
|
||
| Content Security Policy (CSP) is a security standard that helps prevent cross-site scripting (XSS) and other code-injection attacks by restricting the sources from which content can be loaded and executed in a web application. When integrating the Syncfusion Angular Rich Text Editor into an application that enforces a strict CSP, appropriate directives should be configured to support all editor features. | ||
|
|
||
| > For full functionality, the Rich Text Editor is recommended to be used with `style-src 'unsafe-inline'`, because the component dynamically applies inline styles to render and edit rich-text content. | ||
|
|
||
| > Important: | ||
| > For complete Rich Text Editor feature support, Syncfusion recommends including `style-src 'unsafe-inline'` in your Content Security Policy. Removing this directive may limit features that depend on dynamically generated inline styles. | ||
|
|
||
| ## Recommended CSP Configuration | ||
|
|
||
| The following example shows a recommended CSP configuration for an Angular application that hosts the Syncfusion Rich Text Editor. In Angular, the CSP is typically set in the `<head>` of `src/index.html`, or supplied as a response header from your web server. | ||
|
|
||
| ### Using a meta tag in `src/index.html` | ||
|
|
||
| ```html | ||
| <meta http-equiv="Content-Security-Policy" | ||
| content="default-src 'self'; | ||
| script-src 'self'; | ||
| style-src 'self' 'unsafe-inline'; | ||
| font-src 'self' data:; | ||
| img-src 'self' data: blob: https:; | ||
| connect-src 'self';" /> | ||
| ``` | ||
|
|
||
| ### Using a response header (recommended for production) | ||
|
|
||
| ```http | ||
| Content-Security-Policy: default-src 'self'; | ||
| script-src 'self'; | ||
| style-src 'self' 'unsafe-inline'; | ||
| font-src 'self' data:; | ||
| img-src 'self' data: blob: https:; | ||
| connect-src 'self' | ||
| ``` | ||
|
|
||
| ### Key directives | ||
|
|
||
| | Directive | Value | Purpose | | ||
| |---|---|---| | ||
| | `default-src` | `'self'` | Restricts all resource loading to the same origin by default. | | ||
| | `script-src` | `'self'` | Allows scripts from the same origin, including Angular's bootstrapping and runtime. | | ||
| | `style-src` | `'self' 'unsafe-inline'` | Permits inline styles used by inline-style-based rich-text formatting. | | ||
| | `font-src` | `'self' data:` | Allows fonts loaded from the same origin and inline data URIs. | | ||
| | `img-src` | `'self' data: blob: https:` | Permits images from the same origin, data URIs, blob URLs, and HTTPS sources (useful for image insertion). | | ||
| | `connect-src` | `'self'` | Restricts network connections (for example, AJAX and `HttpClient`) to the same origin. | | ||
|
|
||
| > Note: Additional CSP directives may be required depending on enabled Rich Text Editor features such as image upload, media embedding, external resources, custom fonts, or server-side integrations. | ||
|
|
||
| ## Why is `'unsafe-inline'` recommended? | ||
|
|
||
| The Rich Text Editor applies styles in two primary ways, and it is important to understand the distinction: | ||
|
|
||
| * **Semantic (HTML) formatting:** Common formatting such as **bold**, *italic*, underline, headings, and lists are represented using semantic HTML elements (for example, `<strong>`, `<em>`, `<u>`, `<h1>`–`<h6>`, `<ul>`, `<ol>`). These do not depend on inline styles. | ||
| * **Inline-style formatting:** Features such as **font color**, **background color**, **font family**, **font size**, **text alignment**, custom **style formats**, and other dynamically generated visual formatting may rely on inline styles applied at runtime through the browser's content-editable engine. | ||
|
|
||
| For these reasons, `style-src 'unsafe-inline'` is recommended to ensure complete feature support. Without it, the features that depend on dynamically generated inline styles may not render or function as expected. | ||
|
|
||
| ## Feature Impact | ||
|
|
||
| The following Rich Text Editor features are most likely to depend on inline styles: | ||
|
|
||
| * **Font color** — Applying a color to selected text. | ||
| * **Background color** — Applying a highlight or background color to text. | ||
| * **Font family** — Setting the typeface for selected content. | ||
| * **Font size** — Setting the text size for selected content. | ||
| * **Text alignment** — Left, center, right, and justify alignment. | ||
| * **Style formats** — Preset and custom paragraph/character style formats. | ||
| * **Custom formatting features** — User-defined styles applied through the toolbar or programmatically. | ||
|
|
||
| These features typically rely on inline styles or dynamically applied styling to represent and render formatting within the editor content. When inline styles are blocked by the browser's Content Security Policy, the visual formatting associated with these features may not be applied or displayed as expected. | ||
|
|
||
| ## Impact of CSP Restrictions | ||
|
|
||
| When `style-src 'unsafe-inline'` is removed from the policy (or not included), features that rely on dynamically generated inline styles may be affected. The following issues may occur: | ||
|
|
||
| * **Inline-style formatting not rendering correctly:** Font color, background color, font family, font size, text alignment, and style formats may not be visually applied to the editor content. | ||
| * **Toolbar actions producing incomplete visual results:** Applying inline-style-based formatting through the toolbar may have no visible effect on the editor's content. | ||
| * **Dynamic formatting styles being blocked by the browser:** Browsers that enforce CSP may silently or actively block any inline style applied at runtime, which can cause formatting changes to fail. | ||
| * **Loss of expected editing experience:** Features that rely on inline styles may behave differently or be unavailable, while HTML-based semantic formatting is generally unaffected. | ||
|
|
||
| > Allowing `'unsafe-inline'` under `style-src` enables inline CSS only and does not allow inline JavaScript execution. Applications that enforce a strict CSP without `'unsafe-inline'` should thoroughly validate Rich Text Editor functionality and formatting behavior. | ||
|
|
||
| ## Strict CSP Considerations | ||
|
|
||
| Applications that enforce a strict CSP using only: | ||
|
|
||
| ```http | ||
| style-src 'self' | ||
| ``` | ||
|
|
||
| without `'unsafe-inline'`, can generally still load the Syncfusion Rich Text Editor. The editor may continue to function for basic content entry and certain semantic HTML formatting features. However, features that depend on inline styles may have reduced functionality or may not render as expected when inline styles are blocked. | ||
|
|
||
| If a strict CSP is needed for your application, consider: | ||
|
|
||
| * Validating which Rich Text Editor features are essential to your use case. | ||
| * Testing the editor thoroughly under your CSP configuration. | ||
| * Reviewing organizational CSP requirements and validating whether alternative CSP mechanisms satisfy both security and functional requirements. Depending on the Rich Text Editor features used, inline-style-dependent functionality may still need the inclusion of `style-src 'unsafe-inline'`. | ||
|
|
||
| ## See also | ||
|
|
||
| * [XHTML validation](./xhtml-validation) | ||
| * [Cross-Site scripting (XSS)](./xhtml-validation#cross-site-scripting-xss) | ||
| * [Form validation](./form-validation) | ||
| * [Read-only mode](./read-only-mode) | ||
124 changes: 124 additions & 0 deletions
124
...dk/asp-net-core/rich-text-editor/validation-security/content-security-policy.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| --- | ||
| layout: post | ||
| title: Content Security Policy in ASP.NET Core Rich Text Editor Control | ||
| description: Learn here all about Content Security Policy in Syncfusion ASP.NET Core Rich Text Editor control of Syncfusion Essential JS 2 and more. | ||
| platform: rich-text-editor-sdk | ||
| control: Content Security Policy | ||
| publishingplatform: rich-text-editor-sdk | ||
| documentation: ug | ||
| --- | ||
|
|
||
| # Content Security Policy (CSP) in ASP.NET Core Rich Text Editor Control | ||
|
|
||
| Content Security Policy (CSP) is a security standard that helps prevent cross-site scripting (XSS) and other code-injection attacks by restricting the sources from which content can be loaded and executed in a web application. When integrating the Syncfusion ASP.NET Core Rich Text Editor into an application that enforces a strict CSP, appropriate directives should be configured to support all editor features. | ||
|
|
||
| > For full functionality, the Rich Text Editor is recommended to be used with `style-src 'unsafe-inline'`, because the component dynamically applies inline styles to render and edit rich-text content. | ||
|
|
||
| > Important: | ||
| > For complete Rich Text Editor feature support, Syncfusion recommends including `style-src 'unsafe-inline'` in your Content Security Policy. Removing this directive may limit features that depend on dynamically generated inline styles. | ||
|
|
||
| ## Recommended CSP Configuration | ||
|
|
||
| The following example shows a recommended CSP configuration for an ASP.NET Core application that hosts the Syncfusion Rich Text Editor. The CSP is typically supplied as a response header from the ASP.NET Core middleware or set via a meta tag in `Views/Shared/_Layout.cshtml` or `Pages/Shared/_Layout.cshtml`. | ||
|
|
||
| ### Using a response header in `Startup.cs` (recommended for production) | ||
|
|
||
| ```csharp | ||
| public void Configure(IApplicationBuilder app, IWebHostEnvironment env) | ||
| { | ||
| // ...existing code... | ||
| app.Use(async (context, next) => | ||
| { | ||
| context.Response.Headers.Add("Content-Security-Policy", | ||
| "default-src 'self'; " + | ||
| "script-src 'self'; " + | ||
| "style-src 'self' 'unsafe-inline'; " + | ||
| "font-src 'self' data:; " + | ||
| "img-src 'self' data: blob: https:; " + | ||
| "connect-src 'self';"); | ||
| await next(); | ||
| }); | ||
| // ...existing code... | ||
| } | ||
| ``` | ||
|
|
||
| ### Using a meta tag in `_Layout.cshtml` | ||
|
|
||
| ```html | ||
| <meta http-equiv="Content-Security-Policy" | ||
| content="default-src 'self'; | ||
| script-src 'self'; | ||
| style-src 'self' 'unsafe-inline'; | ||
| font-src 'self' data:; | ||
| img-src 'self' data: blob: https:; | ||
| connect-src 'self';" /> | ||
| ``` | ||
|
|
||
| ### Key directives | ||
|
|
||
| | Directive | Value | Purpose | | ||
| |---|---|---| | ||
| | `default-src` | `'self'` | Restricts all resource loading to the same origin by default. | | ||
| | `script-src` | `'self'` | Allows scripts from the same origin, including the editor's JavaScript runtime. | | ||
| | `style-src` | `'self' 'unsafe-inline'` | Permits inline styles used by inline-style-based rich-text formatting. | | ||
| | `font-src` | `'self' data:` | Allows fonts loaded from the same origin and inline data URIs. | | ||
| | `img-src` | `'self' data: blob: https:` | Permits images from the same origin, data URIs, blob URLs, and HTTPS sources (useful for image insertion). | | ||
| | `connect-src` | `'self'` | Restricts network connections (for example, AJAX) to the same origin. | | ||
|
|
||
| > Note: Additional CSP directives may be required depending on enabled Rich Text Editor features such as image upload, media embedding, external resources, custom fonts, or server-side integrations. | ||
|
|
||
| ## Why is `'unsafe-inline'` recommended? | ||
|
|
||
| The Rich Text Editor applies styles in two primary ways, and it is important to understand the distinction: | ||
|
|
||
| * **Semantic (HTML) formatting:** Common formatting such as **bold**, *italic*, underline, headings, and lists are represented using semantic HTML elements (for example, `<strong>`, `<em>`, `<u>`, `<h1>`–`<h6>`, `<ul>`, `<ol>`). These do not depend on inline styles. | ||
| * **Inline-style formatting:** Features such as **font color**, **background color**, **font family**, **font size**, **text alignment**, custom **style formats**, and other dynamically generated visual formatting may rely on inline styles applied at runtime through the browser's content-editable engine. | ||
|
|
||
| For these reasons, `style-src 'unsafe-inline'` is recommended to ensure complete feature support. Without it, the features that depend on dynamically generated inline styles may not render or function as expected. | ||
|
|
||
| ## Feature Impact | ||
|
|
||
| The following Rich Text Editor features are most likely to depend on inline styles: | ||
|
|
||
| * **Font color** — Applying a color to selected text. | ||
| * **Background color** — Applying a highlight or background color to text. | ||
| * **Font family** — Setting the typeface for selected content. | ||
| * **Font size** — Setting the text size for selected content. | ||
| * **Text alignment** — Left, center, right, and justify alignment. | ||
| * **Style formats** — Preset and custom paragraph/character style formats. | ||
| * **Custom formatting features** — User-defined styles applied through the toolbar or programmatically. | ||
|
|
||
| These features typically rely on inline styles or dynamically applied styling to represent and render formatting within the editor content. When inline styles are blocked by the browser's Content Security Policy, the visual formatting associated with these features may not be applied or displayed as expected. | ||
|
|
||
| ## Impact of CSP Restrictions | ||
|
|
||
| When `style-src 'unsafe-inline'` is removed from the policy (or not included), features that rely on dynamically generated inline styles may be affected. The following issues may occur: | ||
|
|
||
| * **Inline-style formatting not rendering correctly:** Font color, background color, font family, font size, text alignment, and style formats may not be visually applied to the editor content. | ||
| * **Toolbar actions producing incomplete visual results:** Applying inline-style-based formatting through the toolbar may have no visible effect on the editor's content. | ||
| * **Dynamic formatting styles being blocked by the browser:** Browsers that enforce CSP may silently or actively block any inline style applied at runtime, which can cause formatting changes to fail. | ||
| * **Loss of expected editing experience:** Features that rely on inline styles may behave differently or be unavailable, while HTML-based semantic formatting is generally unaffected. | ||
|
|
||
| > Allowing `'unsafe-inline'` under `style-src` enables inline CSS only and does not allow inline JavaScript execution. Applications that enforce a strict CSP without `'unsafe-inline'` should thoroughly validate Rich Text Editor functionality and formatting behavior. | ||
|
|
||
| ## Strict CSP Considerations | ||
|
|
||
| Applications that enforce a strict CSP using only: | ||
|
|
||
| ```http | ||
| style-src 'self' | ||
| ``` | ||
|
|
||
| without `'unsafe-inline'`, can generally still load the Syncfusion Rich Text Editor. The editor may continue to function for basic content entry and certain semantic HTML formatting features. However, features that depend on inline styles may have reduced functionality or may not render as expected when inline styles are blocked. | ||
|
|
||
| If a strict CSP is needed for your application, consider: | ||
|
|
||
| * Validating which Rich Text Editor features are essential to your use case. | ||
| * Testing the editor thoroughly under your CSP configuration. | ||
| * Reviewing organizational CSP requirements and validating whether alternative CSP mechanisms satisfy both security and functional requirements. Depending on the Rich Text Editor features used, inline-style-dependent functionality may still need the inclusion of `style-src 'unsafe-inline'`. | ||
|
|
||
| ## See also | ||
|
|
||
| * [XHTML validation](./xhtml-validation) | ||
| * [Form support](./form-support) | ||
| * [Read-only mode](./read-only-mode) |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could you combine the heading and content seems to repetitively message the same content.