Phoenix - invald CSRF на пост AJAX

Question

Я научился использовать феникс-фреймворк, и я пытаюсь сделать пост AJAX для действия контроллера, однако я столкнулся с проблемой защиты CSRF.

Для начала, я не использую форму - просто хочу, чтобы передать текст от входа к контроллеру:

<input type="text" id="raw-input" /> 
<button id="send-button">Send it!</button> 

<script> 
$("#send-button").click(function(){ 
    var input = $("#raw-input").val(); 

    $.ajax({ 
     url: "/test/process", 
     type: "POST", 
     dataType: "json", 
     beforeSend: function(xhr) {xhr.setRequestHeader("X-CSRF-Token", $("meta[name='csrf-token']").attr("content"))}, 
     data: {"input" : input}, 
     success: function(response){ 
      console.log(response); 
     } 
    }); 
}); 
</script> 

Контроллер (не беспокоюсь делать что-нибудь еще input ... просто хочу проверить успешную почту):

def process(conn, %{"input" => input}) do 
    IO.puts "got it!" 
end 

и маршрутизатор:

post "/test/process", TestController, :process 

Я довольно сильно поднял вызов $.ajax из приложения Rails, где он работал нормально, но это не делает трюк здесь - запуск этого возвращает ошибку 403 и журналы (Plug.CSRFProtection.InvalidCSRFTokenError) invalid CSRF (Cross Site Request Forgery) token, make sure all requests include a valid '_csrf_token' param or 'x-csrf-token' header.

Может ли кто-нибудь предложить какие-либо указания? Спасибо!

Answer 1

Это потому, что по умолчанию Феникс не создает метатег с маркером CSRF. Они включаются только в формы, созданные вспомогательными функциями Phoenix, и они скрыты.

Чтобы получить программный токен CSRF в Phoenix, вы можете позвонить Plug.CSRFProtection.get_csrf_token/0. Есть много способов передать это вашему JS. Вы можете добавить метатег в свой макет, чтобы включить его на каждую страницу, но это может быть не очень эффективно, поскольку оно будет создано для всех страниц. Вы также можете просто сохранить его в переменной JS в том виде, в котором вы им требуете:

<input type="text" id="raw-input" /> 
<button id="send-button">Send it!</button> 

<script> 
$("#send-button").click(function(){ 
    var CSRF_TOKEN = <%= raw Poison.encode!(Plug.CSRFProtection.get_csrf_token()) %>; 
    var input = $("#raw-input").val(); 

    $.ajax({ 
     url: "/test/process", 
     type: "POST", 
     dataType: "json", 
     beforeSend: function(xhr) { 
      xhr.setRequestHeader("X-CSRF-Token", CSRF_TOKEN); 
     }, 
     data: {"input" : input}, 
     success: function(response){ 
      console.log(response); 
     } 
    }); 
}); 
</script>