UI5 application security advice

Question

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?

Does this answer your question? [Why is inline JavaScript security bad?](https://stackoverflow.com/questions/48672542/why-is-inline-javascript-security-bad) — Boghyon Hoffmann, Oct 17 '20 at 13:43
In short; removing inline script allows us to enable strict [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). — Boghyon Hoffmann, Oct 17 '20 at 13:49
@BoghyonHoffmann, thanks. Do I understand it correctly that even one tiny inline script within `` will disable the CSP? — Mike, Oct 17 '20 at 13:53
@BoghyonHoffmann, do I need to enabled CSP via `` in the HTML page or just send appropriate headers by the server? — Mike, Oct 17 '20 at 14:01
About ``: Yes, having the `Content-Security-Policy` header alone will skip executing **any** inline scripts, unless you add the `unsafe-inline` policy explicitly. You can add `` in `index.html` for a demo, but AFAIK the recommended way is to add the policy in the header by the server. — Boghyon Hoffmann, Oct 17 '20 at 14:04

Mike · Accepted Answer · 2020-10-17T14:24:59.303

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:

UI5 application security advice

1 Answers1