Phoenix ignoriert csrf_token für eine Ajax-Request

Question

ich diese Ajax-Request haben:

//.............. 
var xhr = new XMLHttpRequest(); 
xhr.open("POST", url, true); 
xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8"); 
xhr.setRequestHeader("x-csrf-token", document.querySelector("meta[name=csrf]").content); 
xhr.send(JSON.stringify(data)); 

Auf einer Seite gibt es einen csrf Token von Phoenix erzeugt.

<meta name="csrf" content="<%= Plug.CSRFProtection.get_csrf_token() %>" /> 

Es ist auf einem Server zusammen mit jeder Ajax-Anfrage gesendet, die ich in Chrome sehen kann. Aber mein Server gibt immer zurück:

"403: invalid CSRF (Cross Site Request Forgery) token, make sure all requests include a valid '_csrf_token' param or 'x-csrf-token' header" 

Warum? Wie behebe ich das?

Answer 1

Ich denke, der Name sollte "csrf-Token" statt nur "csrf" sein. Dies ist, was ich in app.html.eex verwenden (es ist von der ex_turbolinks Bibliothek readme.

<meta name="csrf-token" content="<%= get_csrf_token() %>"> 
<meta name="csrf-param" content="_csrf_token"> 

Um gerade in der Ansicht get_csrf_token/0 zu verwenden, aber Sie haben get_csrf_token: 0 zur Liste der Importe hinzufügen von Phoenix.Controller in der view Funktion in my_app_web.ex zum Beispiel:..

lib/my_app_web.ex 

def view do 
    quote do 
    ... 
    # Import convenience functions from controllers 
    import Phoenix.Controller, only: [get_flash: 2, view_module: 1, 
    get_csrf_token: 0] 
    ... 
    end 
end 

Answer 2

name="csrf-token" id="csrf-token" value="<%= Plug.CSRFProtection.get_csrf_token() %>" Try this Dies ist für mich arbeitet

var xhr = new XMLHttpRequest(); 
var csrf_token = document.getElementById('csrf-token').value; 
xhr.open('POST', '/api/vote'); 
xhr.setRequestHeader('Content-Type', 'application/json'); 
xhr.setRequestHeader("X-CSRF-Token", csrf_token); 

Dies ist meine Ajax Anfrage