Merge pull request #110 from joomcode/fix/support-custom-csp-hosts-in-html-report

uid11 · web-flow · commit dea7172f7456 · 2025-02-26T10:56:12.000+03:00
fix: support custom CSP hosts for images in HTML report
diff --git a/autotests/configurator/mapLogPayloadInConsole.ts b/autotests/configurator/mapLogPayloadInConsole.ts
@@ -19,7 +19,8 @@ export const mapLogPayloadInConsole: MapLogPayloadInConsole = (message, payload)
 
   if (
     message.startsWith('Caught an error when running tests in retry') ||
-    message.startsWith('Usage:')
+    message.startsWith('Usage:') ||
+    message.includes('report was written')
   ) {
     return payload;
   }
diff --git a/src/utils/report/client/render/renderStepContent.ts b/src/utils/report/client/render/renderStepContent.ts
@@ -32,24 +32,24 @@ export function renderStepContent({pathToScreenshotOfPage, payload, type}: Optio
 
   if (pathToScreenshotOfPage !== undefined) {
     images.push(
-      sanitizeHtml`<img src="${pathToScreenshotOfPage}" alt="Screenshot of page" title="Screenshot of page">`,
+      sanitizeHtml`<img src="${pathToScreenshotOfPage}" alt="Screenshot of page" title="Screenshot of page" />`,
     );
   }
 
   if (type === LogEventType.InternalAssert) {
     const {actualScreenshotUrl, diffScreenshotUrl, expectedScreenshotUrl} = payload;
 
     if (typeof actualScreenshotUrl === 'string') {
-      images.push(sanitizeHtml`<img src="${actualScreenshotUrl}" alt="Actual" title="Actual">`);
+      images.push(sanitizeHtml`<img src="${actualScreenshotUrl}" alt="Actual" title="Actual" />`);
     }
 
     if (typeof diffScreenshotUrl === 'string') {
-      images.push(sanitizeHtml`<img src="${diffScreenshotUrl}" alt="Diff" title="Diff">`);
+      images.push(sanitizeHtml`<img src="${diffScreenshotUrl}" alt="Diff" title="Diff" />`);
     }
 
     if (typeof expectedScreenshotUrl === 'string') {
       images.push(
-        sanitizeHtml`<img src="${expectedScreenshotUrl}" alt="Expected" title="Expected">`,
+        sanitizeHtml`<img src="${expectedScreenshotUrl}" alt="Expected" title="Expected" />`,
       );
     }
   }
diff --git a/src/utils/report/getImgCspHosts.ts b/src/utils/report/getImgCspHosts.ts
@@ -0,0 +1,43 @@
+import {URL} from 'node:url';
+
+import {LogEventType} from '../../constants/internal';
+
+import type {ReportData} from '../../types/internal';
+
+/**
+ * Get string with images hosts using in HTML report, for CSP `img-src` rule.
+ * @internal
+ */
+export const getImgCspHosts = (reportData: ReportData): string => {
+  const hosts = Object.create(null) as Record<string, true>;
+  const {retries} = reportData;
+
+  const processMaybeUrl = (maybeUrl: unknown): void => {
+    if (typeof maybeUrl === 'string' && maybeUrl.startsWith('https://')) {
+      try {
+        const {origin} = new URL(maybeUrl);
+
+        hosts[origin] = true;
+      } catch {}
+    }
+  };
+
+  for (const {fullTestRuns} of retries) {
+    for (const {logEvents} of fullTestRuns) {
+      for (const {payload, type} of logEvents) {
+        // eslint-disable-next-line max-depth
+        if (type !== LogEventType.InternalAssert || payload === undefined) {
+          continue;
+        }
+
+        const {actualScreenshotUrl, diffScreenshotUrl, expectedScreenshotUrl} = payload;
+
+        processMaybeUrl(actualScreenshotUrl);
+        processMaybeUrl(diffScreenshotUrl);
+        processMaybeUrl(expectedScreenshotUrl);
+      }
+    }
+  }
+
+  return Object.keys(hosts).join(' ');
+};
diff --git a/src/utils/report/render/renderHead.ts b/src/utils/report/render/renderHead.ts
@@ -12,28 +12,31 @@ import type {SafeHtml} from '../../../types/internal';
  * Renders tag `<head>`.
  * @internal
  */
-export const renderHead = (reportFileName: string): SafeHtml => {
+export const renderHead = (reportFileName: string, imgCspHosts: string): SafeHtml => {
   const renderedScript = renderScript();
   const renderedStyle = renderStyle();
 
   const scriptContent = getContentFromRenderedElement(renderedScript);
   const styleContent = getContentFromRenderedElement(renderedStyle);
 
-  const cspStyleHash = getCspHash(styleContent);
   const cspScriptHash = getCspHash(scriptContent);
+  const cspStyleHash = getCspHash(styleContent);
+
+  const cspContent = [
+    "default-src 'self';",
+    `img-src 'self' data: ${imgCspHosts};`,
+    `script-src '${cspScriptHash}';`,
+    `style-src '${cspStyleHash}';`,
+  ];
 
-  const safeCspStyleHash = createSafeHtmlWithoutSanitize`${cspStyleHash}`;
-  const safeCspScriptHash = createSafeHtmlWithoutSanitize`${cspScriptHash}`;
+  const safeCspContent = createSafeHtmlWithoutSanitize`${cspContent.join(' ')}`;
 
   return sanitizeHtml`
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="description" content="${reportFileName}" />
-  <meta
-    http-equiv="Content-Security-Policy"
-    content="default-src 'self'; img-src 'self' data:; script-src '${safeCspScriptHash}'; style-src '${safeCspStyleHash}';"
-  />
+  <meta http-equiv="Content-Security-Policy" content="${safeCspContent}" />
   <title>${reportFileName}</title>
   ${renderFavicon()}
   ${renderedStyle}
diff --git a/src/utils/report/render/renderReportToHtml.ts b/src/utils/report/render/renderReportToHtml.ts
@@ -3,6 +3,7 @@ import {generalLog} from '../../generalLog';
 import {getDurationWithUnits} from '../../getDurationWithUnits';
 
 import {sanitizeHtml} from '../client';
+import {getImgCspHosts} from '../getImgCspHosts';
 import {getRetriesProps} from '../getRetriesProps';
 
 import {locator} from './locator';
@@ -26,13 +27,14 @@ export const renderReportToHtml = (reportData: ReportData): SafeHtml => {
 
   assertValueIsNotNull(reportFileName, 'reportFileName is not null');
 
+  const imgCspHosts = getImgCspHosts(reportData);
   const retries = getRetriesProps(reportData);
   const retryNumbers = retries.map(({retryIndex}) => retryIndex);
   const maxRetry = Math.max(...retryNumbers);
 
   const safeHtml = sanitizeHtml`<!DOCTYPE html>
 <html lang="en">
-  ${renderHead(reportFileName)}
+  ${renderHead(reportFileName, imgCspHosts)}
   <body>
     ${renderNavigation({retries})}
     <div class="main" role="tabpanel">
diff --git a/src/utils/report/writeHtmlReport.ts b/src/utils/report/writeHtmlReport.ts
@@ -1,6 +1,9 @@
 import {join} from 'node:path';
 
-import {REPORTS_DIRECTORY_PATH} from '../../constants/internal';
+import {
+  ABSOLUTE_PATH_TO_PROJECT_ROOT_DIRECTORY,
+  REPORTS_DIRECTORY_PATH,
+} from '../../constants/internal';
 
 import {assertValueIsNotNull} from '../asserts';
 import {getFileSize, writeFile} from '../fs';
@@ -25,7 +28,11 @@ export const writeHtmlReport = async (reportData: ReportData): Promise<void> =>
 
   assertValueIsNotNull(reportFileName, 'reportFileName is not null');
 
-  const reportFilePath = join(REPORTS_DIRECTORY_PATH, reportFileName) as FilePathFromRoot;
+  const reportFilePath = join(
+    ABSOLUTE_PATH_TO_PROJECT_ROOT_DIRECTORY,
+    REPORTS_DIRECTORY_PATH,
+    reportFileName,
+  ) as FilePathFromRoot;
 
   await writeFile(reportFilePath, String(reportHtml));
 
diff --git a/src/utils/report/writeLiteJsonReport.ts b/src/utils/report/writeLiteJsonReport.ts
@@ -1,6 +1,9 @@
 import {join} from 'node:path';
 
-import {REPORTS_DIRECTORY_PATH} from '../../constants/internal';
+import {
+  ABSOLUTE_PATH_TO_PROJECT_ROOT_DIRECTORY,
+  REPORTS_DIRECTORY_PATH,
+} from '../../constants/internal';
 
 import {getFileSize, writeFile} from '../fs';
 import {generalLog} from '../generalLog';
@@ -21,7 +24,11 @@ export const writeLiteJsonReport = async (liteReport: LiteReport): Promise<void>
   const {liteReportFileName} = liteReport;
   const reportJson = JSON.stringify(liteReport);
 
-  const reportFilePath = join(REPORTS_DIRECTORY_PATH, liteReportFileName) as FilePathFromRoot;
+  const reportFilePath = join(
+    ABSOLUTE_PATH_TO_PROJECT_ROOT_DIRECTORY,
+    REPORTS_DIRECTORY_PATH,
+    liteReportFileName,
+  ) as FilePathFromRoot;
 
   await writeFile(reportFilePath, reportJson);
 

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,8 @@ export const mapLogPayloadInConsole: MapLogPayloadInConsole = (message, payload)`
`19`	`19`
`20`	`20`	`if (`
`21`	`21`	`message.startsWith('Caught an error when running tests in retry') \|\|`
`22`		`- message.startsWith('Usage:')`
	`22`	`+ message.startsWith('Usage:') \|\|`
	`23`	`+ message.includes('report was written')`
`23`	`24`	`) {`
`24`	`25`	`return payload;`
`25`	`26`	`}`
Original file line number	Diff line number	Diff line change
`@@ -32,24 +32,24 @@ export function renderStepContent({pathToScreenshotOfPage, payload, type}: Optio`
`32`	`32`
`33`	`33`	`if (pathToScreenshotOfPage !== undefined) {`
`34`	`34`	`images.push(`
`35`		- sanitizeHtml`<img src="${pathToScreenshotOfPage}" alt="Screenshot of page" title="Screenshot of page">`,
	`35`	+ sanitizeHtml`<img src="${pathToScreenshotOfPage}" alt="Screenshot of page" title="Screenshot of page" />`,
`36`	`36`	`);`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`if (type === LogEventType.InternalAssert) {`
`40`	`40`	`const {actualScreenshotUrl, diffScreenshotUrl, expectedScreenshotUrl} = payload;`
`41`	`41`
`42`	`42`	`if (typeof actualScreenshotUrl === 'string') {`
`43`		- images.push(sanitizeHtml`<img src="${actualScreenshotUrl}" alt="Actual" title="Actual">`);
	`43`	+ images.push(sanitizeHtml`<img src="${actualScreenshotUrl}" alt="Actual" title="Actual" />`);
`44`	`44`	`}`
`45`	`45`
`46`	`46`	`if (typeof diffScreenshotUrl === 'string') {`
`47`		- images.push(sanitizeHtml`<img src="${diffScreenshotUrl}" alt="Diff" title="Diff">`);
	`47`	+ images.push(sanitizeHtml`<img src="${diffScreenshotUrl}" alt="Diff" title="Diff" />`);
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`if (typeof expectedScreenshotUrl === 'string') {`
`51`	`51`	`images.push(`
`52`		- sanitizeHtml`<img src="${expectedScreenshotUrl}" alt="Expected" title="Expected">`,
	`52`	+ sanitizeHtml`<img src="${expectedScreenshotUrl}" alt="Expected" title="Expected" />`,
`53`	`53`	`);`
`54`	`54`	`}`
`55`	`55`	`}`