Django + JS != CSRF

Question

I've found that if i link my html with js in my django project it thow the CSRF verification failed. Request aborted. If I don't link html with that js it works well. So how can I solve this problem? Here is views.py and style.js file: The site is about weather. If I press button to search weather with not linked js it works fine.

views.py

def index(request):
    owm = pyowm.OWM(":)")
    mgr = owm.weather_manager()

    if(request.method == "POST"):
        form = CityForm(request.POST)
        form.save()

    form = CityForm()
    city = City.objects.last()
    
    result = get_todays_weather(mgr, city.name)
    forecast_hourly = get_todays_forecast(mgr, city.name) 

    context = {
        "info": result,
        "forecast_hourly": forecast_hourly,
        "form": form
    }

    return render(request, "index.html", context)

style.js


var check = function () { 
    var hours = new Date().getHours();
    hours = 3
    if (hours < 5  )
    { 
      document.getElementById("header_id").style.background = "linear-gradient(to bottom, #692dad, #442aa3)";
      document.getElementById("brand_id").style.color = "#f9fbfc";
      document.getElementById("body_id").style.background = "#8f7cd6";
      document.getElementById("brand_id").style.color = "#f9fbfc";

      var elements = document.getElementsByClassName("nav-link");
      for(var i = 0; i < elements.length; i++)
      {
          if(elements[i].className != "nav-link active")
          {
            elements[i].style.color = "#f9fbfc";
          } 
      }
      document.getElementById("search_btn").style.color = "#f9fbfc"
      document.getElementById("second_card_id").style.background  = "linear-gradient(to bottom, #692dad, #442aa3)";
      var cards = document.getElementsByName("card");
      for(var i = 0; i < cards.length; i++)
      { 
          cards[i].style.background = "linear-gradient(  white 25%, #692dad 50%, white 75% )";
      }
      document.getElementById("card_title_id").style.color = "#f9fbfc";
      document.getElementById("footer_id").style.background = "linear-gradient(to bottom, #692dad, #442aa3)";

    }
    else if (hours < 8  && hours > 5)
    {
        document.getElementById("header_id").style.background = "linear-gradient(to top, #e2e498, #4718f0)";
        document.getElementById("search_btn").style.color = "#f9fbfc"
    }
    else
    {
        document.getElementById("header_id").style.background = "linear-gradient(to top, #ffffff, #C2D0FA)";
        document.getElementById("search_btn").style.color = "#FBFBFB";
        document.getElementById("search_btn").style.background = "#2E50B0";
        var cards = document.getElementsByName("card");
        for(var i = 0; i < cards.length; i++)
        {
            //cards[i].style.background = "#D5B2EB"; 
            cards[i].style.background = "linear-gradient(  white 25%, #adc1fd 50%, white 75% )";
        }
    
    }
  }
  

check();

Does this help? https://stackoverflow.com/questions/20895526/forbidden-403-csrf-verification-failed-request-aborted-even-using-the-csr — , Dec 14 '20 at 17:01
Also, what exactly do you mean by "link html with that js"? Are you talking about a ` — , Dec 14 '20 at 17:34

score 0 · Answer 1 · answered Dec 14 '20 at 17:28

There's a part in the django docs that describes how to fetch a CSRF token from javascript. I saw this used in some tutorials of using Django REST Framework to query api views from js. Might be a good place to start.

https://docs.djangoproject.com/en/3.1/ref/csrf/#ajax

Django + JS != CSRF

1 Answers1