diff --git a/.gitignore b/.gitignore
index a5aba93..03b4076 100644
--- a/.gitignore
+++ b/.gitignore
@@ -49,7 +49,6 @@ BenchmarkDotNet.Artifacts/
project.lock.json
project.fragment.lock.json
artifacts/
-**/Properties/launchSettings.json
*_i.c
*_p.c
diff --git a/README.md b/README.md
index 587a572..34186a8 100644
--- a/README.md
+++ b/README.md
@@ -3,31 +3,243 @@
[](https://docs.devexpress.com/GeneralInformation/403183)
[](#does-this-example-address-your-development-requirementsobjectives)
-# Product/Platform - Task
+# Reporting for Web - Content Security Policy
+This repository contains sample Angular, React and Vue projects with integrated Web Document Viewer and Web Report Designer components.
-This is the repository template for creating new examples. Describe the solved task here.
+## Angular
-Put a screenshot that illustrates the result here.
+The Native Report Viewer and Report Designer are integrated to an Angular project created with Angular CLI.
+For more information on CSP in Angular framework, refer to the following documentation article: [Content Security Policy](https://angular.dev/best-practices/security#content-security-policy).
-Then, add implementation details (steps, code snippets, and other technical information in a free form), or add a link to an existing document with implementation details.
+The following meta tag shows the minimum required CSP for our reporting controls:
-## Files to Review
+```html
+
+```
-- link.cs (VB: link.vb)
-- link.js
-- ...
+> [!IMPORTANT]
+> We are using the placeholder random-nonce-value to denote the nonce in sample projects. You need to generate a random number, unique for each HTTP request.
-## Documentation
+### Run the Project
-- link
-- link
-- ...
+Run the server application. To do this, run the following command from the *ServerApp* folder:
+
+```cmd
+dotnet run
+```
+
+To run the client application, run the following commands:
+
+```cmd
+npm install
+npm start
+```
+
+### Files to Review
+
+**Viewer:**
+
+- [index.html](/angular/viewer/src/index.html)
+- [app.config.ts](/angular/viewer/src/app/app.config.ts)
+- [angular.json](/angular/viewer/angular.json)
+
+**Designer:**
+
+- [index.html](/angular/designer/src/index.html)
+- [app.config.ts](/angular/designer/src/app/app.config.ts)
+- [angular.json](/angular/designer/angular.json)
+
+### Documentation
+
+- [Content Security Policy in Angular Apps](https://docs.devexpress.com/XtraReports/404552/web-reporting/angular-reporting/content-security-policy)
+
+
+## React
+
+### Vite
+
+The *vite* folder contains Vue applications created with [Vite](https://vite.dev/guide/).
+
+For more information on CSP in Vite-based apps, refer to the following article: [Content Security Policy (CSP)](https://vite.dev/guide/features#content-security-policy-csp).
+
+The following meta tag shows the minimum required CSP for our reporting controls:
+
+```html
+
+```
+
+> [!IMPORTANT]
+> We are using the placeholder `random-nonce-value` to denote the nonce in sample projects. You need to generate a random number, unique for each HTTP request.
+
+#### Run the Project
+
+Run the server application. To do this, run the following command from the *ServerApp* folder:
+
+```cmd
+dotnet run
+```
+
+To run the client application, run the following commands:
+
+```cmd
+npm install
+npm run dev
+```
+
+#### Files to Review
+
+**Viewer:**
+
+- [index.html](/react/vite/viewer/index.html)
+- [vite.config.js](/react/vite/viewer/vite.config.js)
+
+**Designer:**
+
+- [index.html](/react/vite/designer/index.html)
+- [vite.config.js](/react/vite/designer/vite.config.js)
+
+### Next.js
+
+The *nextjs* folder contains Vue applications created with [Next.js](https://nextjs.org/).
+
+For more information on CSP in Next.js apps, refer to the following article: [Content Security Policy (CSP)](https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy).
+
+#### Run the Project
+
+Run the server application. To do this, run the following command from the *ServerApp* folder:
+
+```cmd
+dotnet run
+```
+
+To run the client application, run the following commands:
+
+```cmd
+npm install
+npm run dev
+```
+
+#### Files to Review
+
+**Viewer:**
+
+**Designer:**
+
+
+## Vue
+
+### Vite
+
+The *vite* folder contains Vue applications created with [Vite](https://vite.dev/guide/).
+
+For more information on CSP in Vite-based apps, refer to the following article: [Content Security Policy (CSP)](https://vite.dev/guide/features#content-security-policy-csp).
+
+The following meta tag shows the minimum required CSP for our reporting controls:
+
+
+```html
+
+```
+
+> [!IMPORTANT]
+> We are using the placeholder `random-nonce-value` to denote the nonce in sample projects. You need to generate a random number, unique for each HTTP request.
+
+#### Run the Project
+
+Run the server application. To do this, run the following command from the *ServerApp* folder:
+
+```cmd
+dotnet run
+```
+
+To run the client application, run the following commands:
+
+```cmd
+npm install
+npm run dev
+```
+
+#### Files to Review
+
+**Viewer:**
+
+- [index.html](/vue/vite/viewer/index.html)
+- [vite.config.js](/vue/vite/viewer/vite.config.js)
+
+**Designer:**
+
+- [index.html](/vue/vite/designer/index.html)
+- [vite.config.js](/vue/vite/designer/vite.config.js)
+
+### Vue CLI
+
+The *vue-cli* folder contains Vue applications created with [Vue CLI](https://cli.vuejs.org/).
+
+The following meta tag shows the minimum required CSP for our reporting controls:
+
+```html
+
+```
+
+#### Run the Project
+
+Run the server application. To do this, run the following command from the *ServerApp* folder:
+
+```cmd
+dotnet run
+```
+
+To run the client application, run the following commands:
+
+```cmd
+npm install
+npm run serve
+```
+
+#### Files to Review
+
+**Viewer:**
+
+- [index.html](/vue/vue-cli/viewer/public/index.html)
+- [vue.config.js](/vue/vue-cli/viewer/vue.config.js)
+
+**Designer:**
+
+- [index.html](/vue/vue-cli/viewer/public/index.html)
+- [vue.config.js](/vue/vue-cli/viewer/vue.config.js)
+
+### Documentation
+
+- [Content Security Policy in Vue Apps](https://docs.devexpress.com/XtraReports/404558/web-reporting/vue-reporting/content-security-policy)
## More Examples
-- link
-- link
-- ...
+- [Reporting for ASP.NET Core - Content Security Policy (CSP)](https://github.com/DevExpress-Examples/reporting-asp-net-core-content-security-policy)
+
## Does this example address your development requirements/objectives?
diff --git a/ServerApp/Properties/launchSettings.json b/ServerApp/Properties/launchSettings.json
new file mode 100644
index 0000000..861317c
--- /dev/null
+++ b/ServerApp/Properties/launchSettings.json
@@ -0,0 +1,12 @@
+{
+ "profiles": {
+ "ServerApp.Server": {
+ "commandName": "Project",
+ "launchBrowser": true,
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ },
+ "applicationUrl": "http://localhost:5000"
+ }
+ }
+}
\ No newline at end of file
diff --git a/angular/designer/angular.json b/angular/designer/angular.json
index d637b7a..b0650fc 100644
--- a/angular/designer/angular.json
+++ b/angular/designer/angular.json
@@ -29,7 +29,9 @@
"styles": [
"src/styles.css"
],
- "scripts": []
+ "scripts": [
+ "src/knockout_global.js"
+ ]
},
"configurations": {
"production": {
@@ -92,5 +94,8 @@
}
}
}
+ },
+ "cli": {
+ "analytics": false
}
}
diff --git a/angular/designer/src/app/app.component.ts b/angular/designer/src/app/app.component.ts
index d0a48cb..f1ed4c8 100644
--- a/angular/designer/src/app/app.component.ts
+++ b/angular/designer/src/app/app.component.ts
@@ -31,5 +31,5 @@ export class AppComponent {
// The report name.
reportName = "TestReport";
// The backend application URL.
- host = 'https://localhost:5001/';
+ host = 'http://localhost:5000/';
}
diff --git a/angular/designer/src/app/app.config.ts b/angular/designer/src/app/app.config.ts
index a1e7d6f..93aa257 100644
--- a/angular/designer/src/app/app.config.ts
+++ b/angular/designer/src/app/app.config.ts
@@ -1,8 +1,15 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { CSP_NONCE, ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
-
import { routes } from './app.routes';
+
+// For demonstration purposes only.
+// Generate a random number, unique for each HTTP request.
+const HARDCODED_NONCE = 'random_nonce_value';
+
export const appConfig: ApplicationConfig = {
- providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+ providers: [
+ provideZoneChangeDetection({ eventCoalescing: true }),
+ provideRouter(routes),
+ { provide: CSP_NONCE, useValue: HARDCODED_NONCE }]
};
diff --git a/angular/designer/src/index.html b/angular/designer/src/index.html
index f9fbce0..2b085e2 100644
--- a/angular/designer/src/index.html
+++ b/angular/designer/src/index.html
@@ -5,6 +5,13 @@
Designer
+
diff --git a/angular/designer/src/knockout_global.js b/angular/designer/src/knockout_global.js
new file mode 100644
index 0000000..1014fa3
--- /dev/null
+++ b/angular/designer/src/knockout_global.js
@@ -0,0 +1,8 @@
+(function () {
+ window.eval = function (p) {
+ if (p !== "this") {
+ throw new Error("Invalid argument for eval. Only 'this' is allowed.");
+ }
+ return window;
+ };
+})();
\ No newline at end of file
diff --git a/angular/viewer/angular.json b/angular/viewer/angular.json
index 088d8d1..c89e931 100644
--- a/angular/viewer/angular.json
+++ b/angular/viewer/angular.json
@@ -11,11 +11,11 @@
"prefix": "app",
"architect": {
"build": {
- "builder": "@angular-devkit/build-angular:application",
+ "builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/viewer",
"index": "src/index.html",
- "browser": "src/main.ts",
+ "main": "src/main.ts",
"polyfills": [
"zone.js"
],
@@ -92,5 +92,8 @@
}
}
}
+ },
+ "cli": {
+ "analytics": false
}
}
diff --git a/angular/viewer/src/app/app.component.ts b/angular/viewer/src/app/app.component.ts
index 82c259e..a75fa56 100644
--- a/angular/viewer/src/app/app.component.ts
+++ b/angular/viewer/src/app/app.component.ts
@@ -21,6 +21,6 @@ import { DxReportViewerModule } from 'devexpress-reporting-angular';
export class AppComponent {
title = 'DXReportViewerSample';
reportUrl: string = 'TestReport';
- hostUrl: string = 'https://localhost:5001/';
+ hostUrl: string = 'http://localhost:5000/';
invokeAction: string = '/DXXRDV';
}
diff --git a/angular/viewer/src/app/app.config.ts b/angular/viewer/src/app/app.config.ts
index a1e7d6f..cb9f7c3 100644
--- a/angular/viewer/src/app/app.config.ts
+++ b/angular/viewer/src/app/app.config.ts
@@ -1,8 +1,18 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { CSP_NONCE, ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
-
import { routes } from './app.routes';
+// For demonstration purposes only.
+// Generate a random number, unique for each HTTP request.
+const HARDCODED_NONCE = 'random_nonce_value';
+
export const appConfig: ApplicationConfig = {
- providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+ providers: [
+ provideZoneChangeDetection({ eventCoalescing: true }),
+ provideRouter(routes),
+ {
+ provide: CSP_NONCE,
+ useValue: HARDCODED_NONCE
+ }
+ ]
};
diff --git a/angular/viewer/src/index.html b/angular/viewer/src/index.html
index b9eda8c..c234212 100644
--- a/angular/viewer/src/index.html
+++ b/angular/viewer/src/index.html
@@ -5,9 +5,16 @@
Viewer
+
-
+