Not compatible with the Content Security Policy Header

[Exadra37]

I work as a Developer Advocate for Security and I am using this awesome starter kit (Profile Page HTML template) to bootstrap a demo in pure HTML and when testing the web page for the security headers I got a bad score because inline styles and inline javascript is used.

To build a secure webpage inline styles and inline script need to be removed.

CSS examples to move into the CSS file:

style="height: 500px;"

JS examples to move to the JS file...

from the html tags:

onclick="toggleNavbar('example-collapse-navbar')"

from the script tag:

  <script>
    function toggleNavbar(collapseID) {
      document.getElementById(collapseID).classList.toggle("hidden");
      document.getElementById(collapseID).classList.toggle("block");
    }
  </script>

The Content-Security-Policy header to test against:

default-src 'none'; manifest-src 'self'; base-uri 'self'; frame-ancestors 'none'; form-action 'none'; font-src https://cdnjs.cloudflare.com; img-src 'self';  script-src 'self'; style-src 'self' https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/ https://unpkg.com/tailwindcss@%5E2/dist/;

Let me know if I can be of further help :)

[evbo]

@Exadra37 Can you clarify, are you saying tailwind does not uphold the CSP unless unsafe-inline is enabled?

That seems like a huge oversight if tailwind can't be used without unsafe-inline!

[connormckelvey]

@evbo I think it's more of an implementation issue. The inline CSS and Javascript above don't have anything specific to do with Tailwind. But rather, how toggleNavbar and some inline styles were implemented in this template. The inline script above could easily be moved into a .js file. The CSS is a similar case, a quick search of the project shows quite a few similar inline styles. These could be moved to a utility CSS file, or a tailwinds class could be used in place.