feat: adding feature flags to escape/hide html in markdown (#11340)

* utilizing feature flag for html escapement

* use src alias

* Feature flag to allow hiding of HTML tags

* strips js attr

* better feature flag naming

* simplifying

* Adding comments to new feature flags

* shorter comment, because pylint,

* pedantic change to get black to format a file
This commit is contained in:
Evan Rusackas 2020-10-21 15:07:27 -07:00 committed by GitHub
parent f14cf9d6dc
commit 6fe7b4a202
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 9 deletions

View File

@ -19,23 +19,26 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import htmlParser from 'react-markdown/plugins/html-parser';
import cx from 'classnames'; import cx from 'classnames';
import { t } from '@superset-ui/core'; import { t } from '@superset-ui/core';
import { Logger, LOG_ACTIONS_RENDER_CHART } from 'src/logger/LogUtils'; import { Logger, LOG_ACTIONS_RENDER_CHART } from 'src/logger/LogUtils';
import { MarkdownEditor } from 'src/components/AsyncAceEditor'; import { MarkdownEditor } from 'src/components/AsyncAceEditor';
import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
import DeleteComponentButton from '../DeleteComponentButton'; import DeleteComponentButton from 'src/dashboard/components/DeleteComponentButton';
import DragDroppable from '../dnd/DragDroppable'; import DragDroppable from 'src/dashboard/components/dnd/DragDroppable';
import ResizableContainer from '../resizable/ResizableContainer'; import ResizableContainer from 'src/dashboard/components/resizable/ResizableContainer';
import MarkdownModeDropdown from '../menu/MarkdownModeDropdown'; import MarkdownModeDropdown from 'src/dashboard/components/menu/MarkdownModeDropdown';
import WithPopoverMenu from '../menu/WithPopoverMenu'; import WithPopoverMenu from 'src/dashboard/components/menu/WithPopoverMenu';
import { componentShape } from '../../util/propShapes'; import { componentShape } from 'src/dashboard/util/propShapes';
import { ROW_TYPE, COLUMN_TYPE } from '../../util/componentTypes'; import { ROW_TYPE, COLUMN_TYPE } from 'src/dashboard/util/componentTypes';
import { import {
GRID_MIN_COLUMN_COUNT, GRID_MIN_COLUMN_COUNT,
GRID_MIN_ROW_UNITS, GRID_MIN_ROW_UNITS,
GRID_BASE_UNIT, GRID_BASE_UNIT,
} from '../../util/constants'; } from 'src/dashboard/util/constants';
const propTypes = { const propTypes = {
id: PropTypes.string.isRequired, id: PropTypes.string.isRequired,
@ -84,6 +87,7 @@ function isSafeMarkup(node) {
return true; return true;
} }
class Markdown extends React.PureComponent { class Markdown extends React.PureComponent {
constructor(props) { constructor(props) {
super(props); super(props);
@ -260,8 +264,14 @@ class Markdown extends React.PureComponent {
? MARKDOWN_ERROR_MESSAGE ? MARKDOWN_ERROR_MESSAGE
: this.state.markdownSource || MARKDOWN_PLACE_HOLDER : this.state.markdownSource || MARKDOWN_PLACE_HOLDER
} }
escapeHtml={false} escapeHtml={isFeatureEnabled(FeatureFlag.ESCAPE_MARKDOWN_HTML)}
skipHtml={!isFeatureEnabled(FeatureFlag.DISPLAY_MARKDOWN_HTML)}
allowNode={isSafeMarkup} allowNode={isSafeMarkup}
astPlugins={[
htmlParser({
isValidNode: node => node.type !== 'script',
}),
]}
/> />
); );
} }

View File

@ -28,6 +28,8 @@ export enum FeatureFlag {
SQLLAB_BACKEND_PERSISTENCE = 'SQLLAB_BACKEND_PERSISTENCE', SQLLAB_BACKEND_PERSISTENCE = 'SQLLAB_BACKEND_PERSISTENCE',
THUMBNAILS = 'THUMBNAILS', THUMBNAILS = 'THUMBNAILS',
LISTVIEWS_DEFAULT_CARD_VIEW = 'LISTVIEWS_DEFAULT_CARD_VIEW', LISTVIEWS_DEFAULT_CARD_VIEW = 'LISTVIEWS_DEFAULT_CARD_VIEW',
DISPLAY_MARKDOWN_HTML = 'DISPLAY_MARKDOWN_HTML',
ESCAPE_MARKDOWN_HTML = 'ESCAPE_MARKDOWN_HTML',
} }
export type FeatureFlagMap = { export type FeatureFlagMap = {

View File

@ -313,6 +313,10 @@ DEFAULT_FEATURE_FLAGS: Dict[str, bool] = {
"TAGGING_SYSTEM": False, "TAGGING_SYSTEM": False,
"SQLLAB_BACKEND_PERSISTENCE": False, "SQLLAB_BACKEND_PERSISTENCE": False,
"LISTVIEWS_DEFAULT_CARD_VIEW": False, "LISTVIEWS_DEFAULT_CARD_VIEW": False,
# When True, this flag allows display of HTML tags in Markdown components
"DISPLAY_MARKDOWN_HTML": True,
# When True, this escapes HTML (rather than rendering it) in Markdown components
"ESCAPE_MARKDOWN_HTML": False,
} }
# Set the default view to card/grid view if thumbnail support is enabled. # Set the default view to card/grid view if thumbnail support is enabled.