mirror of
https://github.com/wassname/talk.git
synced 2026-07-10 11:01:41 +08:00
More CSRF in front-end.
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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()),
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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,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}
|
||||
|
||||
@@ -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()});
|
||||
|
||||
Reference in New Issue
Block a user