Skip to content

983689: Modified the content the How to section for the blazor pdfviewer #1454

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Sep 26, 2025
Merged

983689: Modified the content the How to section for the blazor pdfviewer #1454

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
380b826
983689: Modified the content the How to section for the blazor pdfviewer
Tamilselvan-Durairaj Sep 24, 2025
389852f
983689: Update the CI failures
Tamilselvan-Durairaj Sep 24, 2025
4ed362d
983689: Update the review changes
Tamilselvan-Durairaj Sep 25, 2025
b497a09
983689: Update the documentation for the smart pdfviewer
Tamilselvan-Durairaj Sep 25, 2025
7c353ae
983689: Revert the changes
Tamilselvan-Durairaj Sep 25, 2025
6dc3d20
983689: updated the cdn links
sathiyaseelanksf3503 Sep 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions Document-Processing/PDF/PDF-Viewer/blazor/how-to/content-security-policy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
---
layout: post
title: Use strict CSP in Blazor SfPdfViewer | Syncfusion
description: Learn here all about how to use the Content Security Policy in Syncfusion Blazor SfPdfViewer component.
description: Learn how to configure a strict Content Security Policy (CSP) for the Blazor SfPdfViewer, including required directives and their usage.
platform: document-processing
control: SfPdfViewer
documentation: ug
---

# Use strict CSP in Blazor SfPdfViewer Component
# Use strict CSP in Blazor SfPdfViewer

Content Security Policy (CSP) is a security feature implemented by web browsers that helps to protect against attacks such as cross-site scripting (XSS) and data injection. It limits the sources from which content can be loaded on a web page.
Content Security Policy (CSP) is a browser security mechanism that mitigates attacks such as cross-site scripting (XSS) and data injection by restricting the allowed sources for loaded content.

To enable strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), certain browser features are disabled by default. In order to use Syncfusion PDF Viewer control with strict CSP mode, it is essential to include following directives in the CSP meta tag.
When enforcing a strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), some features are blocked by default. To use the Blazor SfPdfViewer under strict CSP, include the following directives in the CSP meta tag.

* Syncfusion PDF Viewer control are rendered with calculated **inline styles** and **base64** font icons, which are blocked on a strict CSP-enabled site. To allow them, add the [`style-src 'self' 'unsafe-inline' blob:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the meta tag as follows.
* The SfPdfViewer renders calculated inline styles and Base64 font icons, which are blocked by strict CSP. Allow these by adding the [`style-src 'self' 'unsafe-inline' blob:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src 'self' data:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives.

* Syncfusion **material** and **tailwind** built-in themes contain a reference to the [`Roboto's external font`](https://fonts.googleapis.com/css?family=Roboto:400,500), which is also blocked. To allow them, add the [`external font`](https://fonts.googleapis.com/css?family=Roboto:400,500) reference to the [`style-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the above meta tag.
* The material and tailwind themes reference the Roboto font from Google Fonts, which is blocked under strict CSP. Allow it by including the Google Fonts endpoints in the [`style-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives.

* Syncfusion PDF Viewer control uses **web workers** and makes network connections, which are blocked on a strict CSP-enabled site. To allow them, add the [`worker-src 'self' blob:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src) and [`connect-src 'self' https://cdn.syncfusion.com data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) directives in the above meta tag.
* The SfPdfViewer uses web workers and makes network requests. Allow these by adding [`worker-src 'self' blob:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src) and [`connect-src 'self' https://cdn.syncfusion.com data:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src).

* For JavaScript execution and WebAssembly operations, the [`script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.syncfusion.com blob:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) directive is required to allow inline scripts, eval operations, and blob-based scripts.
* For JavaScript execution and WebAssembly, include [`script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.syncfusion.com blob:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) to allow inline scripts, eval, and blob-based scripts.

The resultant meta tag is included within the `<head>` tag and resolves the CSP violation on the application's side when utilizing Syncfusion PDF Viewer control with material and tailwind themes.
Include the following meta tag inside the `<head>` element to address CSP violations when using the SfPdfViewer with material and tailwind themes.

{% tabs %}
{% highlight razor tabtitle="HTML" %}
Expand All @@ -38,9 +38,9 @@ The resultant meta tag is included within the `<head>` tag and resolves the CSP
{% endhighlight %}
{% endtabs %}

N> In accordance with the latest security practices, the Syncfusion PDF Viewer control requires `'unsafe-eval'` in the script-src directive for proper JavaScript execution and WebAssembly operations. The `worker-src` directive is also essential for web worker functionality used by the PDF Viewer. Make sure to update your CSP meta tags to include these directives for optimal functionality and security compliance.
N> The SfPdfViewer requires `unsafe-eval` in the `script-src` directive for JavaScript execution and WebAssembly operations. The `worker-src` directive is also required for web worker functionality. Ensure these directives are present for correct behavior under strict CSP.

### Please find the usage of each directives:
### Directive usage

| Directive | Usage |
|------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
Expand All @@ -53,4 +53,4 @@ N> In accordance with the latest security practices, the Syncfusion PDF Viewer c
| `img-src 'self' blob: data:;` | Controls where images can be loaded from. `'self'` restricts to the same origin. `blob:` allows blob-based images. `data:` allows inline images (base64). |
| `frame-src 'self' blob:;` | Controls where frames can be loaded from. `'self'` allows same-origin frames. `blob:` allows blob-based frames, which may be used by the PDF Viewer for certain operations. |

[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Pdfviewer%20Sample%20With%20CSP).
[View the strict CSP sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Pdfviewer%20Sample%20With%20CSP).
48 changes: 22 additions & 26 deletions ...DF-Viewer/blazor/how-to/coordinate-conversion-between-page-and-client-points.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,31 @@
---
layout: post
title: Coordinate Conversion Between Page and Client Points | Syncfusion
description: Learn here all about how to perform coordinate conversion between page and client points into Syncfusion Blazor SfPdfViewer component and more.
title: Convert between page and client coordinates | Syncfusion
description: Learn how to convert between page and client coordinates in the Blazor SfPdfViewer using JavaScript interop helper functions.
platform: document-processing
control: SfPdfViewer
documentation: ug
---

# Coordinate Conversion Between Page and Client Points.
# Convert between page and client coordinates

The PDF viewer provides two essential conversion methods for translating between the document's internal page coordinate system and the client's browser coordinate system:
Use JavaScript interop helper functions to translate between the document page coordinate system and the browser client (viewport) coordinate system:

1. **Converting Page Coordinates to Client Coordinates**
1. Converting page coordinates to client coordinates

- `convertPagePointToClientPoint`: Transforms document page coordinates to browser viewport coordinates
- `convertPagePointToClientPoint`: Transforms document page coordinates to browser viewport coordinates.

2. Converting client coordinates to page coordinates

2. **Converting Client Coordinates to Page Coordinates**
- `convertClientPointToPagePoint`: Transforms browser viewport coordinates to document page coordinates.

- `convertClientPointToPagePoint`: Transforms browser viewport coordinates to document page coordinates
## Converting page coordinates to client coordinates

## Converting Page Coordinates to Client Coordinates
- **ConvertPagePointToClientPoint**
- ConvertPagePointToClientPoint translates a point from the document page coordinate system to the browser client (viewport) coordinate system.

This method is used to translate a point from the document's page coordinate system to the browser's client (viewport) coordinate system.
The following example shows how to convert page coordinates to client coordinates in a Blazor component.

The following code example shows how to convert page coordinates to client coordinates into the blazor component.

**Step 1:** Add a script file to your application and refer it to the head tag.
**Step 1:** Add a JavaScript file to the app and reference it in the head element.

```cshtml

Expand All @@ -38,7 +35,7 @@ The following code example shows how to convert page coordinates to client coord

```

**Step 2:** Add the following code to render the JS component in the blazor to the newly added JS file.
**Step 2:** Add the following code to the JavaScript file.

```javascript

Expand All @@ -53,7 +50,7 @@ window.convertPagePointToClientPoint = function (pagePoint) {

```

**Step 3:** Add the following code to the blazor component.
**Step 3:** Add the following code to the Blazor component.

```cshtml

Expand Down Expand Up @@ -89,16 +86,15 @@ window.convertPagePointToClientPoint = function (pagePoint) {
}

```
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Coordinate%20Conversion%20Between%20Page%20and%20Client%20Points)
[View the coordinate conversion sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Coordinate%20Conversion%20Between%20Page%20and%20Client%20Points)

## Converting Client Coordinates To Page Coordinates
- **ConvertClientPointToPagePoint**
## Converting client coordinates to page coordinates

This method is used to translate a point from the browser's client (viewport) coordinate system to the document's page coordinate system.
- ConvertClientPointToPagePoint translates a point from the browser client (viewport) coordinate system to the document page coordinate system.

The following code example shows how to convert client coordinates to page coordinates into the blazor component.
The following example shows how to convert client coordinates to page coordinates in a Blazor component.

**Step 1:** Add a script file to your application and refer it to the head tag.
**Step 1:** Add a JavaScript file to the app and reference it in the head element.

```cshtml

Expand All @@ -108,7 +104,7 @@ The following code example shows how to convert client coordinates to page coord

```

**Step 2:** Add the following code to render the JS component in the blazor to the newly added JS file.
**Step 2:** Add the following code to the JavaScript file.

```javascript

Expand All @@ -123,7 +119,7 @@ window.convertClientPointToPagePoint = function (clientPoint) {

```

**Step 3:** Add the following code to the blazor component.
**Step 3:** Add the following code to the Blazor component.

```cshtml

Expand Down Expand Up @@ -161,4 +157,4 @@ window.convertClientPointToPagePoint = function (clientPoint) {
}
}
```
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Coordinate%20Conversion%20Between%20Page%20and%20Client%20Points)
[View the coordinate conversion sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Coordinate%20Conversion%20Between%20Page%20and%20Client%20Points)
49 changes: 25 additions & 24 deletions ...t-Processing/PDF/PDF-Viewer/blazor/how-to/deploy-maui-using-android-emulator.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
---
layout: post
title: Deploy SfPdfViewer in Blazor MAUI in Android | Syncfusion
description: Learn how to deploy SfPdfViewer in Blazor MAUI Application on Android in Syncfusion Blazor SfPdfViewer component and much more details.
title: Deploy SfPdfViewer in Blazor MAUI on Android | Syncfusion
description: Learn how to render a PDF from an embedded resource and run the Syncfusion Blazor SfPdfViewer on Android using the .NET MAUI emulator.
platform: document-processing
control: SfPdfViewer
documentation: ug
---

# Render PDF document from embedded source in the MAUI Android app
# Render a PDF from an embedded resource in a MAUI Android app

In this section, we'll guide you how to render PDF Viewer from embedded source in a MAUI app. We'll break it down into simple steps to make it easy to follow.
This section describes how to render the PDF Viewer from an embedded resource in a .NET MAUI Android app using the Android emulator.

Refer [here](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/deploy-maui-windows) to create MAUI app.
To create the .NET MAUI project, see Create a [MAUI app](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/deploy-maui-windows)

## Add PDF Viewer component
## Add the PDF Viewer component

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer (Next Gen) component in the **~/Pages/Index.razor** file.
Add the Syncfusion Blazor PDF Viewer component in the **~/Pages/Index.razor** file.

{% tabs %}
{% highlight razor %}
Expand Down Expand Up @@ -45,41 +45,42 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer (Next Gen) c
base.OnInitialized();
}
}

{% endhighlight %}
{% endtabs %}

N> When developing a Blazor Android MAUI application, passing the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) to the PDF Viewer component as a `base64 string` is needed. This ensures that the application can retrieve and render a PDF document correctly within the PDF Viewer component.
N> In a Blazor .NET MAUI Android app, pass the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) as a Base64 data URL. This ensures the viewer can retrieve and render the PDF correctly.

## Run on Android emulator
## Run on the Android emulator

To run the PDF Viewer in a Blazor Android MAUI application using the Android emulator, follow these steps:
To run the PDF Viewer in a Blazor .NET MAUI Android app using the Android emulator, follow these steps:

![Run Windows machine](../getting-started/gettingstarted-images/emulator_maui.png)
![Run on Windows machine](../getting-started/gettingstarted-images/emulator_maui.png)

**Step 1** Set up the necessary dependencies, SDKs, and tools for Blazor Android MAUI on your Windows machine. Ensure that you have installed the required `Android SDK licenses`. If any errors occur during installation, follow the provided prompts or instructions to resolve them.
**Step 1** Install the required dependencies, SDKs, and tools for .NET MAUI Android on Windows. Ensure the Android SDK licenses are accepted. If errors occur during installation, follow the prompts to resolve them.

![android-sdk-liscence](../getting-started/gettingstarted-images/android-sdk-liscence_maui.png)
![Android SDK license acceptance](../getting-started/gettingstarted-images/android-sdk-liscence_maui.png)

**Step 2** Right-click the **~wwwroot/data/pdf_succinctly.pdf** file in Solution Explorer, go to `Properties`, and set Build Action to `Embedded Resource` and Copy to Output Directory to `Copy Always`.
**Step 2** In Solution Explorer, right-click **~wwwroot/data/pdf_succinctly.pdf**, choose `Properties`, set Build Action to `Embedded Resource`, and set Copy to Output Directory to `Copy always`.

![android_maui_properties](../getting-started/gettingstarted-images/android_maui_properties.png)
![Set embedded resource properties for the PDF file](../getting-started/gettingstarted-images/android_maui_properties.png)

**Step 3** Install and launch the Android Device Manager. Open the Android SDK Manager, go to the `SDK Tools` tab, select the `Android Device Manager` checkbox, and click `Apply` or `OK`. This will allow you to create, manage, and launch Android Virtual Devices (AVD's) for testing and running Android applications.
**Step 3** Install and launch Android Device Manager. In Android SDK Manager, on the `SDK Tools` tab, select `Android Device Manager` and click `Apply` or `OK`. This enables creating and managing Android Virtual Devices (AVD) for testing.

![picxel emulator](../getting-started/gettingstarted-images/pixcel-emulator_maui.png)
![Android Device Manager with a Pixel emulator](../getting-started/gettingstarted-images/pixcel-emulator_maui.png)

**Step 4** Ensure the Android emulator is running. Launch the Android Device Manager and create or select an existing AVD to run the emulator.
**Step 4** Ensure the Android emulator is running. In Android Device Manager, create or select an AVD and start the emulator.

Now, relaunch the project in emulator mode. It will render the PDF Viewer component using the Blazor Android MAUI application.
Finally, run the project with the emulator. The PDF Viewer component renders in the Blazor .NET MAUI Android app.

N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
N> For emulator issues, see Troubleshooting Android Emulator: https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting

![Blazor SfPdfViewer Component](../getting-started/gettingstarted-images/emulator.png)
![Blazor SfPdfViewer rendering in the Android emulator](../getting-started/gettingstarted-images/emulator.png)

>[View Sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Server%20Deployment/Maui/MauiBlazorAndroid).
>[View sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Server%20Deployment/Maui/MauiBlazorAndroid).

## See also

* [Supported Features: Desktop vs Mobile](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/overview#supported-features-desktop-vs-mobile).
* [Supported features: Desktop vs mobile](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/overview#supported-features-desktop-vs-mobile).

* [Render PDF document from url in the MAUI app](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/deploy-maui-windows).
* [Render a PDF document from a URL in the MAUI app](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/deploy-maui-windows).
Loading