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.

Author: char0n

docker/configurator/variables.js

@@ -71,6 +71,10 @@ const standardVariables = {
     type: "boolean",
     name: "showCommonExtensions"
   },
+  USE_UNSAFE_MARKDOWN: {
+    type: "boolean",
+    name: "useUnsafeMarkdown"
+  },
   OAUTH2_REDIRECT_URL: {
     type: "string",
     name: "oauth2RedirectUrl"

docs/usage/configuration.md

@@ -59,6 +59,7 @@ Parameter name | Docker variable | Description
 <a name="showExtensions"></a>`showExtensions` | `SHOW_EXTENSIONS` | `Boolean=false`. Controls the display of vendor extension (`x-`) fields and values for Operations, Parameters, and Schema.
 <a name="showCommonExtensions"></a>`showCommonExtensions` | `SHOW_COMMON_EXTENSIONS` | `Boolean=false`. Controls the display of extensions (`pattern`, `maxLength`, `minLength`, `maximum`, `minimum`) fields and values for Parameters.
 <a name="tagSorter"></a>`tagsSorter` | _Unavailable_ | `Function=(a => a)`. Apply a sort to the tag list of each API. It can be 'alpha' (sort by paths alphanumerically) or a function (see [Array.prototype.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) to learn how to write a sort function). Two tag name strings are passed to the sorter for each pass. Default is the order determined by Swagger UI.
+<a name="useUnsafeMarkdown"></a>`useUnsafeMarkdown` | `USE_UNSAFE_MARKDOWN` | `Boolean=false`. When enabled, sanitizer will leave `style`, `class` and `data-*` attributes untouched on all HTML Elements declared inside markdown strings. This parameter is **Deprecated** and will be removed in `4.0.0`.
 <a name="onComplete"></a>`onComplete` | _Unavailable_ | `Function=NOOP`. Provides a mechanism to be notified when Swagger UI has finished rendering a newly provided definition.
 
 ##### Network

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")