Activate Clickjacking-Framing-Protection service

SAP NetWeaver comes with its own solution to prevent clickjacking for its most relevant UI frameworks. For more information about this protection, see the corresponding SAP Notes.

By default, clickjacking protection is disabled. To activate it, you need to insert a value into table HTTP_WHITELIST.

Insert values into table HTTP_WHITELIST

Transaction: SE16

Check if clickjacking protection service is enabled or disabled. It is disabled, if no record with ENTRY_TYPE=30 is in the table, or if the table is empty.

Table name: HTTP_WHITELIST

Execute

Result

By default, no values are in the table and the service is not enabled. For data that needs to be inserted into table HTTP_WHITELIST, see SAP Note 2142551. Creating an entry type with vale 30 activates the whitelist.

Transaction: SE16

Select F5 or click on the new entry icon.

Insert data. See links below for additional information on possible values.

Click save to persist the entry in the table.

Afterwards, the table will contain one record. As the record has value 30 for column ENTRY_TYPE, the clickjacking protection service is enabled.

Activate ICF whitelist service

Adding a record activates the service, but to make apps working, additional configuration steps must be taken. For instance, accessing now a WDA app (e.g. SAML2) will resolve in a HTTP 500 internal server error. This is caused by having the clickjacking protection activated, but not the whitelist service.

To solve the HTTP 500 error, you need to activate the ICF whitelist service.

Transaction SICF_INST
Technical name: UICS_BASIC

Execute. This will activate the ICF node

/sap/public/bc/uics/whitelist

Result

After enabling the service and the ICF node, the above WDA app will open in the browser.

https://vhcalnplci:44300/sap/bc/webdynpro/sap/saml2

Additional information on setting whitelist entries.

 

How to access UI5 model data

Old habits are not easily dying and replaced by best practices and general recommendations. In the early days, when UI5 started to gain traction, people discovered it, tried it out, wrote apps, made them somehow work. Everybody was learning, and things we can do today were not possible or known then. Changes to the documentation, API and recommendations are simply the result of lessons learned.

As UI5 apps are based around a model, its data, representation and manipulation, a lot of questions around UI5 development are about the model: how to access data, change, update or delete it. A good thing of UI5 is that it is following semantic versioning, and code written for UI5 1.1x or 1.2x will still work with latest versions like 1.5x. It doesn’t mean that you, as a developer, should simply copy & paste example code found somewhere.

Example

After loading the model, be it JSON or OData, you may have to access a specific property in you code. What you can find in the Internet is code like:

oData

var oData = this.getView().getModel().oData;
var firstname oModel.getModel().oData[entity].firstname;
var name = oData[entity].name;

JSON

var oData = this.getView().getModel(“device”).oData;
var osname = oModel.oData.os.name;
var osname = this.getView().getModel().getData().os.name;

First line will give you the model data object, 2nd and 3rd line the property osname of the model. The 3rd line is partly correct, as the access to the data is done through a method, but access to property name is done directly. You can work with the data object now directly, but you shouldn’t. What you want is not to work with the raw data that defines your model, but with properties.

Use access methods

Data binding is important when developing an UI5 app. You update properties, and you want to have the UI elements automatically be updated too. When accessing the properties directly, you have to check if the change is correctly propagated. Using access methods, UI5 will for sure take care of this. The method to access properties of your data model are getData, getProperty or getObject. Applying this to above code:

JSON

var oData = this.getView().getModel().getData();
var osname = this.getView().getModel(“device”).getProperty(“/os/name”);

OData

var entity = this.getView().getModel().getObject("/"+key);
var property = this.getView().getModel().getProperty("/"+key+"/Depth");

This is now only using the methods to access data. To alter the property, use the setProperty method.

OData

this.getView().getModel().setProperty("/"+key+"/Depth", 11.111)

JSON

this.getView().getModel("device").setProperty("/os/name", "windows")

The above examples may not be perfect. They show that UI5 offers methods to access model data. Using these methods your code will continue to work in the future and is guaranteed to work in future releases of UI5. Direct access to the model data is done at your own risk. In case you work on a UI5 app, use the access methods. If you work on an older app that uses direct access to the model, try to refactor the app. The change from oModel.oData to oModel.getData() is as simple as executing a find and replace.

 

SAP Web IDE: Invalid backend response received by SCC

Connectivity between SAP Cloud Platform and an on premise SAP NetWeaver system is normally achieved via SAP Cloud Connector. A nice feature depending on this is the remote connection of SAP Web IDE to an on premise ABAP system. The feature allows to easily load apps from the ABAP system and change or extend them from everywhere.

For this feature to work, some ICF services must be active on the ABAP system and remote access enabled on SCC. If not, Web IDE cannot “talk” to NW ABAP. Some possible errors and solutions regarding the setup are shown in this blog.

Scenario

A NetWeaver ABAP system with Fiori apps is available and the SAP Cloud Connector is configured to expose the system to SAP Cloud. I am using the SAP NetWeaver ABAP 7.51 Developer Edition for the scenario.

In the destination section of SCP, the SCC is shown as connected and the destination NPL is configured and working. A connection tests gives back a successful message: SCP <–> SCC <–> NW works.

Problem

A developer tries to extend a Fiori app. In Web IDE, the project wizard for an extension project is used.

After selecting the on premise system destination, an error message is displayed. The actual error message can differ. Sometimes you see an informative error message or just some red text or maybe nothing.

Error messages

In all cases, you can check the log of SCC and see a detailed information on the error.

The error message is:

Access denied to /sap/bc/adt/discovery for virtual host npl:443

Solution

The ICF service /sap/bc/adt/discovery is not accessible. This can be because the user does not have the right permissions, or the service is not active in the NW system, or SCC is not exposing the service.

Alternative A: SCC not exposing service

Adding a service in SCC will only expose the exact path, not the sub path. Either you add all paths exactly in the resource list, or change the access policy to accept sub-paths too.

Root cause: Path only, excluding sub-paths.

Solution: Change this to will allow Web IDE to access the resource.

Alternative B: ICF service not active

In the NW ABAP system, got to transaction SICF and check node /sap/bc/adt. This node must be activated. By default, this node is deactivated and must be activated by Basis.

Root cause: Service deactivated

Solution: Activate node adt. Right click and select Activate Service.

Alternative C: Missing authorization

Check with SU53 and SAP Help what is missing and assign the right permissions to your user.

Result

After applying the correct solution, the developer can use the extension project wizard in SAP Web IDE to load available applications.

 

Reset password for SAP Web Dispatcher user

It happened. You do not remember anymore the password created by SAP Web Dispatcher (WD) during bootstrap operation. While this is not bad (who can remember a password like aR$#¨%_09fms!” anyway?) and normally your browser safes it for you (hm, maybe not so good) or your password safe (better). But the password is gone, you cannot log on anymore to WD admin interface. No worries, if you have access to the computer where WD is running, you can either

  1. Get the icmauth.txt file and try to hack the password or
  2. Create a new password for your user.

I prefer option b.

The documentation at SAP Help for this gives you some options, like recreate the configuration (bootstrap) and you’ll get a new password for the icmadm user.

  • Creating Administration Users SAP Help

The online documentation for this section only mentions icmon, but for Web Dispatcher you have to use wdispmon. The authors explain this at the parent page of the topic and justify it that this makes things easier. I am not sure to whom, but definitely not for the person reading the guide, as you have to read the parent page to find out why icmon is not available for WD. Note: the page is for WD and still the documentation is using commands for ICM for NetWeaver ABAP #yay.

Content of the icmauth.txt file looks like:

# Authentication file for ICM and SAP Web Dispatcher authentication

icmadm:{SHA384}z3Lq992UB3lmK3F5dND266RBGU1S2xflxQOtSJn4irawcIce+Xo:admin

Field 1 Field 2 Field 3
icmadm is the user {SHA384}z3… is the encrypted password of the user admin is the group of the user.

To change the password of the user icmadm you have to use the wdispmon command with the –a flag. Also provide the path to the WD profile file.

Command: wsdispmon –a pf=sapwebdisp.pfl

Enter c to change the password of an existing user.

Inform the new password. As of now, the new password will not be available to WD, as it is not saved to icmauth.txt. To persist the new password you have to save it. To do so, select s from the menu.

Do not worry, a copy of the old file will be created (in case your co-worker still has the old password). With this done, you can exit the program. Select q from the menu.

(Not sure if you have to restart WD, but I did.) Now you can log on using the new password to WD. Access your WD admin page and log on using icmadm and the new password.

https://localhost:4300/sap/wdisp/admin/public/default.html

SAP UI5 VIZ charts in Chrome

I was preparing a demo showing how to visualize data from an IoT service using SAP UI5 VisFrame charts. To play around with VizFrame, I used the sample from SAPUI5 SDK. It was working perfectly on the online version, but while running the UI5 app and Chrome, I got an error message.

Googling for the error message revealed that with Chrome 50 a known error exists which makes it impossible to use a VizFrame chart. Luckily I found the solution on SCN. All it takes is to implement the function as a prototype and the chart will work.

SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(elem) { return elem.getScreenCTM().inverse().multiply(this.getScreenCTM()); };

I`ve put the code in my views controller init() function:

onInit : function (evt) {
  SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(elem) { return elem.getScreenCTM().inverse().multiply(this.getScreenCTM()); };
  oVizFrame = this.oVizFrame = this.getView().byId("idVizFrame");

Result

Now, this works magically when I access the online SDK, but is broken when using it locally. I guess SAP did some magic either in the SDK or in the UI5 library that my SAPUI5 version does not include. Either way, the above trick solves the problem.

Fiori client compile error

Lately I was installing the latest version of the SMP3 SDK SP10 PL3 and with it the Fiori client. While trying to create a new custom Fiori client app, I got an error. Gradle wasn`t able to download a dependency from maven.

Now, you never know for sure if this may now happening because of the new SDK version or because of another error. I checked the maven site and the POM was there, I could even download it via the browser. I use from time to time my own repository manager (artifactory). First I checked if my settings.xml can be blamed. Settings.xml was empty, so all requests done by maven will go directly. But this triggered something in my head. The connection I was using to connect to the internet was not without a proxy. Not a proxy you had to insert into your computer configuration, but it was there. So I switched to LTE via my smartphone and … it worked. Cordova compiled now ran without an error.

Lesson learned: be prepared for strange errors when a proxy is between you and the internet.

Getting started with BUILD – Installation

After meeting the pre-requirements for BUILD, it is time to actually install BUILD. The steps are outlined at SAP BUILD GitHub page. There a 4 steps:

  1. Get the tool
  2. Install required node modules
  3. Initialize the db
  4. Start the app

Be sure to have followed the steps outlined in the pre-requisites in my previous blog.

1. Get the tool

BUILD is hosted on GitHub, so all it needs to get the source code is git. It`s as of today only 255 MB that you have to download.

Command: git clone https://github.com/SAP/BUILD.git

2. Install required node modules

Change to the BUILD directory and run the following commands:

Command: npm install –g grunt-cli

Change to BUILD\BUILD directory. Install dependency of project

Command: npm install

Note: before doing this, verify that the command shell you are using is configured to use node v0.10.38

Command: nvmw use v0.10.38

Tip: The installation will have to compile some libraries using Microsoft C++ compiler. Make sure the compiler is using the right SDK.

Command: call “C:\Program Files\Microsoft SDKs\Windows\v7.1\bin\Setenv.cmd” /Release /x64

Now the SDK is using the 64 bit version of the SDK.

Result

Node-gyp is compiling files.

In the end, you should see something like that:

Possible errors

Error: mocha\bin does not exist

Solution: try a npm cache clear, delete the local node_modules directory and run npm install again.

Error: Could not load the Visual C++ component

In case you did not point the SDK to use the right MSFT compiler, you get this error message:

Solution: Run from within cmd: call “C:\Program Files\Microsoft SDKs\Windows\v7.1\bin\Setenv.cmd” /Release /x64

Error: EPERM with npm-cache

Solution: run npm install again. It should now pass this error. You may have to delete the lock file.

3. Initialize the database

Only needed after initial installation of BUILD.

Run the commands from the server directory.

Create schema

Command: node initSchema.js

The above command will create a DB schema called norman. Taking a look into the config file, reveals that there is a section for db. The defines a database named norman.


"db": {
"hosts": "localhost",
"database": "norman",
"options": {
"db": {
"w": 1
},
server": {
"poolSize": 5,
"socketOptions": {
"keepAlive": 1
}
}
}
},

Test

The see if the database was created in mongo db, connect to the db and issue the command show dbs.

Command: mongo.exe

Command: show dbs

Set access permissions

Command: node setDefaultAccess.js

4. Start BUILD app

Command: grunt serve

Result

Note the final line stating: Server started.

Access BUILD

This means that the http server is running at default port 9000 on localhost. Access it on Chrome.

Click on join to create an account. Afterwards, create a new project

  1. Enjoy BUILD

Have fun.

Getting started with BUILD – Pre requisites

SAP showed a demo of BUILD at its TechEd keynote at Las Vegas. The 1st time I tried to install BUILD on my laptop was shortly after it was launched and I was still in the hospital; and I failed getting it working. Afterwards I mainly interacted with BUILD using SAP`s internal system. The installation is not an easy next, next, next wizard (yet), but as BUILD is a really impressive tool for UX, AND OPEN SOURCE, I believe nobody should be left out of using BUILD just because the installation isn`t doable by everyone. So I created this blog showing how I installed BUILD on my Windows 7 64bit laptop. I hope it helps people getting started with exploring the powerful features of BUILD.

The GitHub project outlines the prerequisites as well as the actual installation steps. Meeting the prerequisites is a must, and not so easy, as you`ll need to have the right versions made available for build to work.

PREREQUISITES

The prerequisites are

  • GIT
  • npm.js in version1.4.28
  • node.js in version 0.10.33 or 0.10.38
  • MongoDB in version 2.6.x
  • node-gyp

Let me show you how I did make this work on a Windows 7 64bit laptop. Installing git is the easiest one. Just download it from git-scm.org. The others a little bit more complicated. Let me detail the steps here for each component.

NPM.JS

Command: npm –g install npm@1.4.28

Test

Command: npm –version

NODE.JS

You have basically two alternatives to install Node.js in version 0.10.38. Either you download it make sure that your cmd is using this version (PATH variable), or you activate the right version for your current session.

Download

There are several versions available for download from nodejs.org. You can opt to download the installer for a specific version or to download the executable. The URL to download the files for 0.10.38 is: https://nodejs.org/dist/v0.10.38/

To download just node.exe, download it from there and save it into a directory. Run node.exe from there and check that it is the right version number

Test

Command: node.exe –version

Node package manager

This is the alternative you should prefer. Easier to use, allows to have several node version in the system and done by npm. To do so, first install nvm. On Windows, you`ll have to use nvmw.

Command: npm install –g nvmw

Now you can use nvmw to install a specific version of node.

Command: nvmw install v0.10.38

Activate node.js 0.10.38

Command: nvmw use v0.10.38

Test

To see if 0.10.38 is now activated, run node with the version parameter

Command: node –version

Python

Download Python 2.7 installer and install python. Ensure that the python executable binary is in the path.

Test

Node-gyp

Looks like the installation of BUILD will have to compile some stuff, so node-gyp is being used. The installation of node-gyp is more complex and can be found here: https://github.com/nodejs/node-gyp/blob/master/README.md#installation

For Windows 7 64 bit, it means to install two components:

  • C++ compiler and
  • Windows 7 SDK

C++ compiler

The compiler is Microsoft Visual Studio C++ 2013 for Windows Desktop. Download it from Microsoft: http://www.microsoft.com/en-gb/download/details.aspx?id=44914

Select the version you want to download. I recommend the online installer.

After downloading the online installer, run it

Accept the license term to start the 7 GB install

Restart computer.

Windows 7 64bit SDK

Download the Windows 7 64bit SDK from Microsoft: http://www.microsoft.com/en-us/download/details.aspx?id=8279

Run the installer

Select the components you want to install. Best is to leave the default.

This starts the installation and download of necessary files.

Result: SDK is installed.

Afterwards, some strange Help Library Manager pops up and starts to fetch things from the Internet. Just let it finish and then exit it.

Possible error

Solution

“To resolve this issue, you must uninstall all versions of the Visual C++ 2010 Redistributable before installing the Windows 7 SDK. Checking the list of installed programs reveals that I do have this library installed.” Microsoft

Uninstall these components

Install mongo db

Download binary zip from Mongo DB. Version: mongodb-win32-x86_64-2008plus-2.6.11. Follow install instructions from Mongo DB.

  1. Extract zip file to folder: C:\dev\tools\mongodb-2.6.11
  2. Create db data folder data\db

  3. Start mongo db from bin directory. Start mongo db and give path of database directory as parameter:

    Command: mongod.exe –dbpath “C:\dev\tools\mongodb-2.6.11\data\db”

Note: without the db data directory, mongo db won`t start.

BEP – Activities

Configuration steps to be executed on the SAP backend system (BEP) for SAP NetWeaver Gateway scenarios.

The configuration steps to be executed on the backend (BEP) are detailed at SAP Help. The steps are for the OData Channel Service for backend system.

  1. Settings for Idempotent services BlogSAP Help
  2. Defining a remote function call to SAP Gateway BlogSAP Help
  3. Connection settings to SAP Gateway BlogSAP Help
  4. Configure the bgRFC supervisor destination BlogSAP Help

BEP – 4 – Configure the bgRFC Supervisor Destination

The configuration steps to be executed on the backend (BEP) are detailed at SAP Help. The steps are for the OData Channel Service for backend system.

  1. Settings for Idempotent services Blog SAP Help
  2. Defining a remote function call to SAP Gateway Blog SAP Help
  3. Connection settings to SAP Gateway Blog SAP Help
  4. Configure bgRFC supervisor destination SAP Help

This document explains how to execute step 4.

“You configure a supervisor destination for the bgRFC to receive the configuration settings for the bgRFC scheduler. In addition, the supervisor starts or stops the schedulers as required.” SAP Help

Pre-requisites

You need to have a user of type B called BGRFCUSER. This user will be uesd for the bgRFC communication.

  1. Go to transaction SU01

  1. Enter BGRFCUSER in the user filed
  2. Click on create

  1. Enter user data
  • User Type: System
  • Password: choose one
  1. Go to tab “Roles
  • Select role SAP_BC_BGRFC_SUPERVISOR

  1. Save the user

Configure bgRFC Supervisor Destination

SPRO: SAP Reference IMG and navigate to  SAP NetWeaver Gateway Service Enablement Backend OData Channel Connection Settings to SAP NetWeaver Gateway Create bgRFC Supervisor Destination

  1. Go to tab “Define Supervisor Dest.

  1. Click on create
  2. Enter data
  • Destination Name: “BGRFC_SUPERVISOR
  • User Name: BGRFCSUPER (User created in section pre-requisites)
  • Password: password for user

  1. Save

This created a new RFC destination named: BGRFC_SUPERVISOR. This can be verified by going to transaction SM59.

The tab Logon & Security shows the user configuration