CSP error in Dashboard

[humphd]

See https://dev.api.telescope.cdot.systems/v1/status/pages/build.html and open dev tools to see console:

[Qiwen-Yu]

@humphd Can I take this one?

[Qiwen-Yu]

@humphd Sorry for the late response, but this link does not work now https://dev.api.telescope.cdot.systems/v1/status/pages/build.html

[humphd]

Things change when you wait 3 weeks, https://dev.api.telescope.cdot.systems/v1/status/build

[humphd]

Since the other issue is gone, I'm morphing this to deal with this issue instead:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

[humphd]

api.telescope.cdot.systems/:1 Refused to connect to 'http://api.telescope.cdot.systems/v1/status/status/' because it violates the following Content Security Policy directive: "connect-src 'self' *.fontawesome.com https://telescope.cdot.systems *.github.com".

I can't get the status checks for our API servers to work in the dashboards due to this.

[JerryHue]

So, I think these two issues are actually not related, amusingly enough.

The first issue is:

Since the other issue is gone, I'm morphing this to deal with this issue instead:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

There are two important clues:

• The word inline. This might refer to several things, such as "style attribute, onclick, or script tag bodies (depends on the context of the source it is applied to) and javascript: URIs". I quoted directly from the CSP website.
• The warning happens 11 times.

If we pay attention to the status.hbs file, and search for onclick, we will find it appears 11 times!

The way to solve the issue, then, is to delete the part that has those onclicks. I noticed that this part belongs to a "theme color option" bar that we are not using at all (it doesn't work because of the violation policy). I find this solution better than trying to figure out a proper set of CSP rules so that these click handlers work.

The other issue is:

api.telescope.cdot.systems/:1 Refused to connect to 'http://api.telescope.cdot.systems/v1/status/status/' because it violates the following Content Security Policy directive: "connect-src 'self' *.fontawesome.com https://telescope.cdot.systems *.github.com".

I can't get the status checks for our API servers to work in the dashboards due to this.

To catch this one, we need to head over the Network tab in the Developer tools. If you head over to https://api.telescope.cdot.systems/v1/status, you will notice that the first request has a 301 for its response, and the response gives the new location as http://api.telescope.cdot.systems/v1/status/. This is traefik doing its magic.

Well, if you head over the docker-compose.yml and figure out the middleware for traefik, you will see that we are using the regex (^.*\/status$). This regex also matches with the URL https://api.telescope.cdot.systems/v1/status/status, and we can see in the network activity that for the request made by fetch to this location it also gets a redirect to location http://api.telescope.cdot.systems/v1/status/status.

The reason the policy is violated is clear when we read this. The rule is violated because we are requesting to http://api.telescope.cdot.systems/v1/status/status, which doesn't match with any value in connect-src rule. Indeed, it doesn't even match 'self' because of the http change. So, to avoid this redirection, we can tighten the regex to be (^.*\/[^status]+\/status$$).