User input sanitization
  • 04 Jan 2023
  • 2 Minutes to read
  • Contributors
  • Dark
    Light

User input sanitization

  • Dark
    Light

Article summary

Rule of thumb

Always leave the SigSlo parameter Sanitize Value at its default value true or use Hives encodeHtml() when displaying user text input in the configurator!

SigSlo parameter Sanitize Value

To prevent Cross-Site Scripting (XSS) attacks we've introduced a new paramter Sanitize Value for a wide range of SigSlo slots like Button.setValue, Label.setValue, DataView.setEntries etc.

This parameter comes with a default value of true which ensures that HTML code which is given to the slot is not rendered as such but only shown as raw text.

Imaginary XSS attack scenario

  • Imagine a configurator where the user can enter some text which is then shown in a label.
    E.g. a custom name for his configuration.
  • This configuration name is saved to a component CfgnName via the following SigSlos:
    1. CfgnNameTxtbox.ValueChanged -> CfgnName.setValue(CfgnNameTxtBox.Value)
    2. CfgnName.ValueChanged -> CfgnNameLbl.setValue(CfgnName.Value, false)
      Note that the second parameter Sanitize Value is false here!
  • A user can now enter HTML in the CfgnNameTxtbox which is saved in the CfgnName component and in turn rendered to the CfgnNameLbl via its setValue slot. This HTML code can potentially include JavaScript that is executed on rendering.
  • An evil user could do the following:
    • Create a new configuration in the published & embedded configurator.
    • Enter some HTML in the CfgnNameTxtbox which renders an unsuspiciously looking name but also executes some JavaScript. The JavaScript could add a dialog to the configurator that asks users for credit card information before checkout and sends it to the evil user.
    • This HTML is saved in the CfgnName component by the SigSlos shown above.
    • The evil user can now send a copy link to this configuration to anyone, promising a fake discount of 80% to anyone who buys a product via this link.
    • Everyone who performs checkout via this copy link is presented with the malicious credit card dialog and unknowingly sends his credit card information to the evil user...

Mixed content

If you have to write HTML in Hive which includes text from user input AND shall be rendered as HTML you can use Hives
encodeHtml method to sanitize the user input.

Example

Imagine that the configuration name from the imaginary attack scenario above shall be shown in a "configuration overview" label whose content contains complex HTML to allow some fancy styling via custom CSS:

/* Component "CfgnOverview" */
"""
<div class="CfgnOverview">
  <div class="CfgnOverview__name">{=CfgnName}</div>
  <div class="CfgnOverview__text">{=CfgnOverviewText}</div>
  <div class="CfgnOverview__price">{=CfgnPrice.toText("€ 0.00")}</div>
</div>
"""
/* SigSlos */
CfgnOverview.ValueChanged -> CfgnOverviewLabel.setValue(CfgnOverview.Value, false)

You can't set the Sanitize Value parameter to true here since that would destroy the beautiful HTML rendering that you actually require here, which leads to this code being open to XSS attacks.

Solution: Encode the user input via Hives encodeHtml method when embedding it in the HTML code:

/* Component "CfgnOverview" */
"""
<div class="CfgnOverview">
  <div class="CfgnOverview__name">{=CfgnName.encodeHtml()}</div>
  <div class="CfgnOverview__text">{=CfgnOverviewText}</div>
  <div class="CfgnOverview__price">{=CfgnPrice.toText("€ 0.00")}</div>
</div>
"""

Was this article helpful?