fix: Alpine.js JSON parsing error in x-data HTML attributes

Add tojson_attr Jinja2 filter that escapes double quotes to "
for safe embedding in HTML attributes. The browser decodes entities
before Alpine.js evaluates, so JSON parses correctly.

Replaces |tojson with |tojson_attr in x-data attributes (select_recipe,
recipe_list, base flash messages). Script tag usages are unaffected.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Adriano
2026-02-07 19:31:49 +01:00
parent 6d5660b20d
commit 004f794c75
4 changed files with 23 additions and 3 deletions
+1 -1
View File
@@ -90,7 +90,7 @@
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="fixed top-16 right-4 z-50 flex flex-col gap-2 max-w-md w-full"
x-data="{ messages: {{ messages|tojson }} }"
x-data="{ messages: {{ messages|tojson_attr }} }"
x-init="setTimeout(() => { $el.remove() }, 8000)">
{% for category, message in messages %}
<div x-data="{ show: true }"