投稿2020/08/04 15:56
編集2020/08/04 16:02DjangoとVue.jsにおいて、アプリを開発する際に、フロント側をVue.js、APIサーバーとしてDjangoを使用していた場合にどのようにして、CSRF対策を行うかといった部分でつまずいてしまっています。
ユーザーがURLからトップページなどにアクセスした場合に、表示されるファイルは、「Vueファイル」であるかと思います。
実際に表示されたファイルがForm画面であり、ユーザーが値を入力後、axiosによってDjango側にPOSTリクエストを行なった場合、CSRFトークンを投げなかった場合に、認証エラーとなってしまいます。
ここで疑問なのですが、Djangoのテンプレートを使用していた場合は、{ % csrf_token %}とすることで、トークンが自動で付与されましたが、Vueファイルの場合はそのようなことが出来ません。
その為、どこかでDjangoからCSRFトークンをブラウザ側へ投げる、もしくはCSRFを突破する別の方法が必要であるかと思いますが、その方法が現状見つからない状況です。
Vue側はVueCliでプロジェクトを作成し、開発を進めている段階です。
以下は、axiosを用いてDjango側へリクエストを投げるVueファイルになります。
<template> <div> <h1>test-site</h1> <h5>test</h5> <p v-if="errors.length"> <b>Please correct the following error(s):</b> <ul> <li v-for="(error,index) in errors" :key="index">{{ error }}</li> </ul> </p> <form action="" method="get" v-on:submit.prevent="submit"> <input type="text" v-model="inputUrl" name="url" placeholder="http://example.com"> <button type="submit">送信</button> </form> </div> </template> <script> import axios from 'axios' import Cookies from 'js-cookie' export default { data() { return { errors:[], inputUrl:'', csrftoken:'', } }, methods: { submit(){ this.errors = []; this.csrftoken = Cookies.get('csrftoken'); console.log('csrftoken: ' , this.csrftoken); if(!this.inputUrl){ this.errors.push('URLを入力して下さい') }else if(!this.checkFormat(this.inputUrl)){ this.errors.push('URLが正しくありません') } if (!this.errors.length){ axios.post( '/polls/check/', this.inputUrl, { headers:{ 'X-CSRFToken':this.csrftoken } } ) .then(response => { console.log(response) }) .catch(error => { console.log(error) }) } }, checkFormat(url){ var re = /^http(|s)://.+/ return re.test(url); } }, } </script>
現状、Vue側では、this.csrftoken = Cookies.get('csrftoken');にてクッキーの取得を行っていますが、当然Django側へアクセスをしていない為、CSRFトークンは存在せずundefinedとなってしまっています。
CSRFトークンに関してはDjangoのドキュメントを読み、CSRFトークンを取得する方法は分かったのですが、送信する方法は分かりませんでした。
こちらの問題につきまして、解決策が見当たらない状況な為、ご助言頂けましたら幸いです。
回答2件
0
ベストアンサー
やはりCSRFの制限がある限り、DjangoからVueアプリをサーブしなきゃいけなさそうです。
肝心なのは、Django 側に django-webpack-loader と、Vue 側に webpack-bundle-tracker です。
Vue 側に webpack-bundle-tracker をインストール：
npm install --save-dev webpack-bundle-tracker
Vue 側に、 vue.config.js で下記のように設定してください：
javascript
1// vue.config.js 2const BundleTracker = require("webpack-bundle-tracker"); 3 4module.exports = { 5 publicPath: "http://0.0.0.0:8080/", 6 outputDir: "dist", 7 8 configureWebpack: { 9 plugins: [ 10 new BundleTracker({ filename: './webpack-stats.json' }), 11 ], 12 }, 13};
設定値を説明します：
publicPath は相対リンクの root です。django-webpack-loader によって、ポートが8080です。
outputDir はトランスパイルの結果ファイルの置き場です。後でDjangoに知らせます。
configureWebpack に BundleTracker のプラグインを設定します。その追跡ファイルも後でDjangoに知らせます。
Django 側に、django-webpack-loader をインストール：
pip install django-webpack-loader
Django 側に、settings.py で下記のように設定してください：
python
1// settings.py 2... 3 4STATICFILES_DIRS = [ 5 os.path.join(BASE_DIR, 'dist'), 6] 7 8... 9 10WEBPACK_LOADER = { 11 'DEFAULT': { 12 'BUNDLE_DIR_NAME': '', 13 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'), 14 } 15} 16 17... 18 19INSTALLED_APPS = ( 20 ... 21 'webpack_loader', 22) 23 24... 25 26TEMPLATES = [ 27 { 28 'BACKEND': 'django.template.backends.django.DjangoTemplates', 29 'DIRS': [ 30 os.path.join(BASE_DIR, 'templates'), 31 ], 32 'OPTIONS': { 33 'context_processors': [ 34 'django.template.context_processors.debug', 35 'django.template.context_processors.request', 36 'django.contrib.auth.context_processors.auth', 37 'django.contrib.messages.context_processors.messages', 38 ], 39 }, 40 } 41] 42
設定値を説明します：
STATICFILES_DIRS は静的なファイルの置き場です。先の outputDir をここに入れます。
BUNDLE_DIR_NAME は Vue の出力場所です。dist に直接出力なので、空にします。
STATS_FILE は BundleTracker の追跡ファイルです。先の追跡ファイルをここに入れます。
INSTALLED_APPS で webpack_loader を最後に入れます。
TEMPLATES で設定するフォルダに下記のテンプレートを入れます。
html
1// templates/application.html 2{% load render_bundle from webpack_loader %} 3{% render_bundle 'app' %}
そして、urls.py で下記のように設定してください：
python
1// urls.py 2from django.views.generic import TemplateView 3 4urlpatterns = [ 5 path('admin/', admin.site.urls), 6 path("", 7 TemplateView.as_view(template_name="application.html"), 8 name="app", 9 ), 10]
上記のように設定したら、二つのターミナルを用意して、下記二つの命令をそれぞれに実行してください：
npm run serve python manage.py runserver
そうしたら、ブラウザーで http://127.0.0.1:8000 に訪問すれば、アプリが作動しているはずです。
参照
投稿2020/08/06 03:00
編集2020/08/09 00:21
総合スコア463
0
Axiosを投げる際に、下記のように設定しておけばCSRFは通るかと思います。
axios.defaults.xsrfCookieName = 'csrftoken' axios.defaults.xsrfHeaderName = "X-CSRFTOKEN" axios.post('url') .then() .catch()
また、puluginsディレクトリ等に、http.jsなどの名前で自作プラグインを作成することでデフォルトでこの設定することも可能です。
javascript
1// plugins/http.js 2import Vue from 'vue' 3import axios from 'axios' 4 5export default { 6 install: (Vue, options) => { 7 const http = axios.create({ 8 xsrfCookieName:'csrftoken', 9 xsrfHeaderName:"X-CSRFTOKEN", 10 }) 11 Vue.prototype.$axios = http 12 } 13} 14
javascript
1// main.js 2import http from '@/plugins/http' 3Vue.use(http)
Vue
1methods: { 2 post () { 3 this.$axios('url') 4 .then() 5 .catch() 6 } 7}
ところどころ省略はしていますが、だいたいこんな感じでいけると思います。
お役に立てれば幸いです。
投稿2020/08/05 13:24
総合スコア117
あなたの回答
tips
プレビュー
Q&A
