https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • h
    lol actually what I'm doing now in my template isn't too dissimilar
  • h
    I'm using petite-vue as the frontend framework
  • h
    and that stores state in the dom
  • h
  • h
    that v-scope attr
  • g
    server receives request, does vdom diff, and the changes get sent as HTML with hx-swap-oob
  • h
    ooo
  • h
    that would be awesome
  • g
    cursed
  • g
    i can't see how that would be better than using react normally
  • h
    me neither
  • h
    actually would be worse because now you're juggling where to render vs just doing it all in one place
  • h
    but it's a cool thought
  • h
    the diff/oob mass update is a really cool idea
  • g
    i imagine that if htmx and similar frameworks ever become the default practice, there would be server side frameworks that do change detection and automatically add all the necessary oob-swaps
  • g
    and the PR count on github would update when you click the merge button
  • h
    yeah, or like login
  • f
    Hello, I am planning on using Django for a new project. I have considered using SvelteKit or another SPA framework, but in the end I came be believe that Django has been battle-tested long enough that it's evolved deal with security issues at least as well as any alternative. That is, it makes it as easy as possible to be protected against various security threats, and my app is one that needs a very high level of protection. And I'm wondering if there's a consensus view about the degree to which the use of HTMX with Django dilutes Django's security abilities. Hopefully, it doesn't at all, when certain easily-understandable precautions are taken. For instance, involving CSRF. But I would really like to hear from people who have done significant thinking about this.
  • c
    Hi! Django is a great choice for web applications. It's been around for many years so it is very mature and battle-tested, as you mention. If you care about security and authentication, Django's "battery included" philosophy makes those quite easy to implement. You don't have to think about those things too much, as the frameworks takes care about most of it. Even better, it does things you might not consider important, before you realize you need them. I don't think htmx dillutes Django's security features. I'd say it's a great enhancement for Django overall. Regarding CSRF and htmx requests, you can simply have htmx send the CSRF token as a header of the request. So I think in that case you are protected from CSRF attacks, same as if you would've used a regular Django form with a 
    {% csrf_token %}
    tag inside
  • c
    what I mean for CSRF: you can add the following script to your base Django template, which will add the 
    csrf_token
    produced by Django into the subsequent htmx requests:
    Copy code
    html
<script>
  document.body.addEventListener('htmx:configRequest', (event) => {
    event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
  })
</script>
  • l
    Copy code
    <ul class="ul-no-points" id="tasks" hx-swap="outerHTML" hx-target="#tasks">

    {% for task in tasks %}

    {% if task.done %}
    <li>
        <input type="checkbox" id="checkbox-done-{{task.id}}" value="" checked="checked"
            hx-post="{% url 'complete' task.id %}" hx-trigger="click">
        <label for="checkbox-done-{{task.id}}"><del> {{ task.name }} </del> </label>
        <a href="#" role="button" class="delete-button" hx-post="{% url 'delete' task.id %}">x </a>
    </li>
    {% else %}
    <li>
        <input type="checkbox" id="checkbox-notdone-{{task.id}}" value="" hx-post="{% url 'complete' task.id %}"
            hx-trigger="click">
        <label for="checkbox-notdone-{{task.id}}">{{ task.name }} </label>
        <a href="#" role="button" class="delete-button" hx-post="{% url 'delete' task.id %}">x</a>
    </li>

    {% endif %}


    {% empty %}
    <li> No items on your list yet </li>
    {% endfor %}
    {% if errors %} {{errors}} {% endif %}
    <form hx-post="{% url 'index' %}" hx-swap="outerHTML" hx-target="#tasks">
        {% csrf_token %}
        {{ form }}
        <button type="submit"> Add </button>
    </form>


</ul>
  • l
    how should apply I 
    {% csrf_token %}
    here in and delete button here?
  • l
    it's weird because I didnt have problem with that like 2 days ago, but now appears. After htmx response I dont have CSRF, but when I reload full page it appears. Add task form works good in both situations
  • l
    ofc, have that script overhead
  • f
    Many thanks gmso for that feedback! I must admit that gaxda's question today represents exactly the kind of issue I was afraid might appear. I don't even know how gaxda knows there's an issue. (@limited-pillow-24427 What do you mean, "after htmx response I don't have CSRF"? How do you know?) Any further info would be most appreciated.
  • l
    @User in Django logs 
    Forbidden (CSRF token missing or incorrect.)
  • l
    I'm beginner then I could just misunderstood some concepts, but dont know how it's works: Have 3 DOM with hx-post: 1. changing task done/undone 2. delete task 3. add task After htmx response, when clicking 1/2, I got this error, but form works properly After full refresh, everything works
  • l
    almost everything shows how to attach csrf token inside form, but what if something else making POST
  • l
    It's easier to have the CSRF token included automatically with every request. https://discord.com/channels/725789699527933952/864934037381971988/926208111809790022
  • l
    @User got that script
1...303132...100Latest