Does mkdocs-material leverage any input validation or content security policy?

[SteveBehm]

I have created an Material-themed MkDocs site for my company's technical documentation. I am using the search.suggest feature and am wondering if there is any input validation or content security policy employed to protect the search feature from being abused?

My goal is to ensure the search feature is not vulnerable to any type of attack.

[squidfunk]

MkDocs generates a static site. Since there's no data sent to a server, not validation is done on our side. What we make sure is that deep linking to search results does not allow for XSS. Content security policy should, in general, be set on the server-side, but you could also add the respective http-equiv meta tags if necessary. As a theme, we can't do it, since we do not know what external scripts you want to allow and what not.

[SteveBehm]

Okay thanks for the response and information!

If we choose to go the meta tags route, would that go in the theme section of the mkdocs.yml file within an extra section?

theme:
  logo: images/gearlogo.png
  favicon: images/gearlogo.png
  name: material
  custom_dir: overrides
  extra:
    - |
      <meta http-equiv="Content-Security-Policy" content="default-src 'self' *.example.com example.com; script-src 'self' *.example.com example.com; style-src 'self' *.example.com example.com; img-src 'self' *.example.com example.com; connect-src 'self' *.example.com example.com; font-src 'self' *.example.com example.com; frame-src 'self' *.example.com example.com; media-src 'self' *.example.com example.com; object-src 'none'; report-uri /csp-violation-report-endpoint;">

[squidfunk]

You can use customization, specifically block overrides and add it to the meta block.

[SteveBehm]

Thank you!

[SteveBehm]

@squidfunk I am having some trouble in one area of the content security policy I am creating as a meta tag.

I have chevron icons in the left navigation section that when clicked show other pages to navigate to.

For some reason my CSP is not allowing those icons to load and I am not sure the source of them. Any way you can help me understand their source?

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self' *.example.com *.example.cloud *.googleapis.com *.gstatic.com;
    script-src 'self' *.example.com *.example.cloud *.googleapis.com *.gstatic.com;
    style-src 'self' *.example.com *.example.cloud *.googleapis.com *.gstatic.com;
    img-src 'self' *.example.com *.example.cloud *.googleapis.com *.gstatic.com;
    connect-src 'self' *.example.com *.example.cloud *.googleapis.com *.gstatic.com;
    frame-src 'self' *.example.com *.example.cloud *.googleapis.com *.gstatic.com;
    media-src 'self' *.example.com *.example.cloud *.googleapis.com *.gstatic.com;
    object-src 'none';
    report-uri /csp-violation-report-endpoint;
">

[squidfunk]

They are embedded in the CSS. I'm not sure what needs to be set, but if you find out, feel free to share it here.

[SteveBehm]

ah! This helped a lot.

In order to adjust for this in the CSP, I had to add data: to the img-src directive. Now they will be accepted.

Thank you!!