sanitize preview when handling secret parameters

CHANGELOG.rst

@@ -6,6 +6,10 @@ in development
 
 Changed
 ~~~~~~~
+* Re-introduced preview sanitization for secrets. #1005
+
+  Contributed by @fdrab
+
 * Updated various dependencies (security). #1009, #1020
 
   Contributed by @enykeev

apps/st2-actions/actions-details.component.js

@@ -17,6 +17,7 @@ import React from 'react';
 import { PropTypes } from 'prop-types';
 import { connect } from 'react-redux';
 import store from './store';
+import _ from 'lodash';
 
 import api from '@stackstorm/module-api';
 import notification from '@stackstorm/module-notification';
@@ -270,6 +271,23 @@ export default class ActionsDetails extends React.Component {
     this.setState({ runPreview });
   }
 
+  sanitizePreview(code) {
+    return _.mapValues(code, (value, key) => {
+      if (value && this.props.action.parameters[key] && this.props.action.parameters[key].secret) {
+        switch (this.props.action.parameters[key].type) {
+          case "object":
+            return `{${'*'.repeat(Math.max(0, JSON.stringify(value).length -2))}}`;
+          case "array":
+            return `[${'*'.repeat(Math.max(0, JSON.stringify(value).length -2))}]`;
+          default:
+            return '*'.repeat(value.length);
+        }
+      }
+
+      return value;
+    });
+  }
+
   handleToggleExecution(id) {
     this.setState({
       executionsVisible: {
@@ -477,7 +495,7 @@ export default class ActionsDetails extends React.Component {
                 </Link>
               ) : null }
             </DetailsToolbar>
-            { this.state.runPreview && <Highlight key="preview" well data-test="action_code" code={this.state.runValue} /> }
+            { this.state.runPreview && <Highlight key="preview" well data-test="action_code" code={this.sanitizePreview(this.state.runValue)} /> }
             <DetailsPanel key="panel" data-test="action_parameters">
               <DetailsPanelBody>
                 <form>