CSRF protection.

app.js

@@ -3,6 +3,7 @@ const path = require('path');
 const mongoose = require('mongoose');
 const bodyParser = require('body-parser');
 const expressValidator = require('express-validator');
+const csurf = require('csurf');
 const flash = require('connect-flash');
 const session = require('express-session');
 const passport = require('passport');

package.json

@@ -25,6 +25,7 @@
     "connect-flash": "^0.1.1",
     "connect-mongodb-session": "^2.2.0",
     "core-js": "^2.6.9",
+    "csurf": "^1.10.0",
     "express": "^4.17.1",
     "express-fileupload": "^1.1.5",
     "express-messages": "^1.0.1",

routes/cube_routes.js

@@ -5,6 +5,8 @@ const fs = require('fs');
 const fetch = require('node-fetch');
 const rp = require('request-promise');
 const cheerio = require('cheerio');
+const csurf = require('csurf');
+
 var {
   addAutocard,
   generatePack,
@@ -46,7 +48,8 @@ let Draft = require('../models/draft');
 let CardRating = require('../models/cardrating');
 
 const {
-  ensureAuth
+  ensureAuth,
+  csrfProtection,
 } = require('./middleware');
 
 var token = null;
@@ -202,6 +205,8 @@ function abbreviate(name) {
   return name.length < 20 ? name : name.slice(0, 20) + '…';
 }
 
+router.use(csrfProtection);
+
 // Add Submit POST Route
 router.post('/add', ensureAuth, async (req, res) => {
   if (req.body.name.length < 5) {

routes/dev_routes.js

@@ -7,7 +7,8 @@ const mailer = require("nodemailer");
 const fs = require('fs')
 
 const {
-  ensureAuth
+  ensureAuth,
+  csrfProtection
 } = require('./middleware');
 
 // Bring in models
@@ -16,6 +17,8 @@ let Blog = require('../models/blog')
 
 var adminname = 'Dekkaru';
 
+router.use(csrfProtection);
+
 router.get('/blog', function(req, res) {
   res.redirect('/dev/blog/0');
 });

routes/middleware.js

@@ -1,3 +1,5 @@
+const csurf = require('csurf');
+
 const ensureAuth = (req, res, next) => {
   if (req.isAuthenticated()) {
     return next();
@@ -7,6 +9,12 @@ const ensureAuth = (req, res, next) => {
   }
 }
 
+const csrfProtection = [csurf(), (req, res, next) => {
+  res.locals.csrfToken = req.csrfToken();
+  next();
+}];
+
 module.exports = {
-  ensureAuth
+  ensureAuth,
+  csrfProtection,
 }

routes/users_routes.js

@@ -14,7 +14,8 @@ let Cube = require('../models/cube')
 let Deck = require('../models/deck')
 
 const {
-  ensureAuth
+  ensureAuth,
+  csrfProtection,
 } = require('./middleware');
 
 // For consistency between different forms, validate username through this function.
@@ -31,6 +32,8 @@ function checkUsernameValid(req) {
   return req;
 }
 
+router.use(csrfProtection);
+
 //Lost password form
 router.get('/lostpassword', function(req, res) {
   res.render('user/lostpassword');

src/components/CardModalForm.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 
+import { csrfFetch } from '../util/CSRF';
+
 import CardModal from './CardModal';
 import CardModalContext from './CardModalContext';
 
@@ -115,7 +117,7 @@ class CardModalForm extends Component {
       return;
     }
 
-    let response = await fetch('/cube/api/updatecard/' + document.getElementById('cubeID').value, {
+    let response = await csrfFetch('/cube/api/updatecard/' + document.getElementById('cubeID').value, {
       method: 'POST',
       body: JSON.stringify({ src: card, updated }),
       headers: {

src/components/EditCollapse.js

@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 
 import { Button, Card, CardHeader, Col, Collapse, Container, Form, FormGroup, Input, Label, Row, UncontrolledAlert } from 'reactstrap';
 
+import { CSRFForm } from '../util/CSRF';
+
 import ContentEditable from './ContentEditable';
 
 function clickToolbar(event) {
@@ -133,7 +135,7 @@ class EditCollapse extends Component {
             </Col>
           </Row>
           <div className="collapse editForm">
-            <Form id="changelistForm" method="POST" action={`/cube/edit/${cubeID}`}>
+            <CSRFForm id="changelistForm" method="POST" action={`/cube/edit/${cubeID}`}>
               <Row>
                 <Col>
                   <Label>Changelist:</Label>
@@ -181,7 +183,7 @@ class EditCollapse extends Component {
                   <Button color="danger" onClick={discardAll}>Discard All</Button>
                 </Col>
               </Row>
-            </Form>
+            </CSRFForm>
           </div>
         </Container>
       </Collapse>

src/components/GroupModal.js

@@ -10,6 +10,7 @@ import {
   UncontrolledAlert,
 } from 'reactstrap';
 
+import { csrfFetch } from '../util/CSRF';
 import { fromEntries } from '../util/Util';
 
 import AutocardListItem from './AutocardListItem';
@@ -143,7 +144,7 @@ class GroupModal extends Component {
       tags: tags || undefined,
       addTags, deleteTags,
     };
-    const response = await fetch(`/cube/api/updatecards/${cubeID}`, {
+    const response = await csrfFetch(`/cube/api/updatecards/${cubeID}`, {
       method: 'POST',
       body: JSON.stringify({ selected, updated }),
       headers: {

src/components/ListView.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 
 import { Input } from 'reactstrap';
 
+import { csrfFetch } from '../util/CSRF';
 import { arraysEqual, fromEntries } from '../util/Util';
 
 import DisplayContext from './DisplayContext';
@@ -94,7 +95,7 @@ class ListViewRaw extends Component {
       return;
     }
 
-    fetch(`/cube/api/updatecard/${cubeID}`, {
+    csrfFetch(`/cube/api/updatecard/${cubeID}`, {
       method: 'POST',
       body: JSON.stringify({
         src: card,

src/components/SortCollapse.js

@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 
 import { Button, Col, Collapse, Container, Input, Row, UncontrolledAlert } from 'reactstrap';
 
+import { csrfFetch } from '../util/CSRF';
+
 import SortContext from './SortContext';
 
 class SortCollapseRaw extends Component {
@@ -24,7 +26,7 @@ class SortCollapseRaw extends Component {
   handleSave() {
     const { primary, secondary } = this.props;
 
-    fetch("/cube/api/savesorts/" + $('#cubeID').val(), {
+    csrfFetch("/cube/api/savesorts/" + $('#cubeID').val(), {
       method: "POST",
       body: JSON.stringify({
         sorts: [primary, secondary],

src/cube_playtest.js

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 
 import { Button, Card, CardBody, CardFooter, CardHeader, CardTitle, Col, FormGroup, Input, Label, Row, UncontrolledAlert, UncontrolledCollapse } from 'reactstrap';
 
+import { csrfFetch } from './util/CSRF';
+
 import DynamicFlash from './components/DynamicFlash';
 
 const range = (lo, hi) => Array.from(Array(hi - lo).keys()).map(n => n + lo);
@@ -187,7 +189,7 @@ class CubePlaytest extends Component {
 
   deleteFormat(cube, formatID) {
     console.log(formatID);
-    fetch(`/cube/format/remove/${cube};${formatID}`, {
+    csrfFetch(`/cube/format/remove/${cube};${formatID}`, {
       method: 'DELETE',
     }).then(response => {
       this.addAlert({

src/util/CSRF.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { Form, Input } from 'reactstrap';
+
+const getToken = () => {
+  const meta = document.querySelector('meta[name="csrf-token"]');
+  return meta ? meta.getAttribute('content') : null;
+}
+
+export const csrfFetch = (resource, init) => {
+  init.credentials = init.credentials || 'same-origin';
+  init.headers = {
+    ...init.headers,
+    'CSRF-Token': getToken(),
+  }
+  return fetch(resource, init);
+}
+
+export const CSRFForm = ({ children, ...props }) =>
+  <Form {...props}>
+    <Input type="hidden" name="_csrf" value={getToken()} />
+    {children}
+  </Form>;
+
+export default { csrfFetch };

views/blog/devblog.pug

@@ -9,6 +9,7 @@ block content
       .card(style='padding:10px')
         h5 Create New Blog Post
         form(method='POST', action='/dev/blogpost/')
+          input(type='hidden', name='_csrf', value=csrfToken)
           #form-group
             label Title:
             input.form-control(maxlength='200' name='title', type='text')

views/cube/bulk_upload.pug

@@ -30,6 +30,7 @@ block content
               p.editlist#changelist
         .row
           form#changelistForm(method='POST', action='/cube/edit/'+cube_id)
+            input(type='hidden', name='_csrf', value=csrfToken)
             input(id='addedcardshidden', type='hidden', value=added)
             input(id='titlehidden', type='hidden', name='title', value='Cube Bulk Import - Automatic Post')
             input#changelistFormBody(type='hidden', name='body')

views/cube/cube_blog.pug

@@ -83,6 +83,7 @@ block cube_content
         .modal-dialog.modal-lg(role='document')
           .modal-content
             form#postBlogForm(method='POST', action='/cube/blog/post/'+cube_id)
+              input(type='hidden', name='_csrf', value=csrfToken)
               .modal-header
                 h5#blogEditTitle Edit Blog Post
                 button.close(type='button', data-dismiss='modal', aria-label='Close')

views/cube/cube_deckbuilder.pug

@@ -4,6 +4,7 @@ block cube_toolbar
   link(rel='stylesheet' href='/css/draft.css')
   input#basicsraw(type='hidden', name='basicsraw', value=basics_raw)
   form#submitDeckForm(method='POST', action='/cube/editdeck/'+deckid)
+    input(type='hidden', name='_csrf', value=csrfToken)
     input#deckraw(type='hidden', name='draftraw', value=deck_raw)
 
   #dragelement(style='position:absolute;z-index: 9999;')