Skip to content
Permalink
Browse files Browse the repository at this point in the history
[#2052] Fix stored XSS in Groups
  • Loading branch information
julianguyen committed Nov 19, 2021
1 parent a5e4400 commit df4986f
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 22 deletions.
36 changes: 20 additions & 16 deletions app/views/groups/index.html.erb
Expand Up @@ -48,22 +48,26 @@
<% end %>
<% if @available_groups.any? %>
<div class="title"><%= t('groups.index.available_groups') %></div>
<div class="gridTwo">
<% @available_groups.each do |group| %>
<div class="gridTwoItemBoxLight">
<%= react_component('Story', html_options: html_options, props: {
name: group.name,
link: url_for(group),
actions: {
join: {
name: t('common.actions.join'),
link: group_membership_path(group_id: group.id, id: 'join'),
dataMethod: 'post'
<div class="smallMarginTop">
<div class="title">
<%= t('groups.index.available_groups') %>
</div>
<div class="gridTwo">
<% @available_groups.each do |group| %>
<div class="gridTwoItemBoxLight">
<%= react_component('Story', html_options: html_options, props: {
name: group.name,
link: url_for(group),
actions: {
join: {
name: t('common.actions.join'),
link: group_membership_path(group_id: group.id, id: 'join'),
dataMethod: 'post'
}
}
}
}) %>
</div>
<% end %>
}) %>
</div>
<% end %>
</div>
</div>
<% end %>
4 changes: 3 additions & 1 deletion client/app/components/Avatar/index.jsx
Expand Up @@ -32,7 +32,9 @@ export const Avatar = (props: Props) => {
const height = getHeight(small, large);
return (
<div
className={`avatar ${css.avatar} ${large ? css.large : ''} ${small ? css.small : ''}`}
className={`avatar ${css.avatar} ${large ? css.large : ''} ${
small ? css.small : ''
}`}
>
<LazyLoad height={height} offset={height} once tabIndex={0}>
{src ? (
Expand Down
9 changes: 4 additions & 5 deletions client/app/components/Input/InputTextarea.jsx
@@ -1,14 +1,13 @@
// @flow
import React, { useState, useEffect, useRef } from 'react';
import { sanitize } from 'dompurify';
import ReactDOMServer from 'react-dom/server';
import { init, exec } from 'pell';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLink } from '@fortawesome/free-solid-svg-icons';
import css from './InputTextarea.scss';
import inputCss from './Input.scss';

// TODO (julianguyen): More tests after writing stubs for Pell editor

const handleResult = (type: string) => {
switch (type) {
case 'link': {
Expand Down Expand Up @@ -67,12 +66,12 @@ export function InputTextarea(props: Props) {
const {
id, name, value: propValue, required, hasError, myRef, dark,
} = props;
const [value, setValue] = useState<string>(propValue || '');
const [value, setValue] = useState<string>(sanitize(propValue) || '');
const editorRef = useRef(null);
const editor = useRef(null);

const onChange = (updatedValue: string) => {
setValue(updatedValue);
setValue(sanitize(updatedValue));
};

const onBlur = () => {
Expand All @@ -95,7 +94,7 @@ export function InputTextarea(props: Props) {

const text = (e.originalEvent || e).clipboardData.getData('text/plain') ?? '';

document.execCommand('insertHTML', false, text);
document.execCommand('insertHTML', false, sanitize(text));
};

useEffect(() => {
Expand Down

0 comments on commit df4986f

Please sign in to comment.