Cross-site scripting in username edit fielddownforacross/downforacross.com#314

Sign in

# Repo & Issue Metadata
Repo: downforacross.com: Web frontend for downforacross.com -- continuation of stevenhao/crosswordsio
Issue Title: Cross-site scripting in username edit field

Issue Description: I tried to raise this issue privately over Discord a few weeks back, but it seems like it hasn't been addressed yet. Since both the impact and likelihood of exploitation are quite low, it seems safe to bring it up here in case someone feels like fixing on it.

Basically, this function is technically not correct:
https://github.com/downforacross/downforacross.com/blob/56c56864194c6cb18423408aa79d4e3f8f3a9d43/src/components/common/EditableSpan.js#L68-L73
Here's a [proof of concept](https://downforacross.brown.ee/) that exploits this bug. There's user interaction required, but some of it is to avoid the popup blocker.



**Summaries of links found in the content:**

https://downforacross.brown.ee:

The page contains a function in the EditableSpan.js file that is technically incorrect. The user has provided a proof of concept that exploits this bug. The bug requires user interaction, but some of it is to avoid the popup blocker.

You have previously changed these files:
<changed_file file_path="src/utils/sanitizeInput.js">
--- 
+++ 
@@ -0,0 +1,3 @@
+export function sanitizeInput(input) {
+  return input.replace(/<\/?[^>]+(>|$)/g, "");
+}
</changed_file>

Relevant files in this PR:

<relevant_file file_path="src/utils/sanitizeInput.js">
export function sanitizeInput(input) {
  return input.replace(/<\/?[^>]+(>|$)/g, "");
}

</relevant_file>

<section id="A">
import './css/editableSpan.css';
import React, {PureComponent} from 'react';
import _ from 'lodash';
import Caret from '../../lib/caret';

export default class EditableSpan extends PureComponent {
  constructor() {
    super();
    this.span = React.createRef();
    this.prevPosition = 0;
    this.focused = false;
  }

  componentDidMount() {
    this.text = this.displayValue;
    this.mounted = true;
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  getSnapshotBeforeUpdate() {
    return {
      start: this.caret.startPosition,
      focused: this.focused,
    };
  }

</section id="A">
<section id="B">
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.key_ !== this.props.key_ || !this.focused) {
      this.text = this.displayValue;
      if (snapshot.start !== undefined && snapshot.start !== this.caret.startPosition) {
        this.caret.startPosition = snapshot.start;
      }
      if (snapshot.focused) this.focus();
      // eslint-disable-next-line react/no-did-update-set-state
      this.setState({caret: this.text.length});
    }
  }

  focus() {
    this.span.current && this.span.current.focus();
  }

</section id="B">
<section id="C">
  get displayValue() {
    const {value = '(blank)'} = this.props;
    let result = value;
    const nbsp = String.fromCharCode('160');
    while (result.indexOf(' ') !== -1) {
      result = result.replace(' ', nbsp);
    }
    return result;
  }

  get text() {
    if (this.props.hidden) return '';
    if (!this.span.current) return '';
    let result = this.span.current.textContent;
    const nbsp = String.fromCharCode('160');
    while (result.indexOf(nbsp) !== -1) {
      result = result.replace(nbsp, ' ');
    }
    while (result.startsWith(' ')) result = result.substring(1);
    return result;
  }

</section id="C">
<section id="D">
  set text(val) {
    if (this.props.hidden) return;
    if (this.text === val) return;
    // set text while retaining cursor position
    this.span.current.innerHTML = val;
  }

  handleFocus = () => {
    this.focused = true;
  };

  handleBlur = () => {
    this.focused = false;
    this.props.onBlur && this.props.onBlur();
  };

  get caret() {
    if (!this.focused) return new Caret();
    return new Caret(this.span.current && this.span.current.childNodes[0]);
  }

</section id="D">
<section id="E">
  handleKeyDownMobile = (key) => {
    const {caret} = this.state;
    let newCaret = caret;
    if (key === '{enter}') {
      this.props.onPressEnter && this.props.onPressEnter();
      return;
    }
    if (key === '{del}') {
      this.text = this.text.substring(0, caret - 1) + this.text.substring(caret);
      newCaret = caret - 1;
    } else {
      this.text = this.text.substring(0, caret) + key + this.text.substring(caret);
      newCaret = caret + 1;
    }
    this.props.onChange(this.text);
    this.setState({caret: newCaret});
  };

</section id="E">
<section id="F">
  handleKeyDown = (e) => {
    if (e.key === 'Tab') {
      return;
    }
    e.stopPropagation();
    if (e.key === 'Enter' || e.key === 'Escape') {
      this.props.onChange(this.text);
      e.preventDefault();
      setTimeout(() => {
        this.props.onUnfocus && this.props.onUnfocus();
      }, 100);
    }
  };

  handleKeyUp = _.debounce(() => {
    this.props.onChange(this.text);
  }, 500);

</section id="F">
<section id="G">
  render() {
    const {hidden, style, containerStyle} = this.props;
    if (hidden) return null;

    return (
      <div
        style={{
          display: 'inline-block',
          border: '1px solid #DDDDDD',
          position: 'relative',
          ...containerStyle,
        }}
      >
        <div
          style={style}
          className={`editable-span ${this.props.className || ''}`}
          ref={this.span}
          contentEditable={this.props.mobile ? undefined : true}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
          onKeyDown={this.handleKeyDown}
          onKeyUp={this.handleKeyUp}
        />
      </div>
    );
  }
}
</section id="G">

# Request
• Import the `sanitizeInput` function at the top of the `EditableSpan.js` file.
```javascript
import { sanitizeInput } from '../../utils/sanitizeInput';
```
• Modify the setter method for `text` to use the `sanitizeInput` function before setting the `innerHTML` of the span. This ensures that any user input is sanitized to prevent XSS attacks.
• Change the direct assignment in line 72 to use the sanitized value:
```javascript
this.span.current.innerHTML = sanitizeInput(val);
```
• This modification ensures that the text property setter sanitizes the input, thus mitigating the risk of XSS vulnerabilities associated with directly setting `innerHTML` with user input.

SUCCESS
Here are the new code sections:

The following changes have been applied:
```diff
--- 
+++ 
@@ -2,6 +2,7 @@
 import React, {PureComponent} from 'react';
 import _ from 'lodash';
 import Caret from '../../lib/caret';
+import { sanitizeInput } from '../../utils/sanitizeInput';
 
 export default class EditableSpan extends PureComponent {
   constructor() {

```
Here are the new code sections:




<section id="A">
import './css/editableSpan.css';
import React, {PureComponent} from 'react';
import _ from 'lodash';
import Caret from '../../lib/caret';
import { sanitizeInput } from '../../utils/sanitizeInput';

</section id="A">
<section id="B">
export default class EditableSpan extends PureComponent {
  constructor() {
    super();
    this.span = React.createRef();
    this.prevPosition = 0;
    this.focused = false;
  }

  componentDidMount() {
    this.text = this.displayValue;
    this.mounted = true;
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  getSnapshotBeforeUpdate() {
    return {
      start: this.caret.startPosition,
      focused: this.focused,
    };
  }

</section id="B">
<section id="C">
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.key_ !== this.props.key_ || !this.focused) {
      this.text = this.displayValue;
      if (snapshot.start !== undefined && snapshot.start !== this.caret.startPosition) {
        this.caret.startPosition = snapshot.start;
      }
      if (snapshot.focused) this.focus();
      // eslint-disable-next-line react/no-did-update-set-state
      this.setState({caret: this.text.length});
    }
  }

  focus() {
    this.span.current && this.span.current.focus();
  }

</section id="C">
<section id="D">
  get displayValue() {
    const {value = '(blank)'} = this.props;
    let result = value;
    const nbsp = String.fromCharCode('160');
    while (result.indexOf(' ') !== -1) {
      result = result.replace(' ', nbsp);
    }
    return result;
  }

  get text() {
    if (this.props.hidden) return '';
    if (!this.span.current) return '';
    let result = this.span.current.textContent;
    const nbsp = String.fromCharCode('160');
    while (result.indexOf(nbsp) !== -1) {
      result = result.replace(nbsp, ' ');
    }
    while (result.startsWith(' ')) result = result.substring(1);
    return result;
  }

</section id="D">
<section id="E">
  set text(val) {
    if (this.props.hidden) return;
    if (this.text === val) return;
    // set text while retaining cursor position
    this.span.current.innerHTML = val;
  }

  handleFocus = () => {
    this.focused = true;
  };

  handleBlur = () => {
    this.focused = false;
    this.props.onBlur && this.props.onBlur();
  };

  get caret() {
    if (!this.focused) return new Caret();
    return new Caret(this.span.current && this.span.current.childNodes[0]);
  }

</section id="E">
<section id="F">
  handleKeyDownMobile = (key) => {
    const {caret} = this.state;
    let newCaret = caret;
    if (key === '{enter}') {
      this.props.onPressEnter && this.props.onPressEnter();
      return;
    }
    if (key === '{del}') {
      this.text = this.text.substring(0, caret - 1) + this.text.substring(caret);
      newCaret = caret - 1;
    } else {
      this.text = this.text.substring(0, caret) + key + this.text.substring(caret);
      newCaret = caret + 1;
    }
    this.props.onChange(this.text);
    this.setState({caret: newCaret});
  };

</section id="F">
<section id="G">
  handleKeyDown = (e) => {
    if (e.key === 'Tab') {
      return;
    }
    e.stopPropagation();
    if (e.key === 'Enter' || e.key === 'Escape') {
      this.props.onChange(this.text);
      e.preventDefault();
      setTimeout(() => {
        this.props.onUnfocus && this.props.onUnfocus();
      }, 100);
    }
  };

  handleKeyUp = _.debounce(() => {
    this.props.onChange(this.text);
  }, 500);

</section id="G">
<section id="H">
  render() {
    const {hidden, style, containerStyle} = this.props;
    if (hidden) return null;

    return (
      <div
        style={{
          display: 'inline-block',
          border: '1px solid #DDDDDD',
          position: 'relative',
          ...containerStyle,
        }}
      >
        <div
          style={style}
          className={`editable-span ${this.props.className || ''}`}
          ref={this.span}
          contentEditable={this.props.mobile ? undefined : true}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
          onKeyDown={this.handleKeyDown}
          onKeyUp={this.handleKeyUp}
        />
      </div>
    );
  }
}
</section id="H">

You can continue to make changes to the code sections and call the `search_and_replace` function again.

ERROR
No changes were made due to the following error:

The old_code in the 0th replace_to_make does not appear to be present in section D. The old_code contains:
```
this.span.current.innerHTML = val;
```
But section D has code:
```
  get displayValue() {
    const {value = '(blank)'} = this.props;
    let result = value;
    const nbsp = String.fromCharCode('160');
    while (result.indexOf(' ') !== -1) {
      result = result.replace(' ', nbsp);
    }
    return result;
  }

  get text() {
    if (this.props.hidden) return '';
    if (!this.span.current) return '';
    let result = this.span.current.textContent;
    const nbsp = String.fromCharCode('160');
    while (result.indexOf(nbsp) !== -1) {
      result = result.replace(nbsp, ' ');
    }
    while (result.startsWith(' ')) result = result.substring(1);
    return result;
  }

```

Did you mean one of the following sections?
<section id="E">
  set text(val) {
    if (this.props.hidden) return;
    if (this.text === val) return;
    // set text while retaining cursor position
    this.span.current.innerHTML = val;
  }

  handleFocus = () => {
    this.focused = true;
  };

  handleBlur = () => {
    this.focused = false;
    this.props.onBlur && this.props.onBlur();
  };

  get caret() {
    if (!this.focused) return new Caret();
    return new Caret(this.span.current && this.span.current.childNodes[0]);
  }

</section>
```

SUCCESS
Here are the new code sections:

The following changes have been applied:
```diff
--- 
+++ 
@@ -70,7 +70,7 @@
     if (this.props.hidden) return;
     if (this.text === val) return;
     // set text while retaining cursor position
-    this.span.current.innerHTML = val;
+    this.span.current.innerHTML = sanitizeInput(val);
   }
 
   handleFocus = () => {

```
Here are the new code sections:




<section id="A">
import './css/editableSpan.css';
import React, {PureComponent} from 'react';
import _ from 'lodash';
import Caret from '../../lib/caret';
import { sanitizeInput } from '../../utils/sanitizeInput';

</section id="A">
<section id="B">
export default class EditableSpan extends PureComponent {
  constructor() {
    super();
    this.span = React.createRef();
    this.prevPosition = 0;
    this.focused = false;
  }

  componentDidMount() {
    this.text = this.displayValue;
    this.mounted = true;
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  getSnapshotBeforeUpdate() {
    return {
      start: this.caret.startPosition,
      focused: this.focused,
    };
  }

</section id="B">
<section id="C">
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.key_ !== this.props.key_ || !this.focused) {
      this.text = this.displayValue;
      if (snapshot.start !== undefined && snapshot.start !== this.caret.startPosition) {
        this.caret.startPosition = snapshot.start;
      }
      if (snapshot.focused) this.focus();
      // eslint-disable-next-line react/no-did-update-set-state
      this.setState({caret: this.text.length});
    }
  }

  focus() {
    this.span.current && this.span.current.focus();
  }

</section id="C">
<section id="D">
  get displayValue() {
    const {value = '(blank)'} = this.props;
    let result = value;
    const nbsp = String.fromCharCode('160');
    while (result.indexOf(' ') !== -1) {
      result = result.replace(' ', nbsp);
    }
    return result;
  }

  get text() {
    if (this.props.hidden) return '';
    if (!this.span.current) return '';
    let result = this.span.current.textContent;
    const nbsp = String.fromCharCode('160');
    while (result.indexOf(nbsp) !== -1) {
      result = result.replace(nbsp, ' ');
    }
    while (result.startsWith(' ')) result = result.substring(1);
    return result;
  }

</section id="D">
<section id="E">
  set text(val) {
    if (this.props.hidden) return;
    if (this.text === val) return;
    // set text while retaining cursor position
    this.span.current.innerHTML = sanitizeInput(val);
  }

  handleFocus = () => {
    this.focused = true;
  };

  handleBlur = () => {
    this.focused = false;
    this.props.onBlur && this.props.onBlur();
  };

  get caret() {
    if (!this.focused) return new Caret();
    return new Caret(this.span.current && this.span.current.childNodes[0]);
  }

</section id="E">
<section id="F">
  handleKeyDownMobile = (key) => {
    const {caret} = this.state;
    let newCaret = caret;
    if (key === '{enter}') {
      this.props.onPressEnter && this.props.onPressEnter();
      return;
    }
    if (key === '{del}') {
      this.text = this.text.substring(0, caret - 1) + this.text.substring(caret);
      newCaret = caret - 1;
    } else {
      this.text = this.text.substring(0, caret) + key + this.text.substring(caret);
      newCaret = caret + 1;
    }
    this.props.onChange(this.text);
    this.setState({caret: newCaret});
  };

</section id="F">
<section id="G">
  handleKeyDown = (e) => {
    if (e.key === 'Tab') {
      return;
    }
    e.stopPropagation();
    if (e.key === 'Enter' || e.key === 'Escape') {
      this.props.onChange(this.text);
      e.preventDefault();
      setTimeout(() => {
        this.props.onUnfocus && this.props.onUnfocus();
      }, 100);
    }
  };

  handleKeyUp = _.debounce(() => {
    this.props.onChange(this.text);
  }, 500);

</section id="G">
<section id="H">
  render() {
    const {hidden, style, containerStyle} = this.props;
    if (hidden) return null;

    return (
      <div
        style={{
          display: 'inline-block',
          border: '1px solid #DDDDDD',
          position: 'relative',
          ...containerStyle,
        }}
      >
        <div
          style={style}
          className={`editable-span ${this.props.className || ''}`}
          ref={this.span}
          contentEditable={this.props.mobile ? undefined : true}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
          onKeyDown={this.handleKeyDown}
          onKeyUp={this.handleKeyUp}
        />
      </div>
    );
  }
}
</section id="H">

You can continue to make changes to the code sections and call the `search_and_replace` function again.