From c235711ffee6999c09bd6910373ebcfbc7758e99 Mon Sep 17 00:00:00 2001 From: nightpool Date: Mon, 8 Jan 2018 14:01:33 -0500 Subject: [PATCH] Refactor /api/web APIs to use the centralized axios instance (#6223) Also adds the ability to decouple the centralized axios logic from the state dispatcher --- app/controllers/api/base_controller.rb | 2 +- .../actions/push_notifications/registerer.js | 12 ++++++------ app/javascript/mastodon/actions/settings.js | 4 ++-- app/javascript/mastodon/api.js | 12 ++++++++++-- .../mastodon/features/ui/components/embed_modal.js | 4 ++-- 5 files changed, 21 insertions(+), 13 deletions(-) diff --git a/app/controllers/api/base_controller.rb b/app/controllers/api/base_controller.rb index 5983c0fbe..52e68ab35 100644 --- a/app/controllers/api/base_controller.rb +++ b/app/controllers/api/base_controller.rb @@ -6,8 +6,8 @@ class Api::BaseController < ApplicationController include RateLimitHeaders - skip_before_action :verify_authenticity_token skip_before_action :store_current_location + protect_from_forgery with: :null_session rescue_from ActiveRecord::RecordInvalid, Mastodon::ValidationError do |e| render json: { error: e.to_s }, status: 422 diff --git a/app/javascript/mastodon/actions/push_notifications/registerer.js b/app/javascript/mastodon/actions/push_notifications/registerer.js index 1d040bc8c..5f47a5501 100644 --- a/app/javascript/mastodon/actions/push_notifications/registerer.js +++ b/app/javascript/mastodon/actions/push_notifications/registerer.js @@ -1,4 +1,4 @@ -import axios from 'axios'; +import api from '../../api'; import { pushNotificationsSetting } from '../../settings'; import { setBrowserSupport, setSubscription, clearSubscription } from './setter'; @@ -35,7 +35,7 @@ const subscribe = (registration) => const unsubscribe = ({ registration, subscription }) => subscription ? subscription.unsubscribe().then(() => registration) : registration; -const sendSubscriptionToBackend = (subscription, me) => { +const sendSubscriptionToBackend = (getState, subscription, me) => { const params = { subscription }; if (me) { @@ -45,7 +45,7 @@ const sendSubscriptionToBackend = (subscription, me) => { } } - return axios.post('/api/web/push_subscriptions', params).then(response => response.data); + return api(getState).post('/api/web/push_subscriptions', params).then(response => response.data); }; // Last one checks for payload support: https://web-push-book.gauntface.com/chapter-06/01-non-standards-browsers/#no-payload @@ -85,13 +85,13 @@ export function register () { } else { // Something went wrong, try to subscribe again return unsubscribe({ registration, subscription }).then(subscribe).then( - subscription => sendSubscriptionToBackend(subscription, me)); + subscription => sendSubscriptionToBackend(getState, subscription, me)); } } // No subscription, try to subscribe return subscribe(registration).then( - subscription => sendSubscriptionToBackend(subscription, me)); + subscription => sendSubscriptionToBackend(getState, subscription, me)); }) .then(subscription => { // If we got a PushSubscription (and not a subscription object from the backend) @@ -137,7 +137,7 @@ export function saveSettings() { const alerts = state.get('alerts'); const data = { alerts }; - axios.put(`/api/web/push_subscriptions/${subscription.get('id')}`, { + api(getState).put(`/api/web/push_subscriptions/${subscription.get('id')}`, { data, }).then(() => { const me = getState().getIn(['meta', 'me']); diff --git a/app/javascript/mastodon/actions/settings.js b/app/javascript/mastodon/actions/settings.js index aeef43527..b96383daa 100644 --- a/app/javascript/mastodon/actions/settings.js +++ b/app/javascript/mastodon/actions/settings.js @@ -1,4 +1,4 @@ -import axios from 'axios'; +import api from '../api'; import { debounce } from 'lodash'; export const SETTING_CHANGE = 'SETTING_CHANGE'; @@ -23,7 +23,7 @@ const debouncedSave = debounce((dispatch, getState) => { const data = getState().get('settings').filter((_, path) => path !== 'saved').toJS(); - axios.put('/api/web/settings', { data }).then(() => dispatch({ type: SETTING_SAVE })); + api(getState).put('/api/web/settings', { data }).then(() => dispatch({ type: SETTING_SAVE })); }, 5000, { trailing: true }); export function saveSettings() { diff --git a/app/javascript/mastodon/api.js b/app/javascript/mastodon/api.js index ecc703c0a..0be08d7fd 100644 --- a/app/javascript/mastodon/api.js +++ b/app/javascript/mastodon/api.js @@ -1,4 +1,5 @@ import axios from 'axios'; +import ready from './ready'; import LinkHeader from './link_header'; export const getLinks = response => { @@ -11,10 +12,17 @@ export const getLinks = response => { return LinkHeader.parse(value); }; +let csrfHeader = {}; +function setCSRFHeader() { + const csrfToken = document.querySelector('meta[name=csrf-token]').content; + csrfHeader['X-CSRF-Token'] = csrfToken; +} +ready(setCSRFHeader); + export default getState => axios.create({ - headers: { + headers: Object.assign(csrfHeader, getState ? { 'Authorization': `Bearer ${getState().getIn(['meta', 'access_token'], '')}`, - }, + } : {}), transformResponse: [function (data) { try { diff --git a/app/javascript/mastodon/features/ui/components/embed_modal.js b/app/javascript/mastodon/features/ui/components/embed_modal.js index 1afffb51b..d440a8826 100644 --- a/app/javascript/mastodon/features/ui/components/embed_modal.js +++ b/app/javascript/mastodon/features/ui/components/embed_modal.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { FormattedMessage, injectIntl } from 'react-intl'; -import axios from 'axios'; +import api from '../../../api'; @injectIntl export default class EmbedModal extends ImmutablePureComponent { @@ -23,7 +23,7 @@ export default class EmbedModal extends ImmutablePureComponent { this.setState({ loading: true }); - axios.post('/api/web/embed', { url }).then(res => { + api().post('/api/web/embed', { url }).then(res => { this.setState({ loading: false, oembed: res.data }); const iframeDocument = this.iframe.contentWindow.document;