Please consider progressive enhancement to avoid blank pages when CSPs don't allow JS

[quilicicf]

Hi,

I'm using Mochawesome to generate reports on CI, thanks a lot for developing it!

Unfortunately, I have stumbled upon a CSP issue that gives me headaches.

The issue

The generated HTML file is an empty shell that gets populated with JavaScript. Since the CSP on Jenkins does not allow evaluation of JS in the archived reports, the file is blank.

I've found multiple users with the same issues on the net but the only suggested answer is to de-activate the CSP which I'd rather not do as I'm far from able to grasp the security implications and don't want to toy with my CI's security.

I'm wondering if you'd consider trying to build the reports using progressive enhancement?

That would mean that the HTML would display with a basic UX and the JS would only improve it, not be the base condition for a report to show up.

How to reproduce

I'm running my tests with:

• CodeceptJS 2.6.11
• mochawesome 4.1.0
• on Jenkins 2.319.3 (LTS)

Any report generated with mochawesome has the issue so I believe you must already have HTML reports (in the tests of this repo, probably) on hand.

You can reproduce with the following procedure:

• create a folder for your test
• cd into it
• run npm init and accept all defaults
• run npm install express
• copy the test report inside the current folder, name it report.html
• copy the file server.js below in the current folder
• run node server.js
• open http://localhost:5500/report.html
• you can comment the CSP part in server.js to make sure it is the issue, just don't forget to re-start the server and reload the page without using the cache in the browser

Server.js

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const app = express();

app.use(function (req, res, next) {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; font-src 'self'; img-src 'self'; script-src 'self'; style-src 'self'; frame-src 'self'"
  );
  next();
});

app.use(bodyParser.json());
app.use(express.static(path.join(__dirname)));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname + '/index.html'));
});

const server = app.listen(process.env.PORT || 5500, () => {
  const { port } = server.address();
  console.log(`Server running on PORT ${port}`);
});

[adamgruber]

Appreciate the feedback and I understand the benefits progressive enhancement would bring. Unfortunately, given the way the reporter is currently architected, I believe to get this to work would take a significant effort. Further, for very large test runs this could result in HTML pages with a high number of DOM nodes leading to performance/memory issues when loaded in the browser.

Honestly, it's unlikely that I will have the time to devote to this feature request.

[quilicicf]

I understand, no worries.
Would you accept a contribution ?
Can we develop an alternative report generator and have an option to switch between the PE and classic versions ?
🤔

[quilicicf]

@adamgruber What do you think about external contributions to provide an alternate report generator based on PE ?