Cross-Site Scripting: SAPUI5 Control

Sending unvalidated data to a web browser can result in the browser executing malicious code.

Cross-site scripting (XSS) vulnerabilities occur when:

1. Data enters a web application through an untrusted source. In SAPUI5, you can create custom controls by extending others. Because these controls are intended for generic use, the developer should expect that user-controlled data is passed to one of its attributes.


2. The data is included in dynamic content that is sent to a web user without validation. In the case of an SAPUI5 control, malicious content is rendered as part of the control.

The malicious content in an SAPUI5 control takes the form of a JavaScript segment, or any other type of code that the browser executes. As SAPUI5 controls are supposed to be generically re-used over and over, an instance of an application might not directly pass malicious data to the control, but this should be treated the same as a standard DOM-based XSS weakness. A trivial change to the application code could lead to malicious information being passed. The only exception is when the control dynamically generates HTML unsafely, such as the sap.ui.core.HTML control's content property.

Example 1: Consider the custom control:

sap.ui.define([
'sap/ui/core/Control'
], function (Control) {
return Control.extend('CustomControl', {
    metadata: {
        properties: {
            foo: { type: 'string', defaultValue: '' }
        }
    },
    renderer: {
        render: function (oRm, oControl) {
            oRm.write('<div>' + oControl.getId() + ':' + oControl.getFoo() + '</div>')
        }
    },
    init: function () { }
})
})

The foo attribute may be passed user-controlled data from another part of the application which would be rendered directly to the DOM.

This code example operates correctly if the information passed to the attribute foo contains only standard alphanumeric text. If foo has a value that includes metacharacters or source code, then when this control is rendered, the code is added to the DOM for the browser to execute.