wagtail: prevent unsafe-inline CSP errors by putting all JS in their own file?

Issue Summary

The wagtail 2.4 admin still loads some JS inline:

<!doctype html>
<html class="no-js" lang="en-gb">
<head>
    <meta charset="utf-8" />
    ...
    <link rel="shortcut icon" href="/static/wagtailadmin/images/favicon.ico" />
</head>
<body id="wagtail" class="page-explorer  ">
    ...
    <script>
        (function(document, window) {
            window.wagtailConfig = window.wagtailConfig || {};
            wagtailConfig.ADMIN_API = {
                PAGES: '/cms/api/v2beta/pages/',
                DOCUMENTS: '/cms/api/v2beta/documents/',
                IMAGES: '/cms/api/v2beta/images/',

which means that wagtail cannot be deployed on servers with a CSP that forbid unsafe-inline scripts (which is quite a sensible thing to do these days).

Steps to Reproduce

add https://github.com/jsocol/django-csp to the project
make sure the script CSP does not include unsafe-inline
load the wagtail CMS admin view with the dev console open

Making sure that all js like this is in its own file and loaded from src should solve this.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 15 (13 by maintainers)

Commits related to this issue

User - Reimplement Gravatar switching without JS - Resolves #9972 - Avoids inline script for a solution that can be CSS/HTML only - Use translatable alt text for when the default avatar is selected -... — committed to Lovelyfin00/wagtail by Lovelyfin00 a year ago
User - Reimplement Gravatar switching without JS - Resolves #9972 - Avoids inline script for a solution that can be CSS/HTML only - Use translatable alt text for when the default avatar is selected -... — committed to wagtail/wagtail by Lovelyfin00 a year ago

Most upvoted comments

@Pomax thanks for giving it a go - these things evolve slowly and yes in hindsight it’s a bit confusing. We don’t have a way to split sub-threads out.

Here is a direct link to the investigation. https://github.com/lb-/bakerydemo/blob/ui-experiments/lightweight-frontend-framework-investigation-2022.md

Here is a direct link to the code. The header search is a good example of removal of a large amount of inline scripts tags and also setting up data on data attributes where needed. https://github.com/lb-/wagtail/pull/5/files

I will post here when the RFC is up - that will give a better chance to comment.

lb- on Jun 6, 2022