Add csp

.gitignore

@@ -49,7 +49,6 @@ BenchmarkDotNet.Artifacts/
 project.lock.json
 project.fragment.lock.json
 artifacts/
-**/Properties/launchSettings.json
 
 *_i.c
 *_p.c

README.md

@@ -3,31 +3,243 @@
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
 <!-- default badges end -->
-# 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
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self';
+  img-src data: https: http:;
+  script-src 'self';
+  style-src 'self' 'nonce-random_nonce_value';
+  connect-src 'self' http://localhost:5000;
+  worker-src 'self' blob:;
+  frame-src 'self' blob:;" />
+```
 
-- 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
+<meta http-equiv="Content-Security-Policy" content="default-src 'self';
+img-src data: https: http:;
+script-src 'self';
+style-src 'self' 'nonce-random_nonce_value';
+connect-src 'self' http://localhost:5000;
+worker-src 'self' blob:;
+frame-src 'self' blob:;" />
+```
+
+> [!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
+<meta http-equiv="Content-Security-Policy" content="default-src 'self';
+img-src data: https: http:;
+script-src 'self';
+style-src 'self' 'nonce-random_nonce_value';
+connect-src 'self' http://localhost:5000;
+worker-src 'self' blob:;
+frame-src 'self' blob:;" />
+```
+
+> [!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
+<meta http-equiv="Content-Security-Policy" content="default-src 'self';
+img-src data: https: http:;
+script-src 'self';
+style-src 'self' 'unsafe-inline';
+connect-src 'self' http://localhost:5000 ws:;
+worker-src 'self' blob:;
+frame-src 'self' blob:;" />
+```
+
+#### 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)
+
 <!-- feedback -->
 ## Does this example address your development requirements/objectives?
 

ServerApp/Properties/launchSettings.json

@@ -0,0 +1,12 @@
+{
+  "profiles": {
+    "ServerApp.Server": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "applicationUrl": "http://localhost:5000"
+    }
+  }
+}

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
   }
 }

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/';
 }

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 }]
 };

angular/designer/src/index.html

@@ -5,6 +5,13 @@
   <title>Designer</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self';
+  img-src data: https: http:;
+  script-src 'self';
+  style-src 'self' 'nonce-random_nonce_value';
+  connect-src 'self' http://localhost:5000;
+  worker-src 'self' blob:;
+  frame-src 'self' blob:;" />
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>

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; 
+    };
+})();

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
   }
 }

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';
 }