For #2399: Host material-dashboard demo page for status service

[Andrewnt219]

Issue This PR Addresses

Resolves #2399

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

Deploy material-dashboard demo to /status

Test plan

cd ./src/api/status
node ./src/server.js

The website is hosted at http://localhost:1111/

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[Andrewnt219]

@humphd it's running locally at localhost:1111, but how do I test its deployment?

[humphd]

Please add the following files:

1. https://github.com/creativetimofficial/material-dashboard/blob/master/CHANGELOG.md so that we can keep track of which version we are using (i.e., if we want to update later)
2. https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md so we don't break the license and copyright (you currently do)
3. https://github.com/creativetimofficial/material-dashboard/blob/master/README.md so we have docs about how to use, and what this is.

[humphd]

We don't autodeploy backend PRs, so there's no way to test this except locally or when we merge to staging.

[Andrewnt219]

@humphd I have a problem executing this script.

telescope/src/api/status/public/index.html

Line 33 in fe78b72

<!-- <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script> -->

My guess is that somewhere in Satellite or the app, Content Security Policy is set to use the script from the same origin only (i.e. script-src 'self'; or the fallback default-src 'self';). Tried looking around but couldn't find where it was set.

I did try to copy that script and serve as a local file, but it sent cross-origin requests and those were blocked as well.

EDIT: I also tried to set the header but this code had no effects

const service = new Satellite();

service.app.use(function (req, res, next) {
  res.setHeader('Content-Security-Policy', 'script-src https://kit.fontawesome.com;')
  next();
});

[humphd]

Have a look at what @manekenpix is doing in https://github.com/Seneca-CDOT/telescope/pull/2396/files#diff-dd124cd0e5175e20634ddd2804c09615115a059bee018935192c6aad783050ffR14-R28:

const service = new Satellite({
  beforeRouter(app) {
    app.engine('handlebars', expressHandlebars());
    app.set('views', path.join(__dirname, '../views'));
    app.set('view engine', 'handlebars');
  },
  helmet: {
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        fontSrc: ["'self'", 'https:', 'data:'],
        frameSrc: ["'self'", '*.youtube.com', '*.vimeo.com'],
        frameAncestors: ["'self'"],
        imgSrc: ["'self'", 'data:', 'https:'],
        scriptSrc: ["'self'"],
        styleSrc: ["'self'", 'https:', "'unsafe-inline'"],
        objectSrc: ["'none'"],
        upgradeInsecureRequests: [],
      },
    },
  },
});

You'll need to add a scriptSrc to allow the origins that are not allowed to load with the current set of rules.

[humphd]

Does this still need to be a draft PR, or is it ready to review?

[Andrewnt219]

@humphd ah, I was waiting for the tests to complete and then I forgot.

[PedroFonsecaDEV]

LGTM!

[humphd]

This looks good, but let's improve our static analysis tooling so it doesn't complain about things (I'm amazed this passes eslint/prettier checks currently, did you have to fix things?):

• Add src/api/status/public/assets/** to https://github.com/Seneca-CDOT/telescope/blob/master/.eslintignore with a comment above about what it is and why we're ignoring (e.g., we don't maintain these files)
• Add src/api/status/public/assets to https://github.com/Seneca-CDOT/telescope/blob/master/.prettierignore with a similar comment

After that, I think this can get merged.

[Andrewnt219]

Then I'm surprised too. I only fixed those href and extracted inline scripts.