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/edit_handlers.py

Wagtail Admin Templates

wagtail/admin/templates/wagtailadmin/
wagtail/admin/templates/wagtailadmin/edit_handlers/
- wagtail/admin/templates/wagtailadmin/edit_handlers/inline_panel.html need to inspect how code is injected here to see if there are more ways this might break CSP
wagtail/admin/templates/wagtailadmin/home/
- wagtail/admin/templates/wagtailadmin/home/locked_pages.html
- wagtail/admin/templates/wagtailadmin/home/workflow_pages_to_moderate.html
wagtail/admin/templates/wagtailadmin/pages/
- wagtail/admin/templates/wagtailadmin/pages/listing/_button_with_dropdown.html NOTE: need to inspect if this breaks CSP
- wagtail/admin/templates/wagtailadmin/pages/workflow_history/detail.html
- wagtail/admin/templates/wagtailadmin/pages/workflow_history/index.html
- wagtail/admin/templates/wagtailadmin/pages/_editor_js.html
- wagtail/admin/templates/wagtailadmin/pages/create.html NOTE: see comments above code linked here and check if relevant of if CSP still interprets this as an inline script
- wagtail/admin/templates/wagtailadmin/pages/edit.html NOTE: see comments above code linked here and check if relevant of if CSP still interprets this as an inline script
- wagtail/admin/templates/wagtailadmin/pages/index.html
- wagtail/admin/templates/wagtailadmin/pages/preview_error.html NOTE: need to inspect if this breaks CSP
- wagtail/admin/templates/wagtailadmin/pages/search.html
wagtail/admin/templates/wagtailadmin/permissions/includes/
- wagtail/admin/templates/wagtailadmin/permissions/includes/collection_member_permissions_formset.html#L45-L51
- wagtail/admin/templates/wagtailadmin/permissions/includes/collection_member_permissions_formset.html#L57-L71
wagtail/admin/templates/wagtailadmin/reports/
- wagtail/admin/templates/wagtailadmin/reports/workflow.html
wagtail/admin/templates/wagtailadmin/shared/
- wagtail/admin/templates/wagtailadmin/shared/locale_selector.html NOTE: need to inspect if this breaks CSP
wagtail/admin/templates/wagtailadmin/widgets/
wagtail/admin/templates/wagtailadmin/workflows/

Wagtail Contrib

Wagtail Documents

Wagtail Images

Wagtail Snippets

wagtail/snippets/templates/wagtailsnippets/snippets/type_index.html#L7-L13

Wagtail Users

Wagtail Utils

wagtail/utils/widgets.py#L30 NOTE: this uses a unique approach in all of the wagtail codebase to inject inline scripts

style-src: ‘self’

Wagtail Embeds

wagtail/embeds/templates/wagtailembeds/embed_frontend.html#L1

Wagtail Admin

Contrib

Documents

Embeds

wagtail/embeds/templates/wagtailembeds/embed_frontend.html#L1

Images

Users

wagtail/users/templates/wagtailusers/groups/includes/page_permissions_formset.html#L31

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:14 (5 by maintainers)

Top GitHub Comments

1reaction

thibaudcolascommented, Apr 29, 2021

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:

Responsive embeds. https://github.com/wagtail/wagtail/blob/b34d48297e737b5ebbe2d7f3d3af3fa6b527487f/wagtail/embeds/templates/wagtailembeds/embed_frontend.html#L1

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.

Image chooser renditions. https://github.com/wagtail/wagtail/blob/b34d48297e737b5ebbe2d7f3d3af3fa6b527487f/wagtail/images/templates/wagtailimages/images/edit.html#L66

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.

0reactions

lb-commented, Aug 6, 2022

Login page - inline script to focus on username field has been replaced with autofocus attribute.

Via #8925

Top Results From Across the Web

How to fix 'because it violates the following content security ...

Blocked by Content Security Policy. 'csp error because it violates the following content security policy directive'. Content Security Policy error message.

Content Security Policy (CSP) - Pendo Help Center

While Pendo is compatible with strict CSP directives, it is the user's responsibility to ensure the guide content is compatible with your CSP...

Mitigate cross-site scripting (XSS) with a strict Content Security ...

Learn how to deploy a CSP based on script nonces or hashes as a defense-in-depth against cross-site scripting.

Content Security Policy (CSP) - HTTP - MDN Web Docs

Chrome Edge Content‑Security‑Policy Full support. Chrome25. more. Toggle history Full sup... base‑uri Full support. Chrome40. Toggle history Full sup... block‑all‑mixed‑content. Deprecated Full support. ChromeYes. Toggle history...

Content Security Policy | Mendix Documentation

If used with strict CSP, these widgets can result in CSP errors in the console or broken flows. Please consult a widget's documentation...