diff --git a/pinry-spa/src/components/utils/csrf.js b/pinry-spa/src/components/utils/csrf.js new file mode 100644 index 0000000..647ddaa --- /dev/null +++ b/pinry-spa/src/components/utils/csrf.js @@ -0,0 +1,37 @@ +import axios from 'axios'; + +function getCookie(name) { + const value = `; ${document.cookie}`; + const parts = value.split(`; ${name}=`); + if (parts.length === 2) { + return parts.pop().split(';').shift(); + } + return null; +} + + +function getCSRFToken() { + return getCookie('csrftoken'); +} + +function csrfSafeMethod(method) { + // these HTTP methods do not require CSRF protection + return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); +} + +function setUpAxiosCsrfConfig() { + axios.interceptors.request.use( + (config) => { + if (!csrfSafeMethod(config.method.toUpperCase())) { + // eslint-disable-next-line no-param-reassign + config.headers['X-CSRFToken'] = getCSRFToken(); + } + return config; + }, + (error) => { + Promise.reject(error); + }, + ); +} + +export default setUpAxiosCsrfConfig; diff --git a/pinry-spa/src/main.js b/pinry-spa/src/main.js index 1f99c89..51af9e8 100644 --- a/pinry-spa/src/main.js +++ b/pinry-spa/src/main.js @@ -3,11 +3,12 @@ import Vue from 'vue'; import { VueMasonryPlugin } from 'vue-masonry'; import App from './App.vue'; import router from './router'; - +import setUpAxiosCsrfConfig from './components/utils/csrf'; Vue.config.productionTip = false; Vue.use(Buefy); Vue.use(VueMasonryPlugin); +setUpAxiosCsrfConfig(); new Vue({ router,