fix(Markdown): render markdown in more secure way

This commit changes markdown sanitization behaviour in following way:

class, style and data-* attributes are removed by default. These attributes
open possible vulnerability vectors to attackers.

The original behavior of sanitizer (before this commit) can be enabled by *useUnsafeMarkdown* configuration option.
Use this configuration option with caution and only in cases when you know
what you're doing.

src/core/components/array-model.jsx

@@ -25,7 +25,7 @@ export default class ArrayModel extends Component {
     let title = schema.get("title") || displayName || name
     let properties = schema.filter( ( v, key) => ["type", "items", "description", "$$ref"].indexOf(key) === -1 )
 
-    const Markdown = getComponent("Markdown")
+    const Markdown = getComponent("Markdown", true)
     const ModelCollapse = getComponent("ModelCollapse")
     const Model = getComponent("Model")
     const Property = getComponent("Property")

src/core/components/auth/api-key-auth.jsx

@@ -44,7 +44,7 @@ export default class ApiKeyAuth extends React.Component {
     const Row = getComponent("Row")
     const Col = getComponent("Col")
     const AuthError = getComponent("authError")
-    const Markdown = getComponent( "Markdown" )
+    const Markdown = getComponent("Markdown", true)
     const JumpToPath = getComponent("JumpToPath", true)
     let value = this.getValue()
     let errors = errSelectors.allErrors().filter( err => err.get("authId") === name)

src/core/components/auth/basic-auth.jsx

@@ -51,7 +51,7 @@ export default class BasicAuth extends React.Component {
     const Col = getComponent("Col")
     const AuthError = getComponent("authError")
     const JumpToPath = getComponent("JumpToPath", true)
-    const Markdown = getComponent( "Markdown" )
+    const Markdown = getComponent("Markdown", true)
     let username = this.getValue().username
     let errors = errSelectors.allErrors().filter( err => err.get("authId") === name)
 

src/core/components/auth/oauth2.jsx

@@ -109,7 +109,7 @@ export default class Oauth2 extends React.Component {
     const Button = getComponent("Button")
     const AuthError = getComponent("authError")
     const JumpToPath = getComponent("JumpToPath", true)
-    const Markdown = getComponent( "Markdown" )
+    const Markdown = getComponent("Markdown", true)
     const InitializedInput = getComponent("InitializedInput")
 
     const { isOAS3 } = specSelectors

src/core/components/example.jsx

@@ -10,7 +10,7 @@ import { stringify } from "core/utils"
 export default function Example(props) {
   const { example, showValue, getComponent } = props
 
-  const Markdown = getComponent("Markdown")
+  const Markdown = getComponent("Markdown", true)
   const HighlightCode = getComponent("highlightCode")
 
   if(!example) return null

src/core/components/headers.jsx

@@ -14,7 +14,7 @@ export default class Headers extends React.Component {
     let { headers, getComponent } = this.props
 
     const Property = getComponent("Property")
-    const Markdown = getComponent("Markdown")
+    const Markdown = getComponent("Markdown", true)
 
     if ( !headers || !headers.size )
       return null
@@ -36,7 +36,7 @@ export default class Headers extends React.Component {
               if(!Im.Map.isMap(header)) {
                 return null
               }
-              
+
               const description = header.get("description")
               const type = header.getIn(["schema"]) ? header.getIn(["schema", "type"]) : header.getIn(["type"])
               const schemaExample = header.getIn(["schema", "example"])

src/core/components/info.jsx

@@ -61,7 +61,7 @@ class License extends React.Component {
     let { license, getComponent } = this.props
 
     const Link = getComponent("Link")
-  
+
     let name = license.get("name") || "License"
     let url = license.get("url")
 
@@ -82,7 +82,7 @@ export class InfoUrl extends React.PureComponent {
     getComponent: PropTypes.func.isRequired
   }
 
-  
+
   render() {
     const { url, getComponent } = this.props
 
@@ -112,7 +112,7 @@ export default class Info extends React.Component {
     let license = info.get("license")
     const { url:externalDocsUrl, description:externalDocsDescription } = (externalDocs || fromJS({})).toJS()
 
-    const Markdown = getComponent("Markdown")
+    const Markdown = getComponent("Markdown", true)
     const Link = getComponent("Link")
     const VersionStamp = getComponent("VersionStamp")
     const InfoUrl = getComponent("InfoUrl")

src/core/components/object-model.jsx

@@ -40,7 +40,7 @@ export default class ObjectModel extends Component {
     let requiredProperties = schema.get("required")
 
     const JumpToPath = getComponent("JumpToPath", true)
-    const Markdown = getComponent("Markdown")
+    const Markdown = getComponent("Markdown", true)
     const Model = getComponent("Model")
     const ModelCollapse = getComponent("ModelCollapse")
 

src/core/components/operation-tag.jsx

@@ -44,7 +44,7 @@ export default class OperationTag extends React.Component {
     const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
 
     const Collapse = getComponent("Collapse")
-    const Markdown = getComponent("Markdown")
+    const Markdown = getComponent("Markdown", true)
     const DeepLink = getComponent("DeepLink")
     const Link = getComponent("Link")
 

src/core/components/operation.jsx

@@ -93,7 +93,7 @@ export default class Operation extends PureComponent {
     const Execute = getComponent( "execute" )
     const Clear = getComponent( "clear" )
     const Collapse = getComponent( "Collapse" )
-    const Markdown = getComponent( "Markdown" )
+    const Markdown = getComponent("Markdown", true)
     const Schemes = getComponent( "schemes" )
     const OperationServers = getComponent( "OperationServers" )
     const OperationExt = getComponent( "OperationExt" )

src/core/components/parameter-row.jsx

@@ -102,7 +102,7 @@ export default class ParameterRow extends Component {
       .get("content", Map())
       .keySeq()
       .first()
-    
+
     // getSampleSchema could return null
     const generatedSampleValue = schema ? getSampleSchema(schema.toJS(), parameterMediaType, {
       includeWriteOnly: true
@@ -144,7 +144,7 @@ export default class ParameterRow extends Component {
         this.onChangeWrapper(initialValue)
       } else if(
         schema && schema.get("type") === "object"
-        && generatedSampleValue 
+        && generatedSampleValue
         && !paramWithMeta.get("examples")
       ) {
         // Object parameters get special treatment.. if the user doesn't set any
@@ -202,7 +202,7 @@ export default class ParameterRow extends Component {
       />
 
     const ModelExample = getComponent("modelExample")
-    const Markdown = getComponent("Markdown")
+    const Markdown = getComponent("Markdown", true)
     const ParameterExt = getComponent("ParameterExt")
     const ParameterIncludeEmpty = getComponent("ParameterIncludeEmpty")
     const ExamplesSelectValueRetainer = getComponent("ExamplesSelectValueRetainer")

src/core/components/primitive-model.jsx

@@ -34,7 +34,7 @@ export default class Primitive extends Component {
     let properties = schema
       .filter( ( v, key) => ["enum", "type", "format", "description", "$$ref"].indexOf(key) === -1 )
       .filterNot( (v, key) => extensions.has(key) )
-    const Markdown = getComponent("Markdown")
+    const Markdown = getComponent("Markdown", true)
     const EnumModel = getComponent("EnumModel")
     const Property = getComponent("Property")
 

src/core/components/providers/markdown.jsx

@@ -16,7 +16,7 @@ DomPurify.addHook("beforeSanitizeElements", function (current, ) {
   return current
 })
 
-function Markdown({ source, className = "" }) {
+function Markdown({ source, className = "", getConfigs }) {
   if (typeof source !== "string") {
     return null
   }
@@ -30,8 +30,9 @@ function Markdown({ source, className = "" }) {
 
   md.core.ruler.disable(["replacements", "smartquotes"])
 
+  const { useUnsafeMarkdown } = getConfigs()
   const html = md.render(source)
-  const sanitized = sanitizer(html)
+  const sanitized = sanitizer(html, { useUnsafeMarkdown })
 
   if (!source || !html || !sanitized) {
     return null
@@ -44,14 +45,30 @@ function Markdown({ source, className = "" }) {
 
 Markdown.propTypes = {
   source: PropTypes.string.isRequired,
-  className: PropTypes.string
+  className: PropTypes.string,
+  getConfigs: PropTypes.func,
+}
+
+Markdown.defaultProps = {
+  getConfigs: () => ({ useUnsafeMarkdown: false }),
 }
 
 export default Markdown
 
-export function sanitizer(str) {
+export function sanitizer(str, { useUnsafeMarkdown = false } = {}) {
+  const ALLOW_DATA_ATTR = useUnsafeMarkdown
+  const FORBID_ATTR = useUnsafeMarkdown ? [] : ["style", "class"]
+
+  if (useUnsafeMarkdown && !sanitizer.hasWarnedAboutDeprecation) {
+    console.warn(`useUnsafeMarkdown display configuration parameter is deprecated since >3.26.0 and will be removed in v4.0.0.`)
+    sanitizer.hasWarnedAboutDeprecation = true
+  }
+
   return DomPurify.sanitize(str, {
     ADD_ATTR: ["target"],
     FORBID_TAGS: ["style"],
+    ALLOW_DATA_ATTR,
+    FORBID_ATTR,
   })
 }
+sanitizer.hasWarnedAboutDeprecation = false

src/core/components/response.jsx

@@ -93,7 +93,7 @@ export default class Response extends React.Component {
     const Headers = getComponent("headers")
     const HighlightCode = getComponent("highlightCode")
     const ModelExample = getComponent("modelExample")
-    const Markdown = getComponent( "Markdown" )
+    const Markdown = getComponent("Markdown", true)
     const OperationLink = getComponent("operationLink")
     const ContentType = getComponent("contentType")
     const ExamplesSelect = getComponent("ExamplesSelect")

src/core/plugins/oas3/components/callbacks.jsx

@@ -5,7 +5,7 @@ import { fromJS } from "immutable"
 
 const Callbacks = (props) => {
   let { callbacks, getComponent, specPath } = props
-  // const Markdown = getComponent("Markdown")
+  // const Markdown = getComponent("Markdown", true)
   const OperationContainer = getComponent("OperationContainer", true)
 
   if(!callbacks) {

src/core/plugins/oas3/components/http-auth.jsx

@@ -51,7 +51,7 @@ export default class HttpAuth extends React.Component {
     const Row = getComponent("Row")
     const Col = getComponent("Col")
     const AuthError = getComponent("authError")
-    const Markdown = getComponent( "Markdown" )
+    const Markdown = getComponent("Markdown", true)
     const JumpToPath = getComponent("JumpToPath", true)
 
     const scheme = (schema.get("scheme") || "").toLowerCase()

src/core/plugins/oas3/components/operation-link.jsx

@@ -6,7 +6,7 @@ class OperationLink extends Component {
   render() {
     const { link, name, getComponent } = this.props
 
-    const Markdown = getComponent("Markdown")
+    const Markdown = getComponent("Markdown", true)
 
     let targetOp = link.get("operationId") || link.get("operationRef")
     let parameters = link.get("parameters") && link.get("parameters").toJS()

src/core/plugins/oas3/components/request-body.jsx

@@ -54,7 +54,7 @@ const RequestBody = ({
     onChange(e.target.files[0])
   }
 
-  const Markdown = getComponent("Markdown")
+  const Markdown = getComponent("Markdown", true)
   const ModelExample = getComponent("modelExample")
   const RequestBodyEditor = getComponent("RequestBodyEditor")
   const HighlightCode = getComponent("highlightCode")

src/core/plugins/oas3/wrap-components/markdown.jsx

@@ -9,14 +9,15 @@ const parser = new Remarkable("commonmark")
 parser.block.ruler.enable(["table"])
 parser.set({ linkTarget: "_blank" })
 
-export const Markdown = ({ source, className = "" }) => {
+export const Markdown = ({ source, className = "", getConfigs }) => {
   if(typeof source !== "string") {
     return null
   }
-  
+
   if ( source ) {
+    const { useUnsafeMarkdown } = getConfigs()
     const html = parser.render(source)
-    const sanitized = sanitizer(html)
+    const sanitized = sanitizer(html, { useUnsafeMarkdown })
 
     let trimmed
 
@@ -38,6 +39,11 @@ export const Markdown = ({ source, className = "" }) => {
 Markdown.propTypes = {
   source: PropTypes.string,
   className: PropTypes.string,
+  getConfigs: PropTypes.func,
+}
+
+Markdown.defaultProps = {
+  getConfigs: () => ({ useUnsafeMarkdown: false }),
 }
 
 export default OAS3ComponentWrapFactory(Markdown)