wagtail: A list of widgets breaking strict Content-Security-Policy (CSP) directives

Is your proposal related to a problem?

Wagtail uses inline javascript and styles to provide useful feedback to the user. This causes conflicts with CSP directives.

This issue attempts to list all of the potential places this occurs in the Wagtail codebase.

Directives to be reviewed:

  • script-src ((completed 2021-04-21))
  • img-src
  • font-src
  • style-src ((completed 2021-04-21))

Extra Notes

  • The JS library modernizer-2.6.2.min.js is blocked by the style-src: 'self' CSP. You can trigger this by visiting /admin/

script-src: ‘self’

Wagtail Admin

Wagtail Admin Templates

  1. wagtail/admin/templates/wagtailadmin/

  2. wagtail/admin/templates/wagtailadmin/edit_handlers/

  3. wagtail/admin/templates/wagtailadmin/home/

  4. wagtail/admin/templates/wagtailadmin/pages/

  5. wagtail/admin/templates/wagtailadmin/permissions/includes/

  6. wagtail/admin/templates/wagtailadmin/reports/

  7. wagtail/admin/templates/wagtailadmin/shared/

  8. wagtail/admin/templates/wagtailadmin/widgets/

  9. wagtail/admin/templates/wagtailadmin/workflows/

Wagtail Contrib

Wagtail Documents

Wagtail Images

Wagtail Snippets

Wagtail Users

Wagtail Utils

style-src: ‘self’

Wagtail Embeds

Wagtail Admin

Contrib

Documents

Embeds

Images

Users

About this issue

  • Original URL
  • State: open
  • Created 3 years ago
  • Reactions: 3
  • Comments: 15 (6 by maintainers)

Commits related to this issue

Most upvoted comments

Reading up / based on our discussion in Slack, we’ll need to get rid of those style="" attributes in HTML/Python, and in JavaScript switch any usage of setAttribute('style') to adding individual properties on the style DOM attribute: https://stackoverflow.com/a/29089970/1798491.

I couldn’t see any setAttribute('style') in Wagtail’s JS code, but there could be in our dependencies.

For style attributes in HTML, I could see two based on the list above that will be tricky to change:

Does some clever math. This would either require a <style> attribute with a nonce and adding styles via a unique id to each iframe… or I think we might be able to refactor this to use the more modern aspect-ratio CSS property.

This might be easier by setting the values via JS.


All the other style attributes in HTML can either be replaced with CSS classes, or the hidden HTML attribute.