From fc153f4ab71c08b4d84ea1af28977a4aad2b4d82 Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Tue, 14 Jun 2016 13:37:33 +0200 Subject: [PATCH] Add csrf utils --- .../ascribe_detail/further_details_fileuploader.js | 14 ++++---------- js/components/ascribe_forms/input_fineuploader.js | 10 +++------- .../contract_settings_update_button.js | 10 +++------- .../ascribe_uploader/react_s3_fine_uploader.js | 11 +++++------ js/constants/application_constants.js | 1 - js/constants/csrf_constants.js | 7 +++++++ js/utils/csrf.js | 14 ++++++++++++++ 7 files changed, 36 insertions(+), 31 deletions(-) create mode 100644 js/constants/csrf_constants.js create mode 100644 js/utils/csrf.js diff --git a/js/components/ascribe_detail/further_details_fileuploader.js b/js/components/ascribe_detail/further_details_fileuploader.js index 39295f4c..a0ef3d4d 100644 --- a/js/components/ascribe_detail/further_details_fileuploader.js +++ b/js/components/ascribe_detail/further_details_fileuploader.js @@ -9,7 +9,7 @@ import ReactS3FineUploader from './../ascribe_uploader/react_s3_fine_uploader'; import AppConstants from '../../constants/application_constants'; import { validationTypes } from '../../constants/uploader_constants'; -import { getCookie } from '../../utils/fetch_api'; +import { makeCsrfHeader } from '../../utils/csrf'; import { getLangText } from '../../utils/lang'; import { resolveUrl } from '../../utils/url_resolver'; @@ -82,9 +82,7 @@ let FurtherDetailsFileuploader = React.createClass({ enabled: true, method: 'DELETE', endpoint: `${AppConstants.serverUrl}/s3/delete`, - customHeaders: { - 'X-CSRFToken': getCookie(AppConstants.csrftoken) - } + customHeaders: makeCsrfHeader() }} isReadyForFormSubmission={isReadyForFormSubmission} keyRoutine={{ @@ -97,9 +95,7 @@ let FurtherDetailsFileuploader = React.createClass({ setIsUploadReady={setIsUploadReady} session={{ endpoint: `${AppConstants.serverUrl}/api/blob/otherdatas/fineuploader_session/`, - customHeaders: { - 'X-CSRFToken': getCookie(AppConstants.csrftoken) - }, + customHeaders: makeCsrfHeader(), params: { 'pk': otherDataIds }, @@ -110,9 +106,7 @@ let FurtherDetailsFileuploader = React.createClass({ }} signature={{ endpoint: `${AppConstants.serverUrl}/s3/signature/`, - customHeaders: { - 'X-CSRFToken': getCookie(AppConstants.csrftoken) - } + customHeaders: makeCsrfHeader() }} submitFile={submitFile} showErrorPrompt={showErrorPrompt} diff --git a/js/components/ascribe_forms/input_fineuploader.js b/js/components/ascribe_forms/input_fineuploader.js index e5819d2d..0f1995f2 100644 --- a/js/components/ascribe_forms/input_fineuploader.js +++ b/js/components/ascribe_forms/input_fineuploader.js @@ -7,7 +7,7 @@ import FileDragAndDrop from '../ascribe_uploader/ascribe_file_drag_and_drop/file import AppConstants from '../../constants/application_constants'; -import { getCookie } from '../../utils/fetch_api'; +import { makeCsrfHeader } from '../../utils/csrf'; const { func, bool, oneOf } = React.PropTypes; @@ -122,17 +122,13 @@ const InputFineUploader = React.createClass({ showErrorPrompt={showErrorPrompt} signature={{ endpoint: `${AppConstants.serverUrl}/s3/signature/`, - customHeaders: { - 'X-CSRFToken': getCookie(AppConstants.csrftoken) - } + customHeaders: makeCsrfHeader() }} deleteFile={{ enabled: true, method: 'DELETE', endpoint: `${AppConstants.serverUrl}/s3/delete`, - customHeaders: { - 'X-CSRFToken': getCookie(AppConstants.csrftoken) - } + customHeaders: makeCsrfHeader() }} enableLocalHashing={enableLocalHashing} uploadMethod={uploadMethod} diff --git a/js/components/ascribe_settings/contract_settings_update_button.js b/js/components/ascribe_settings/contract_settings_update_button.js index c6994a31..e087eea4 100644 --- a/js/components/ascribe_settings/contract_settings_update_button.js +++ b/js/components/ascribe_settings/contract_settings_update_button.js @@ -14,7 +14,7 @@ import AppConstants from '../../constants/application_constants'; import { validationTypes } from '../../constants/uploader_constants'; import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils'; -import { getCookie } from '../../utils/fetch_api'; +import { makeCsrfHeader } from '../../utils/csrf'; import { getLangText } from '../../utils/lang'; import { resolveUrl } from '../../utils/url_resolver'; @@ -76,17 +76,13 @@ let ContractSettingsUpdateButton = React.createClass({ setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}} signature={{ endpoint: `${AppConstants.serverUrl}/s3/signature/`, - customHeaders: { - 'X-CSRFToken': getCookie(AppConstants.csrftoken) - } + customHeaders: makeCsrfHeader() }} deleteFile={{ enabled: true, method: 'DELETE', endpoint: `${AppConstants.serverUrl}/s3/delete`, - customHeaders: { - 'X-CSRFToken': getCookie(AppConstants.csrftoken) - } + customHeaders: makeCsrfHeader() }} fileClassToUpload={{ singular: getLangText('UPDATE'), diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js index 0c9a2585..a5c20114 100644 --- a/js/components/ascribe_uploader/react_s3_fine_uploader.js +++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js @@ -15,12 +15,11 @@ import ErrorQueueStore from '../../stores/error_queue_store'; import GlobalNotificationModel from '../../models/global_notification_model'; import GlobalNotificationActions from '../../actions/global_notification_actions'; -import AppConstants from '../../constants/application_constants'; import { ErrorClasses, testErrorAgainstAll } from '../../constants/error_constants'; import { RETRY_ATTEMPT_TO_SHOW_CONTACT_US, ENDPOINTS } from '../../constants/uploader_constants'; import { displayValidFilesFilter, FileStatus, transformAllowedExtensionsToInputAcceptProp } from './react_s3_fine_uploader_utils'; -import { getCookie } from '../../utils/fetch_api'; +import { getCsrfToken, makeCsrfHeader } from '../../utils/csrf'; import { computeHashOfFile, extractFileExtensionFromString } from '../../utils/file'; import { getLangText } from '../../utils/lang'; @@ -215,7 +214,7 @@ const ReactS3FineUploader = React.createClass({ return { filesToUpload: [], uploader: this.createNewFineUploader(), - csrfToken: getCookie(AppConstants.csrftoken), + csrfToken: getCsrfToken(), errorState: { manualRetryAttempt: 0, errorClass: null @@ -235,7 +234,7 @@ const ReactS3FineUploader = React.createClass({ // since the csrf header is defined in this component's props, // everytime the csrf cookie is changed we'll need to reinitalize // fineuploader and update the actual csrf token - let potentiallyNewCSRFToken = getCookie(AppConstants.csrftoken); + let potentiallyNewCSRFToken = getCsrfToken(); if(this.state.csrfToken !== potentiallyNewCSRFToken) { this.setState({ uploader: this.createNewFineUploader(), @@ -318,7 +317,7 @@ const ReactS3FineUploader = React.createClass({ headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', - 'X-CSRFToken': getCookie(AppConstants.csrftoken) + ...makeCsrfHeader() }, credentials: 'include', body: JSON.stringify({ @@ -361,7 +360,7 @@ const ReactS3FineUploader = React.createClass({ headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', - 'X-CSRFToken': getCookie(AppConstants.csrftoken) + ...makeCsrfHeader() }, credentials: 'include', body: JSON.stringify({ diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js index f448b432..163c281b 100644 --- a/js/constants/application_constants.js +++ b/js/constants/application_constants.js @@ -13,7 +13,6 @@ const constants = { 'acl_withdraw_transfer', 'acl_wallet_submit'], 'version': 0.1, - 'csrftoken': 'csrftoken2', 'subdomains': [ { 'subdomain': 'cc', diff --git a/js/constants/csrf_constants.js b/js/constants/csrf_constants.js new file mode 100644 index 00000000..bb644dcf --- /dev/null +++ b/js/constants/csrf_constants.js @@ -0,0 +1,7 @@ +export const CSRF_COOKIE_NAME = 'csrftoken2'; +export const CSRF_CUSTOM_HEADER_NAME = 'X-CSRFToken'; + +export default { + CSRF_COOKIE_NAME, + CSRF_CUSTOM_HEADER_NAME +}; diff --git a/js/utils/csrf.js b/js/utils/csrf.js new file mode 100644 index 00000000..6ace165d --- /dev/null +++ b/js/utils/csrf.js @@ -0,0 +1,14 @@ +import { getCookie } from './cookie.js'; + +import { CSRF_COOKIE_NAME, CSRF_CUSTOM_HEADER_NAME } from '../constants/csrf_constants'; + + +export function getCsrfToken() { + return getCookie(CSRF_COOKIE_NAME); +} + +export function makeCsrfHeader(csrfToken = getCsrfToken()) { + return csrfToken ? { + [CSRF_CUSTOM_HEADER_NAME]: csrfToken + } : {}; +}