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:
- SAP Web IDE URL: http://s-prs.co/498770
- Backend URL: http://s-prs.co/498771
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
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.
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).
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.
Learn SAPUI5 in Our Upcoming Rheinwerk Course!
Learn to use SAPUI5 to develop modern, responsive SAP applications in this comprehensive course. From basics to advanced programming, integration, and customization, this is your one-stop shop! This upcoming course in August and September is live on the web and will teach you all you need to know about these topics. Click on the banner below to learn more and order your ticket.
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.
Comments