2017-05-08 111 views
0

所以我使用的是Chrome,带有Django版本1.9.6,python 2.7.13。Django与html/js错误 - 禁止(CSRF cookie未设置。)

我试图从发送HTML/JS通过原始数据(音频文件)Django的服务器从.MP3转换为.wav格式。

但是,它甚至没有设置CSRF cookie的views.py。错误。

我已经尝试了几乎所有我可以在网上找到的东西。

我有以下views.py和index.html。

的index.html

<!DOCTYPE html> 
 
<html lang="en-US"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css"> 
 
    <title title="Audio Editor">Audio Editor</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 
<main> 
 
    <h1><img src="http://blog.blogtalkradio.com/wp-content/uploads/2011/10/Audio_Icon.jpg" alt="http://blog.blogtalkradio.com/wp-content/uploads/2011/10/Audio_Icon.jpg" style="float:left;width:30px;height:width;"><img src="https://image.freepik.com/free-icon/question-mark_318-52837.jpg" alt="https://image.freepik.com/free-icon/question-mark_318-52837.jpg" style="float:left;width:30px;height:width;"> Obfuscate your audio</h1> 
 
    <br> 
 
    <br> 
 
    <body> 
 
    <h3>1. Upload your audio:</h3> 
 
    <input type="file" id="audio-file" onchange="fileAdded()"/> 
 
    <p id="message"></p> 
 
    <br> 
 
    <h3>2. Obfuscate and download:</h3> 
 
    <button id="obfuscate-button" onclick="obfuscate()">Obfuscate!</button> 
 
    </body> 
 
    <br> 
 
    <br> 
 
    <hr> 
 
    <a href="https://github.com/mgjo5899/web_audio">Check out the github page!</a> 
 
</main> 
 

 
<script> 
 
var file = undefined; 
 
var audio_formats = ["mp3", "wav"]; 
 

 
// using jQuery 
 
function getCookie(name) { 
 
    var cookieValue = null; 
 

 
    if (document.cookie && document.cookie !== '') { 
 
    var cookies = document.cookie.split(';'); 
 
    for (var i = 0; i < cookies.length; i++) { 
 
     var cookie = jQuery.trim(cookies[i]); 
 
     // Does this cookie string begin with the name we want? 
 
     if (cookie.substring(0, name.length + 1) === (name + '=')) { 
 
     cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
 
     break; 
 
     } 
 
    } 
 
    } 
 

 
    return cookieValue; 
 
} 
 

 
function fileAdded() { 
 
    var x = document.getElementById("audio-file"); 
 
    file = x.files[0]; 
 
    var msg = document.getElementById("message"); 
 

 
    if (file != undefined) { 
 
    x = file.name.split("."); 
 
    var ext = x[x.length - 1]; 
 

 
    if (audio_formats.indexOf(ext) == -1) { 
 
     msg.innerHTML = ext + " is not an audio file!"; 
 
    } else { 
 
     msg.innerHTML = file.name + " has been successfully added!"; 
 
    } 
 
    } else { 
 
    msg.innerHTML = "Please select an audio file to obfuscate!"; 
 
    } 
 
} 
 

 
function obfuscate() { 
 
    if (file == undefined) 
 
    alert("Choose an audio file!"); 
 
    else { 
 
    var obfuscateButton = document.getElementById("obfuscate-button"); 
 
    obfuscateButton.innerHTML = "Proccessing..."; 
 
    var xhr = new XMLHttpRequest(); 
 
    var url = "http://127.0.0.1:8000/obfuscator/obfuscate/"; 
 
    var method = 'POST'; 
 
    xhr.onreadystatechange = function() { 
 
     if(xhr.readyState === 4 && xhr.status === 200) { 
 
     \t obfuscateButton.innerHTML = "Done!" 
 
     } 
 
    } 
 
    xhr.open(method, url, true); 
 

 
\t xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken')); 
 

 
    var formData = new FormData(); 
 
    formData.append("audio_file", file); 
 
    formData.append("file_name", file.name) 
 
    xhr.send(formData); 
 
    } 
 
} 
 
</script> 
 
</html>

view.py

from django.http import HttpResponse 
 
from django.shortcuts import render 
 
from django.views.decorators.csrf import ensure_csrf_cookie 
 
from subprocess import call 
 
from django.core.files import File 
 
from .forms import UploadFileForm 
 
from django.views.decorators.csrf import csrf_exempt 
 
import subprocess 
 

 
def index(request): 
 
\t return render(request, 'obfuscator/index.html') 
 

 
#@csrf_exempt 
 
def obfuscate(request): 
 
\t print("HI") 
 
\t if request.method == 'GET': 
 
\t \t return HttpResponse("Hi") 
 

 
\t if request.method == 'POST': 
 
\t \t print("files: " + str(request.FILES)) 
 
\t \t print("posts: " + str(request.POST)) 
 

 
\t \t if len(request.POST) > 0: 
 
\t \t \t handle_uploaded_file(request.FILES['audio_file']) 
 

 
\t return HttpResponse("The form was valid!") 
 

 
def handle_uploaded_file(f): 
 
\t with open('temp.mp3', 'wb+') as destination: 
 
\t \t for chunk in f.chunks(): 
 
\t \t \t destination.write(chunk) 
 

 
\t subprocess.check_call("ffmpeg -y -i temp.mp3 temp.wav", shell=True)

我真的不知道为什么,这是不是我的计算机(Mac OS X)上工作。 每次它给我(CSRF cookie未设置)错误,而不是(CSRF令牌丢失或不正确)错误。

我可以用这与csrf_exempt,但我想和CSRF保护使用它。

请帮忙!

谢谢。

回答

0

事实上,你出现错误CSRF因为你没有在您的模板设置CSRF饼干

你需要设置你的templat的csrf_token如下:

<form action="#" method="POST"> 
    {% csrf_token %} 
    <h3>1. Upload your audio:</h3> 
    <input type="file" id="audio-file" onchange="fileAdded()"/> 
    <p id="message"></p> 
    <br> 
    <h3>2. Obfuscate and download:</h3> 
    <button id="obfuscate-button" onclick="obfuscate()">Obfuscate! </button> 
</form> 

在另一方面,也许你可以尝试使用@ensure_csrf_cookie装饰在渲染模板

@ensure_csrf_cookie 
def index(request): 
    return render(request, 'obfuscator/index.html') 
+0

我想这样做的I被添加在JavaScript部分手动csrf_token视图etrequestHeader(“...”)打开后,就在发送ajax发送之前。你可否确认? – Joseph

+0

你的方法来获取和设置设置cookie要求赫德是OKK,但你需要哟创建的cookie,并使用Django,你可以 –

+0

是的,但不是说只使用时csrf_token标签或wirh的装饰做html代码直接发送HTTP请求?像使用输入类型或类似的东西 – Joseph