UI5 application security advice

In the OpenUI5 documentation is written:

Now, we create a new index.js script that will contain the application logic for this tutorial step. We do this to avoid having executable code directly in the HTML file for security reasons. This script will be called by the index.html. We defined it there as a module in a declarative way.

In other words, the official OpenUI5 documentation advices to extract the following code:

<script>
    "use strict";
    sap.ui.getCore().attachInit(function () {
        new sap.m.Shell("", {
            appWidthLimited: false,
            app: new sap.ui.core.ComponentContainer("", {
                name: "webapp",
                height: "100%"
            })
        }).placeAt("content");
    });
</script>

into a separate JS-file:

"use strict";

sap.ui.getCore().attachInit(() => {

    new sap.m.Shell("", {
        app: new sap.ui.core.ComponentContainer("", {
            height: "100%",
            name: "webapp"
        }),
        appWidthLimited: false
    }).placeAt("content");

});

I’m curious to know how exactly extracting the JS-code from the HTML-page into a separate JS-file can contribute to the UI5 application security?

Answer

It looks like there is an extra explanation on it in the UI5-documentation:

It’s strongly recommended that you make your OpenUI5 applications CSP compliant — after all, you want your apps to be secure. The main thing you have to do is to remove all scripts that directly execute code from your HTML pages.

Don’t use directly executable code in your HTML files, because this makes them vulnerable. Instead, enable the ComponentSupport module in the bootstrapping script. Then, declare your desired component in the body via a div tag. This will instantiate the component when the onInit is executed.

More details regarding the Content Security Policy (CSP) and hand-on examples:

Answer

Leave a Reply Cancel reply