More CSRF in front-end.

This commit is contained in:
gaba
2016-12-23 13:07:16 -08:00
parent ec3e9d1cd4
commit 8e6aa23d32
15 changed files with 36 additions and 48 deletions
+2 -2
View File
@@ -12,7 +12,7 @@ export const checkLogin = () => dispatch => {
coralApi('/auth')
.then(result => {
if (result.csrfToken !== null) {
dispatch(checkCSRFToken(result.csrfToken));
dispatch(check_csrf(result.csrfToken));
}
const isAdmin = !!result.user.roles.filter(i => i === 'admin').length;
@@ -22,7 +22,7 @@ export const checkLogin = () => dispatch => {
};
// Set CSRF Token
export const checkCSRFToken = (csrfToken) => ({type: actions.CHECK_CSRF_TOKEN, csrfToken});
export const check_csrf = (_csrf) => ({type: actions.CHECK_CSRF_TOKEN, _csrf});
// LogOut Actions
@@ -7,13 +7,13 @@ import {Button} from 'react-mdl';
export default class CommentBox extends React.Component {
constructor (props) {
super(props);
this.state = {name: '', body: '', csrfToken: props.csrfToken};
this.state = {name: '', body: '', _csrf: props._csrf};
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit () {
const {name, body, csrfToken} = this.state;
this.props.onSubmit({name, body, csrfToken});
const {name, body, _csrf} = this.state;
this.props.onSubmit({name, body, _csrf});
this.setState({body: '', name: ''});
}
@@ -15,7 +15,7 @@ class CommentStream extends React.Component {
constructor (props) {
super(props);
console.log('PROPS IN COMMENTSTREAM ', props);
this.state = {snackbar: false, snackbarMsg: '', csrfToken: props.csrfToken};
this.state = {snackbar: false, snackbarMsg: '', _csrf: props._csrf};
this.onSubmit = this.onSubmit.bind(this);
this.onClickAction = this.onClickAction.bind(this);
}
@@ -26,8 +26,8 @@ class CommentStream extends React.Component {
}
// Submit the new comment
onSubmit (comment, csrfToken) {
this.props.dispatch(createComment(comment.name, comment.body, csrfToken));
onSubmit (comment, _csrf) {
this.props.dispatch(createComment(comment.name, comment.body, _csrf));
}
// The only action for now is flagging
@@ -44,7 +44,7 @@ class CommentStream extends React.Component {
render ({comments, users}, {snackbar, snackbarMsg}) {
return (
<div className={styles.container}>
<CommentBox onSubmit={this.onSubmit} csrfToken={this.state.csrfToken}/>
<CommentBox onSubmit={this.onSubmit} _csrf={this.state._csrf}/>
<CommentList isActive hideActive
singleView={false}
commentIds={comments.ids}
+2 -2
View File
@@ -5,7 +5,7 @@ const initialState = Map({
loggedIn: false,
user: null,
isAdmin: false,
csrfToken: ''
_csrf: ''
});
export default function auth (state = initialState, action) {
@@ -28,7 +28,7 @@ export default function auth (state = initialState, action) {
return initialState;
case actions.CHECK_CSRF_TOKEN:
return state
.set('csrfToken', action.csrfToken);
.set('_csrf', action._csrf);
default :
return state;
}
@@ -96,7 +96,7 @@ class CommentStream extends Component {
const rootItem = this.props.items.assets && this.props.items.assets[rootItemId];
const {actions, users, comments} = this.props.items;
const {status, moderation, closedMessage, charCount, charCountEnable} = this.props.config;
const {loggedIn, isAdmin, user, showSignInDialog, signInOffset, csrfToken} = this.props.auth;
const {loggedIn, isAdmin, user, showSignInDialog, signInOffset, _csrf} = this.props.auth;
const {activeTab} = this.state;
const banned = (this.props.userData.status === 'banned');
@@ -134,12 +134,12 @@ class CommentStream extends Component {
banned={banned}
author={user}
charCount={charCountEnable && charCount}
csrfToken={csrfToken}/>
_csrf={_csrf}/>
</RestrictedContent>
</div>
: <p>{closedMessage}</p>
}
{!loggedIn && <SignInContainer offset={signInOffset} csrfToken={csrfToken}/>}
{!loggedIn && <SignInContainer offset={signInOffset} _csrf={_csrf}/>}
{
rootItem.comments && rootItem.comments.map((commentId) => {
const comment = comments[commentId];
@@ -205,7 +205,7 @@ class CommentStream extends Component {
premod={moderation}
currentUser={user}
charCount={charCountEnable && charCount}
csrfToken={csrfToken}
_csrf={_csrf}
showReply={comment.showReply}/>
{
comment.children &&
@@ -266,7 +266,7 @@ class CommentStream extends Component {
banned={banned}
currentUser={user}
charCount={charCountEnable && charCount}
csrfToken={csrfToken}
_csrf={_csrf}
showReply={reply.showReply}/>
</div>;
})
@@ -319,7 +319,7 @@ const mapStateToProps = state => ({
const mapDispatchToProps = (dispatch) => ({
addItem: (item, item_id) => dispatch(addItem(item, item_id)),
updateItem: (id, property, value, itemType) => dispatch(updateItem(id, property, value, itemType)),
postItem: (data, type, id, csrfToken) => dispatch(postItem(data, type, id, csrfToken)),
postItem: (data, type, id, _csrf) => dispatch(postItem(data, type, id, _csrf)),
getStream: (rootId) => dispatch(getStream(rootId)),
addNotification: (type, text) => dispatch(addNotification(type, text)),
clearNotification: () => dispatch(clearNotification()),
+3 -6
View File
@@ -27,7 +27,6 @@ export const fetchSignIn = (formData) => dispatch => {
dispatch(signInRequest());
coralApi('/auth/local', {method: 'POST', body: formData})
.then(({user}) => {
console.log('DEBUG FORMDATA ', formData);
const isAdmin = !!user.roles.filter(i => i === 'admin').length;
dispatch(signInSuccess(user, isAdmin));
dispatch(hideSignInDialog());
@@ -75,6 +74,7 @@ const signUpFailure = error => ({type: actions.FETCH_SIGNUP_FAILURE, error});
export const fetchSignUp = formData => dispatch => {
dispatch(signUpRequest());
coralApi('/users', {method: 'POST', body: formData})
.then(({user}) => {
dispatch(signUpSuccess(user));
@@ -121,18 +121,15 @@ export const invalidForm = error => ({type: actions.INVALID_FORM, error});
const checkLoginRequest = () => ({type: actions.CHECK_LOGIN_REQUEST});
const checkLoginSuccess = (user, isAdmin) => ({type: actions.CHECK_LOGIN_SUCCESS, user, isAdmin});
const checkLoginFailure = error => ({type: actions.CHECK_LOGIN_FAILURE, error});
const checkCSRFToken = (csrfToken) => ({type: actions.CHECK_CSRF_TOKEN, csrfToken});
const checkCSRF = (_csrf) => ({type: actions.CHECK_CSRF_TOKEN, _csrf});
export const checkLogin = () => dispatch => {
dispatch(checkLoginRequest());
coralApi('/auth')
.then((result) => {
console.log('debug 1 result ', result);
if (result.csrfToken !== null) {
console.log('DEBUG 2 TOKEN', result.csrfToken);
dispatch(checkCSRFToken(result.csrfToken));
dispatch(checkCSRF(result.csrfToken));
}
if (!result.user) {
throw new Error('Not logged in');
}
@@ -12,6 +12,11 @@ const buildOptions = (inputOptions = {}) => {
};
const options = Object.assign({}, defaultOptions, inputOptions);
// // Add CSRF field to each POST.
// if (options.method.toLowerCase() === 'post') {
// options.body._csrf = 'futurecsrf';
// }
if (options.method.toLowerCase() !== 'get') {
options.body = JSON.stringify(options.body);
}
+2 -2
View File
@@ -12,7 +12,7 @@ const initialState = Map({
passwordRequestSuccess: null,
passwordRequestFailure: null,
successSignUp: false,
csrfToken: ''
_csrf: ''
});
const purge = user => {
@@ -44,7 +44,7 @@ export default function auth (state = initialState, action) {
return initialState;
case actions.CHECK_CSRF_TOKEN:
return state
.set('csrfToken', action.csrfToken);
.set('_csrf', action._csrf);
case actions.FETCH_SIGNIN_REQUEST:
return state
.set('isLoading', true);
+3 -5
View File
@@ -14,8 +14,7 @@ class CommentBox extends Component {
comments: PropTypes.array,
reply: PropTypes.bool,
canPost: PropTypes.bool,
currentUser: PropTypes.object,
csrfToken: PropTypes.string
currentUser: PropTypes.object
}
state = {
@@ -33,8 +32,7 @@ class CommentBox extends Component {
addNotification,
appendItemArray,
premod,
author,
csrfToken
author
} = this.props;
let comment = {
@@ -59,7 +57,7 @@ class CommentBox extends Component {
if (this.props.charCount && this.state.body.length > this.props.charCount) {
return;
}
postItem(comment, 'comments', csrfToken)
postItem(comment, 'comments')
.then((postedComment) => {
const commentId = postedComment.id;
if (postedComment.status === 'rejected') {
+1 -1
View File
@@ -1,7 +1,7 @@
import React from 'react';
const FormCSRFField = ({...props}) => (
<input type="hidden" name="csrfToken" value={props.csrfToken} />
<input type="hidden" name="_csrf" value={props.csrfToken_csrf} />
);
export default FormCSRFField;
@@ -18,7 +18,7 @@ class ForgotContent extends React.Component {
}
render () {
const {changeView, auth, csrfToken} = this.props;
const {changeView, auth, _csrf} = this.props;
const {passwordRequestSuccess, passwordRequestFailure} = auth;
return (
@@ -28,7 +28,7 @@ class ForgotContent extends React.Component {
</div>
<form onSubmit={this.handleSubmit}>
<FormCSRFField
csrfToken={csrfToken}
_csrf={_csrf}
/>
<div className={styles.formField}>
<label htmlFor="email">{lang.t('signIn.email')}</label>
@@ -1,7 +1,6 @@
import React from 'react';
import Button from 'coral-ui/components/Button';
import FormField from './FormField';
import FormCSRFField from 'coral-plugin-csrf/FormCSRFField';
import Alert from './Alert';
import Spinner from 'coral-ui/components/Spinner';
import styles from './styles.css';
@@ -28,9 +27,6 @@ const SignInContent = ({handleChange, formData, ...props}) => (
</div>
{ props.auth.error && <Alert>{props.auth.error}</Alert> }
<form onSubmit={props.handleSignIn}>
<FormCSRFField
csrfToken={props.csrfToken}
/>
<FormField
id="email"
type="email"
@@ -1,6 +1,5 @@
import React from 'react';
import FormField from './FormField';
import FormCSRFField from 'coral-plugin-csrf/FormCSRFField';
import Alert from './Alert';
import Button from 'coral-ui/components/Button';
import Spinner from 'coral-ui/components/Spinner';
@@ -29,9 +28,6 @@ const SignUpContent = ({handleChange, formData, ...props}) => (
</div>
{ props.auth.error && <Alert>{props.auth.error}</Alert> }
<form onSubmit={props.handleSignUp}>
<FormCSRFField
csrfToken={props.csrfToken}
/>
<FormField
id="email"
type="email"
@@ -28,8 +28,7 @@ class SignInContainer extends Component {
email: '',
displayName: '',
password: '',
confirmPassword: '',
_csrf: ''
confirmPassword: ''
},
errors: {},
showErrors: false
@@ -122,7 +121,6 @@ class SignInContainer extends Component {
handleSignIn(e) {
e.preventDefault();
this.state.formData._csrf = this.props.csrfToken;
this.props.fetchSignIn(this.state.formData);
}
@@ -131,7 +129,7 @@ class SignInContainer extends Component {
}
render() {
const {auth, showSignInDialog, noButton, offset, csrfToken} = this.props;
const {auth, showSignInDialog, noButton, offset, _csrf} = this.props;
return (
<div>
{!noButton && <Button id='coralSignInButton' onClick={showSignInDialog} full>
@@ -141,7 +139,7 @@ class SignInContainer extends Component {
open={auth.showSignInDialog}
view={auth.view}
offset={offset}
csrfToken={csrfToken}
_csrf={_csrf}
{...this}
{...this.state}
{...this.props}
-2
View File
@@ -17,11 +17,9 @@ const parseForm = bodyParser.urlencoded({extended: false});
*/
router.get('/', csrfProtection, (req, res, next) => {
console.log('DEBUT WHAT IS GOING ?', req.user);
if (req.user) {
return next();
}
console.log('it has the user but what the hek?');
// When there is no user on the request, then just send back the CSRF token.
res.json({csrfToken: req.csrfToken()});