Skip to content

Latest commit

 

History

History
79 lines (51 loc) · 2.81 KB

Make_Your_App_CSP_Compliant_1f81a09.md

File metadata and controls

79 lines (51 loc) · 2.81 KB
loio
1f81a093a9f3433983dcb2ebe11cd4cd

view on: demo kit nightly build | demo kit latest release

Make Your App CSP Compliant

CSP stands for Content Security Policy and is a security standard to prevent cross-site scripting or other code injection attacks.

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.

Define Initial Components in a Declarative Way

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.

...
<script id="sap-ui-bootstrap"
	src="resources/sap-ui-core.js"
	data-sap-ui-async="true"
	data-sap-ui-on-init="module:sap/ui/core/ComponentSupport">
</script>
<body class="sapUiBody" id="content">
	<div data-sap-ui-component data-name="sap.ui.demo.walkthrough" data-id="container" data-settings='{"id" : "walkthrough"}'></div>
</body>

Separate Scripts From HTML Files in Your Test Folder

Because the HTML files in your test folder do not directly open your application, you can't use the new ComponentSupport feature here. To make them CSP compliant, you need to put the executable script code in a separate file on the same level as the HTML file. You can then refer to this file in your HTML file inside a script tag in the head:

New script file:

window.suite = function() {
	"use strict";

	var oSuite = new parent.jsUnitTestSuite(),
		sContextPath = location.pathname.substring(0, location.pathname.lastIndexOf("/") + 1);

	oSuite.addTestPage(sContextPath + "unit/unitTests.qunit.html");
	oSuite.addTestPage(sContextPath + "integration/opaTests.qunit.html");

	return oSuite;
};

HTML file:

<head>
	...
	<script src="testsuite.qunit.js" data-sap-ui-testsuite></script>
</head>

</html>