Hi Uday,
We have successfully developed the SAPUI5 web application hosted in Netweaver Gateway using SAML authentication. However, when we try to implement the same web application in Android/iOS device using Cordova/Phonegap, we have some problem.
Here is how we implement the SAML authentication:
In the app, we open an Overlay Container with iFrame inside point to a login.html page hosted in Netweaver Gateway server that is SAML protected (see openSAMLLogin below). It will create a SAMLRequest and redirect to SAP ID service which will display a login page, after user enter the valid user/password, it will redirect back to login.html page. Inside the login.html (see source below), it call postMessage with status:“login_ok” to origin (SAPUI5 web app) which hosted in the same Gateway server, when the app receive the status message=”login_ok”, it will close the Overlay Container and update the UI to login state. Everything work fine, when we port the web application to Apache Cordova (aka Phonegap), it give us a SecurityError.
SecurityError: Blocked a frame with origin "https://xxxxxx.sap.com" from accessing a frame with origin "file://". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "file". Protocols must match.
Did anyone encounter similar issue when working on Cordova app? Is there a solution or work around on it?
Any help will be much appreciated?
openSAMLLogin : function() {
//Overlay Container to display SAML Login page
jQuery.sap.includeScript("https://accounts.sap.com/ui/resources/javascripts/SAP_IDS.js", null, function () {
var oLoginContainer = sap.ui.getCore().byId("login_container");
if (!oLoginContainer) {
oLoginContainer = new sap.ui.ux3.OverlayContainer("login_container", {
openButtonVisible : false
});
}
var oHTML = sap.ui.getCore().byId("login_iframe");
if (!oHTML) {
oHTML = new sap.ui.core.HTML("login_iframe", {
sanitizeContent : false
});
}
oLoginContainer.removeAllContent();
oHTML.setContent('<iframe id="IDS_UI_Window" ' +
'src="https://' + util.ODataAccess.getHostName(gHostName) + '/esa_saml/login.html' +
'width=100% height=100% margintop="0" marginleft="0" align="left" frameborder="0" scrolling="no" allowtransparency="true"><p>Your device does not support iframes.</p></iframe>');
oLoginContainer.addContent(oHTML);
oLoginContainer.open();
});
},
login.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="cache-control" content="no-cache, no-store" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<script>
var parentUrl = parent.document.location.protocol + '//' + parent.document.location.host;
parent.postMessage({
"status": "login_ok"
}, parentUrl);
</script>
</head>
<body></body>
</html>
Best Regards,
Kam