feat(templates): drop inline script

Author: pennersr

ChangeLog.rst

@@ -33,6 +33,9 @@ Note worthy changes
 - The "Forgot your password?" help text can now be more easily customized by
   providing your own ``"account/password_reset_help_text.html"`` template.
 
+- Removed inline scripts, so that it becomes possible to use a strong Content
+  Security Policy.
+
 
 Fixes
 -----

allauth/account/static/account/js/account.js

@@ -0,0 +1,20 @@
+(function () {
+  const allauth = window.allauth = window.allauth || {}
+
+  function manageEmailForm (o) {
+    const actions = document.getElementsByName('action_remove')
+    if (actions.length) {
+      actions[0].addEventListener('click', function (e) {
+        if (!window.confirm(o.i18n.confirmDelete)) {
+          e.preventDefault()
+        }
+      })
+    }
+  }
+
+  allauth.account = {
+    forms: {
+      manageEmailForm
+    }
+  }
+})()

allauth/account/static/account/js/onload.js

@@ -0,0 +1,12 @@
+(function () {
+  document.addEventListener('DOMContentLoaded', function () {
+    Array.from(document.querySelectorAll('script[data-allauth-onload]')).forEach(scriptElt => {
+      const funcRef = scriptElt.dataset.allauthOnload
+      if (typeof funcRef === 'string' && funcRef.startsWith('allauth.')) {
+        const funcArg = JSON.parse(scriptElt.textContent)
+        const func = funcRef.split('.').reduce((acc, part) => acc && acc[part], window)
+        func(funcArg)
+      }
+    })
+  })
+})()

allauth/mfa/static/mfa/js/webauthn.js

@@ -33,13 +33,20 @@
     return addOrSignupForm(o, addBtn, passwordlessFn)
   }
 
+  function getData (o) {
+    if (typeof o.ids.data !== 'undefined') {
+      return JSON.parse(document.getElementById(o.ids.data).textContent)
+    }
+    return o.data
+  }
+
   function addOrSignupForm (o, actionBtn, passwordlessFn) {
     const credentialInput = document.getElementById(o.ids.credential)
     const form = credentialInput.closest('form')
     actionBtn.addEventListener('click', async function () {
       const passwordless = passwordlessFn ? passwordlessFn() : undefined
       try {
-        const credential = await createCredentials(o.data.creation_options, passwordless)
+        const credential = await createCredentials(getData(o).creation_options, passwordless)
         credentialInput.value = JSON.stringify(credential)
         form.submit()
       } catch (e) {
@@ -81,7 +88,7 @@
     authenticateBtn.addEventListener('click', async function (e) {
       e.preventDefault()
       try {
-        const credential = await webauthnJSON.get(o.data.request_options)
+        const credential = await webauthnJSON.get(getData(o).request_options)
         credentialInput.value = JSON.stringify(credential)
         form.submit()
       } catch (e) {

allauth/templates/account/email.html

@@ -1,5 +1,5 @@
 {% extends "account/base_manage_email.html" %}
-{% load allauth i18n %}
+{% load static allauth i18n %}
 {% block head_title %}
     {% trans "Email Addresses" %}
 {% endblock head_title %}
@@ -74,17 +74,10 @@
     {% endif %}
 {% endblock content %}
 {% block extra_body %}
-    <script>
-(function() {
-  var message = "{% trans 'Do you really want to remove the selected email address?' %}";
-  var actions = document.getElementsByName('action_remove');
-  if (actions.length) {
-    actions[0].addEventListener("click", function(e) {
-      if (! confirm(message)) {
-        e.preventDefault();
-      }
-    });
-  }
-})();
+    <script src="{% static 'account/js/account.js' %}"></script>
+    <script src="{% static 'account/js/onload.js' %}"></script>
+    <script data-allauth-onload="allauth.account.forms.manageEmailForm" type="application/json">{
+    "i18n": {"confirmDelete": "{% trans 'Do you really want to remove the selected email address?' %}"}
+}
     </script>
 {% endblock extra_body %}

allauth/templates/mfa/authenticate.html

@@ -54,14 +54,13 @@
             {% endelement %}
             {{ js_data|json_script:"js_data" }}
             {% include "mfa/webauthn/snippets/scripts.html" %}
-            <script>
-        allauth.webauthn.forms.authenticateForm({
-        ids: {
-        authenticate: "mfa_webauthn_authenticate",
-        credential: "{{ webauthn_form.credential.auto_id }}"
-        },
-        data: JSON.parse(document.getElementById('js_data').textContent)
-        })
+            <script data-allauth-onload="allauth.webauthn.forms.authenticateForm" type="application/json">{
+    "ids": {
+        "authenticate": "mfa_webauthn_authenticate",
+        "credential": "{{ webauthn_form.credential.auto_id }}",
+        "data": "js_data"
+    }
+}
             </script>
         {% endif %}
     {% endif %}

allauth/templates/mfa/webauthn/add_form.html

@@ -21,14 +21,13 @@
     {% endelement %}
     {% include "mfa/webauthn/snippets/scripts.html" %}
     {{ js_data|json_script:"js_data" }}
-    <script>
-        allauth.webauthn.forms.addForm({
-            ids: {
-                add: "mfa_webauthn_add",
-                passwordless: "{{ form.passwordless.auto_id }}",
-                credential: "{{ form.credential.auto_id }}"
-            },
-            data: JSON.parse(document.getElementById('js_data').textContent)
-        })
+    <script data-allauth-onload="allauth.webauthn.forms.addForm" type="application/json">{
+    "ids": {
+        "add": "mfa_webauthn_add",
+        "passwordless": "{{ form.passwordless.auto_id }}",
+        "credential": "{{ form.credential.auto_id }}",
+        "data": "js_data"
+    }
+}
     </script>
 {% endblock %}

allauth/templates/mfa/webauthn/reauthenticate.html

@@ -18,13 +18,12 @@
     {% endelement %}
     {{ js_data|json_script:"js_data" }}
     {% include "mfa/webauthn/snippets/scripts.html" %}
-    <script>
-        allauth.webauthn.forms.authenticateForm({
-        ids: {
-        authenticate: "mfa_webauthn_reauthenticate",
-        credential: "{{ form.credential.auto_id }}"
-        },
-        data: JSON.parse(document.getElementById('js_data').textContent)
-        })
+    <script data-allauth-onload="allauth.webauthn.forms.authenticateForm" type="application/json">{
+    "ids": {
+        "authenticate": "mfa_webauthn_reauthenticate",
+        "credential": "{{ form.credential.auto_id }}",
+        "data": "js_data"
+    }
+}
     </script>
 {% endblock %}

allauth/templates/mfa/webauthn/signup_form.html

@@ -33,13 +33,12 @@
     </form>
     {% include "mfa/webauthn/snippets/scripts.html" %}
     {{ js_data|json_script:"js_data" }}
-    <script>
-        allauth.webauthn.forms.signupForm({
-            ids: {
-                signup: "mfa_webauthn_signup",
-                credential: "{{ form.credential.auto_id }}"
-            },
-            data: JSON.parse(document.getElementById('js_data').textContent)
-        })
+    <script data-allauth-onload="allauth.webauthn.forms.signupForm" type="application/json">{
+    "ids": {
+        "signup": "mfa_webauthn_signup",
+        "credential": "{{ form.credential.auto_id }}",
+        "data": "js_data"
+    }
+}
     </script>
 {% endblock %}

allauth/templates/mfa/webauthn/snippets/login_script.html

@@ -4,11 +4,10 @@
     {{ redirect_field }}
     <input type="hidden" name="credential" id="mfa_credential">
 </form>
-<script>
-    allauth.webauthn.forms.loginForm({
-        ids: {
-            login: "passkey_login",
-            credential: "mfa_credential",
-        }
-    })
+<script data-allauth-onload="allauth.webauthn.forms.loginForm" type="application/json">{
+    "ids": {
+        "login": "passkey_login",
+        "credential": "mfa_credential"
+    }
+}
 </script>

allauth/templates/mfa/webauthn/snippets/scripts.html

@@ -2,3 +2,4 @@
 <noscript>{% translate "This functionality requires JavaScript." %}"</noscript>
 <script src="{% static 'mfa/js/webauthn-json.js' %}"></script>
 <script src="{% static 'mfa/js/webauthn.js' %}"></script>
+<script src="{% static 'account/js/onload.js' %}"></script>