Demos: Add Content Security Policy (CSP) validation

.github/workflows/visual-tests-demos.yml

@@ -632,7 +632,6 @@ jobs:
       uses: ./.github/actions/setup-chrome
       with:
         chrome-version: '145.0.7632.67'
-        runner-type: 'github-hosted'
 
     - name: Use Node.js
       uses: actions/setup-node@v4
@@ -787,7 +786,6 @@ jobs:
       uses: ./.github/actions/setup-chrome
       with:
         chrome-version: '145.0.7632.67'
-        runner-type: 'github-hosted'
 
     - name: Use Node.js
       uses: actions/setup-node@v4
@@ -916,7 +914,6 @@ jobs:
         uses: ./.github/actions/setup-chrome
         with:
           chrome-version: '145.0.7632.67'
-          runner-type: 'github-hosted'
 
       - name: Use Node.js
         uses: actions/setup-node@v4
@@ -1069,3 +1066,221 @@ jobs:
           pattern: accessibility-reports-*
           delete-merged: true
 
+  csp-check-jquery:
+    name: CSP check (jQuery)
+    needs: [check-should-run, build-devextreme]
+    if: |
+      always() &&
+      needs.check-should-run.outputs.should-run == 'true' &&
+      needs.build-devextreme.result == 'success'
+    runs-on: devextreme-shr2
+    timeout-minutes: 60
+
+    steps:
+    - name: Get sources
+      uses: actions/checkout@v4
+
+    - name: Download artifacts
+      uses: actions/download-artifact@v4
+      with:
+        name: devextreme-artifacts-jquery
+        path: ./packages/devextreme
+
+    - name: Unpack artifacts
+      working-directory: ./packages/devextreme
+      run: 7z x artifacts.zip -aoa
+
+    - name: Setup Chrome
+      uses: ./.github/actions/setup-chrome
+      with:
+        chrome-version: '145.0.7632.67'
+
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+
+    - uses: pnpm/action-setup@v4
+      with:
+        run_install: false
+
+    - name: Get pnpm store directory
+      shell: bash
+      run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - uses: actions/cache/restore@v4
+      name: Restore pnpm cache
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-cache-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-cache
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+    - name: Start CSP Server
+      run: node apps/demos/utils/server/csp-server.js 8080 &
+
+    - name: Run CSP Check
+      working-directory: apps/demos
+      env:
+        CSP_FRAMEWORKS: jQuery
+        CHROME_PATH: google-chrome-stable
+      run: node utils/server/csp-check.js
+
+    - name: Upload CSP report
+      if: always()
+      uses: actions/upload-artifact@v4
+      with:
+        name: csp-violations-jquery
+        path: apps/demos/csp-reports/
+        if-no-files-found: ignore
+
+  csp-check-frameworks:
+    name: CSP check (${{ matrix.FRAMEWORK }})
+    needs: [check-should-run, determine-framework-tests-scope, build-devextreme]
+    if: |
+      always() &&
+      needs.check-should-run.outputs.should-run == 'true' &&
+      needs.determine-framework-tests-scope.result == 'success' &&
+      needs.determine-framework-tests-scope.outputs.framework-tests-scope != 'none' &&
+      needs.build-devextreme.result == 'success'
+    strategy:
+      fail-fast: false
+      matrix:
+        FRAMEWORK: [React, Vue, Angular]
+    runs-on: devextreme-shr2
+    timeout-minutes: 60
+
+    steps:
+    - name: Get sources
+      uses: actions/checkout@v4
+
+    - name: Download devextreme sources
+      uses: actions/download-artifact@v4
+      with:
+        name: devextreme-sources
+
+    - name: Setup Chrome
+      uses: ./.github/actions/setup-chrome
+      with:
+        chrome-version: '145.0.7632.67'
+
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+
+    - uses: pnpm/action-setup@v4
+      with:
+        run_install: false
+
+    - name: Get pnpm store directory
+      shell: bash
+      run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - uses: actions/cache/restore@v4
+      name: Restore pnpm cache
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-cache-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-cache
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+    - name: Install tgz
+      working-directory: apps/demos
+      run: pnpm add ../../devextreme-installer.tgz ../../devextreme-dist-installer.tgz ../../devextreme-react-installer.tgz ../../devextreme-vue-installer.tgz ../../devextreme-angular-installer.tgz
+
+    - name: Start CSP Server
+      run: node apps/demos/utils/server/csp-server.js 8080 &
+
+    - name: Run CSP Check
+      working-directory: apps/demos
+      env:
+        CSP_FRAMEWORKS: ${{ matrix.FRAMEWORK }}
+        CHROME_PATH: google-chrome-stable
+      run: node utils/server/csp-check.js
+
+    - name: Upload CSP report
+      if: always()
+      uses: actions/upload-artifact@v4
+      with:
+        name: csp-violations-${{ matrix.FRAMEWORK }}
+        path: apps/demos/csp-reports/
+        if-no-files-found: ignore
+
+  csp-report-summary:
+    name: CSP Violations Summary
+    runs-on: devextreme-shr2
+    needs: [check-should-run, csp-check-jquery, csp-check-frameworks]
+    if: always() && needs.check-should-run.outputs.should-run == 'true'
+    timeout-minutes: 5
+
+    steps:
+      - name: Get sources
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Download all CSP reports
+        uses: actions/download-artifact@v4
+        with:
+          pattern: csp-violations-*
+          path: csp-reports-all
+          merge-multiple: true
+        continue-on-error: true
+
+      - name: Summarize CSP violations
+        run: |
+          mkdir -p apps/demos/csp-reports
+
+          echo "## CSP Violations Report" >> $GITHUB_STEP_SUMMARY
+          echo '' >> $GITHUB_STEP_SUMMARY
+
+          GRAND_TOTAL=0
+          for report in csp-reports-all/csp-violations-*.jsonl; do
+            [ -f "$report" ] || continue
+            FRAMEWORK=$(basename "$report" | sed 's/csp-violations-//;s/\.jsonl//')
+            cp "$report" "apps/demos/csp-reports/"
+
+            if [ -s "$report" ]; then
+              COUNT=$(wc -l < "$report" | tr -d ' ')
+              GRAND_TOTAL=$((GRAND_TOTAL + COUNT))
+              echo "### ⚠️ ${FRAMEWORK}: ${COUNT} violation(s)" >> $GITHUB_STEP_SUMMARY
+              echo '' >> $GITHUB_STEP_SUMMARY
+              echo '<details>' >> $GITHUB_STEP_SUMMARY
+              echo '<summary>Show detailed report</summary>' >> $GITHUB_STEP_SUMMARY
+              echo '' >> $GITHUB_STEP_SUMMARY
+              echo '```' >> $GITHUB_STEP_SUMMARY
+              CSP_REPORT_FILE="$report" node apps/demos/utils/server/csp-report-summary.js >> $GITHUB_STEP_SUMMARY
+              echo '```' >> $GITHUB_STEP_SUMMARY
+              echo '' >> $GITHUB_STEP_SUMMARY
+              echo '</details>' >> $GITHUB_STEP_SUMMARY
+              echo '' >> $GITHUB_STEP_SUMMARY
+            else
+              echo "### ✅ ${FRAMEWORK}: No violations" >> $GITHUB_STEP_SUMMARY
+              echo '' >> $GITHUB_STEP_SUMMARY
+            fi
+          done
+
+          if [ "$GRAND_TOTAL" -eq 0 ]; then
+            echo "✅ No CSP violations detected across all frameworks."
+          else
+            echo "⚠️  Total: $GRAND_TOTAL CSP violation(s)"
+          fi
+
+      - name: Upload merged CSP reports
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: csp-violations-report
+          path: apps/demos/csp-reports/
+          if-no-files-found: ignore
+

apps/demos/.gitignore

@@ -33,5 +33,7 @@ Demos/**/tsconfig.json
 **/.DS_Store
 publish-demos
 
+csp-reports
+
 .angular
 angular.json

apps/demos/Demos/DataGrid/PDFExportImages/jQuery/index.html

@@ -11,10 +11,6 @@
       integrity="sha512-+EeCylkt9WHJk5tGJxYdecHOcXFRME7qnbsfeMsdQL6NUPYm2+uGFmyleEqsmVoap/f3dN/sc3BX9t9kHXkHHg=="
       crossorigin="anonymous"
     ></script>
-    <script>
-      window.jsPDF = window.jspdf.jsPDF;
-    </script>
-
     <script src="../../../../node_modules/jquery/dist/jquery.min.js"></script>
     <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
     <script src="../../../../node_modules/devextreme-dist/js/dx.all.js"></script>

apps/demos/Demos/DataGrid/PDFExportMultipleGrids/jQuery/index.html

@@ -15,9 +15,6 @@
       integrity="sha512-+EeCylkt9WHJk5tGJxYdecHOcXFRME7qnbsfeMsdQL6NUPYm2+uGFmyleEqsmVoap/f3dN/sc3BX9t9kHXkHHg=="
       crossorigin="anonymous"
     ></script>
-    <script>
-      window.jsPDF = window.jspdf.jsPDF;
-    </script>
     <script src="data.js"></script>
     <script src="index.js"></script>
   </head>

apps/demos/Demos/Stepper/FormIntegration/jQuery/index.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
     <script src="../../../../node_modules/jquery/dist/jquery.min.js"></script>
     <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme/dist/css/dx.light.css" />
-    <script src="../../../../node_modules/devextreme-dist/js/dx.all.debug.js"></script>
+    <script src="../../../../node_modules/devextreme-dist/js/dx.all.js"></script>
     <script src="data.js"></script>
     <link rel="stylesheet" type="text/css" href="styles.css" />
     <script src="index.js"></script>

apps/demos/package.json

@@ -177,7 +177,10 @@
         "lint-non-demos": "pnpx nx run-many -t lint-js lint-css lint-html -p devextreme-demos",
         "lint": "pnpm run lint-non-demos && pnpm run lint-demos",
         "test-testcafe": "ts-node utils/visual-tests/testcafe-runner.ts",
+        "test-testcafe:csp": "cross-env CSP_REPORT=true ts-node utils/visual-tests/testcafe-runner.ts",
         "test-testcafe:accessibility": "cross-env STRATEGY=accessibility CONSTEL=jquery node utils/visual-tests/testcafe-runner.ts",
+        "csp-server": "node utils/server/csp-server.js 8080",
+        "csp-check": "node utils/server/csp-check.js",
         "fix-lint": "prettier --write . && eslint --fix . && stylelint **/*.{css,vue} --fix",
         "prettier": "prettier",
         "build-bundles": "gulp bundles",

apps/demos/testing/common.test.ts

@@ -1,8 +1,9 @@
 import { glob } from 'glob';
 import { join } from 'path';
-import { existsSync } from 'fs';
+import { existsSync, mkdirSync, appendFileSync } from 'fs';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import { axeCheck, createReport } from '@testcafe-community/axe';
+import { ClientFunction } from 'testcafe';
 import {
   runTestAtPage,
   shouldRunFramework,
@@ -32,6 +33,28 @@ const execTestCafeCode = (t, code) => {
   return testCafeFunction(t);
 };
 
+const getClientCspViolations = ClientFunction(() => (window as any).__cspViolations || []);
+
+const isCspEnabled = () => process.env.CSP_REPORT === 'true';
+
+const cspReportDir = join(__dirname, '..', 'csp-reports');
+const cspReportFile = join(cspReportDir, 'csp-violations.jsonl');
+
+const writeCspReport = (testName: string, framework: string, violations: any[]) => {
+  if (!violations.length) return;
+  if (!existsSync(cspReportDir)) {
+    mkdirSync(cspReportDir, { recursive: true });
+  }
+  for (const v of violations) {
+    const entry = {
+      test: testName,
+      framework,
+      ...v,
+    };
+    appendFileSync(cspReportFile, `${JSON.stringify(entry)}\n`);
+  }
+};
+
 const getIgnoredRules = (testName) => {
   const ignoredRules = [];
 
@@ -103,6 +126,13 @@ const getClientScripts = () => {
     scripts.push({ module: 'axe-core/axe.min.js' });
   }
 
+  if (isCspEnabled()) {
+    scripts.push(
+      // @ts-expect-error
+      join(__dirname, '../utils/visual-tests/inject/csp-listener.js'),
+    );
+  }
+
   scripts.push(
     // @ts-expect-error
     join(__dirname, '../utils/visual-tests/inject/test-utils.js'),
@@ -225,9 +255,15 @@ Object.values(FRAMEWORKS).forEach((approach) => {
         } else {
           const consoleMessages = await t.getBrowserConsoleMessages();
           const errors = [...consoleMessages.error, ...consoleMessages.warn]
-            .filter((e) => !knownWarnings.some((kw) => e.startsWith(kw)));
+            .filter((e) => !knownWarnings.some((kw) => e.startsWith(kw)))
+            .filter((e) => !e.startsWith('[CSP Violation]'));
           await t.expect(errors).eql([]);
 
+          if (isCspEnabled()) {
+            const cspViolations = await getClientCspViolations();
+            writeCspReport(testName, approach, cspViolations);
+          }
+
           const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
           await testScreenshot(t, takeScreenshot, `${testName}.png`, undefined, comparisonOptions);