joomcode · uid11 · Feb 26, 2025 · Feb 26, 2025 · Feb 26, 2025
@@ -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;
   }

@@ -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" />`,
       );
     }
   }

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

@@ -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">

@@ -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));
 

@@ -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);