Programming

SAPUI5 Same-Origin Troubleshooting: How to Disable Google Chrome Web Security

When accessing the backend from your SAPUI5 application, you should be aware of the same-origin policy, an important web security concept.

 

What Is the Same-Origin Policy?

The same-origin policy prevents one web page from accessing data from another web page if the pages don’t share the same origin. An origin is a combination of the URI scheme, hostname, and port number. Let’s look at the same-origin policy example from Wikipedia.

 

The first page has the URL www.example.com/dir/page.html and wants to access data from another URL. Microsoft Internet Explorer doesn’t include the port when calculating the origin and is using its security zones instead.

 

When you’re developing an SAPUI5 application with SAP Web IDE, which is hosted in SAP Cloud Platform, and want to access data from the backend, you’ll find that the backend doesn’t have the same origin as SAP Web IDE. Here are two URL examples which will not resolve to real destinations-for SAP Web IDE and an SAP backend where you see that they don’t have the same origin:

In this example, you wouldn’t be allowed to access the backend from within SAP Web IDE.

 

Disabling Web Security in Google Chrome

We can overcome same-origin-policy issues which prevents us from accessing data from foreign origins with Google Chrome when we temporarily disable the web security via a command-line flag that looks like this:

 

--disable-web-security

 

As of Google Chrome version 49, the command-line flag must include the –-userdata- dir parameter:

 

--disable-web-security --user-data-dir

 

For Microsoft Windows, you can change the target location for the shortcut to start Google Chrome via the following line of code (see figure below):

 

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"

--disable-web-security --user-data-dir

 

Change Target Location

 

You must close all instances of Google Chrome and restart via the shortcut shown above so that the parameters are taken into consideration. When you restart Google Chrome, you’ll see a security warning, as shown below. If you try to access our simple backend again, which wasn’t Cross-Origin Resource Sharing (CORS) enabled, you can access it without any problems now.

 

Security Warning

 

When you don’t want to fiddle around with the command-line flags for starting and restarting Google Chrome, we recommend a handy Google Chrome plug-in called Allow-Control-Allow-Origin in the Google Chrome Web Store (see first figure below). You can then turn CORS on and off via the CORS button to the right of the address bar (second figure).

 

Allow-Control-Allow-Origin Chrome Plugin

Turn CORS On and Off

 

Conclusion

We want SAPUI5 applications to be dependable and secure in the environment they run in—the web—while still supplying vital backend data to users. In this blog post, you learned how the same-origin policy applies to SAP Web IDE and how to temporarily disable some security features in Google Chrome as validation steps in debugging.

 

Editor’s note: This post has been adapted from a section of the book SAPUI5: The Comprehensive Guide by Paul Modderman, Christiane Goebels, Denise Nepraunig, and Thilo Seidel.

Recommendation

SAPUI5: The Comprehensive Guide
SAPUI5: The Comprehensive Guide

Your comprehensive guide to SAPUI5! From to , get the know-how to develop MVC apps, use OData, create data bindings, debug and test code, and deploy apps. Learn the dos and don’ts of SAPUI5 and everything in between, whether you’re implementing CRUD operations or writing your own controls. See what’s new with SAP Cloud Platform, SAPUI5 support assistant, and more. Your best apps are yet to come.

Learn More
SAP PRESS
by SAP PRESS

SAP PRESS is the world's leading SAP publisher, with books on ABAP, SAP S/4HANA, SAP CX, intelligent technologies, SAP Cloud Platform, and more!

Comments