How to use whitelist for frame options - sapui5

Currently I am securing the front-end side of a FIORI application. When reading the official documentation I have seen that it is possible to load a FIORI application in a frame on a trusted domain. For that we would have to implement a whitelist. The official documentation stipulates that the following steps have to be implemented:
Call the service:
<meta name="sap.whitelistService" content="Whitelist.js">
Set the whitelist
jQuery.sap.addUrlWhitelist(undefined, "https://webide-ad232er4.dispatcher.hana.ondemand.com/");
jQuery.sap.validateUrl("https://webide-ad232er4.dispatcher.hana.ondemand.com/");
Set the frameOptions to trusted
data-sap-ui-frameOptions="trusted"
After performing all these steps as stipulated by the official documentation, through the SAP Web IDE I launch my application in a frame and normally all actions can be performed. However this is not the case, no actions can be performed and seems like the Whitelist service doesn't recognized my domain.
Is somebody able to provide guidance on how to correctly implement this?
P.S: This is the official documentation i used: https://help.sap.com/saphelp_uiaddon10/helpdata/en/62/d9c4d8f5ad49aa914624af9551beb7/content.htm
EDIT
Index.html
<!DOCTYPE HTML>
<html>
<!-- Copyright (c) 2014 SAP AG, All Rights Reserved -->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="sap.whitelistService" content="ui.2sp.mm.purchorder.approve.uis2pmmpurchorderapproveExtension.Whitelist.js" />
<title>Extension Project in UShell Sandbox</title>
<script type="text/javascript">
window["sap-ushell-config"] = {
defaultRenderer : "fiorisandbox",
services: {
NavTargetResolution: {
// navigation target resolution service is configured to resolve the empty location hash to the application
config : {
resolveLocal : [ {
"linkId" : "",
resolveTo : {
additionalInformation : "SAPUI5.Component=ui.s2p.mm.purchorder.approve.uis2pmmpurchorderapproveExtension",
applicationType : "URL",
url : "./" + window.location.search // pass URL query parameters to application
}
}]
}
}
}
};
</script>
<script src="test-resources/sap/ushell/bootstrap/sandbox.js" id="sap-ushell-bootstrap"></script>
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-compatVersion="1.16"
data-sap-ui-frameOptions="trusted"
data-sap-ui-resourceroots='{"ui.s2p.mm.purchorder.approve.uis2pmmpurchorderapproveExtension": "./"}'>
</script>
<!-- Create the unified shell default renderer control and add it to the page -->
<script type="text/javascript">
sap.ui.getCore().attachInitEvent(function() {
sap.ushell.Container.createRenderer().placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content">
</body>
</html>
Whitelist.js
jQuery.sap.addUrlWhitelist("https", "uis2pmmpurchorderapproveextens-ad232er4.dispatcher.hana.ondemand.com/?hc_reset");
jQuery.sap.validateUrl("uis2pmmpurchorderapproveextens-ad232er4.dispatcher.hana.ondemand.com/?hc_reset");
Kinds regards,
Zakaria

Related

peer.id not getting created - PeerJS

I am doing a video chat app, in which I am creating a peer object in index.html.
Below is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GeekChat</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.14/peer.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.14/peer.min.js' type='text/javascript'></script>
</head>
<body>
<div id='app'>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js'></script>
<script src='/io-square/io-square-browser.js'></script>
<script>
window.socket = io.connect()
window.peer = new Peer({host: 'peerjs-server.herokuapp.com', secure: true, port: 443})
</script>
<script src='bundle.js'></script>
</body>
</html>
and I am accessing peer.id at some other point in the app. the whole peer object with 7 properties gets created, but the id doesn't get created.
At later point when I access window.peer.id on the browser developer tools, I am able to access it.
Can anybody please let me know when does the peer id actually gets created.
You can get the peer ID in the 'open' event listener on the peer.
window.peer.on('open', function(id){
//handle the id
});

Azure media player(AMP) not working on chrome if script file is saved locally

I have saved the source of sample AMP video http://amp.azure.net/libs/amp/latest/samples/dynamic_setsource.html locally and trying to play video. It works in IE and Edge but not in chrome. if i host this file it works.
Can you please help me understand what is wrong here?
You can try running script in IE an Chrome to see the difference.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Skill Cloud</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://amp.azure.net/libs/amp/1.7.1/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="http://amp.azure.net/libs/amp/1.7.1/azuremediaplayer.min.js"></script>
</head>
<body>
<h1>Skill Cloud</h1>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>
<script>
var myOptions = {
autoplay: true,
controls: true,
width: "100%",
height: "auto",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]);
</script>
<footer>
<br />
<p>© Microsoft Corporation 2016</p>
</footer>
</body>
</html>
Thanks
When you run the code locally, Chrome opens your index.html with the file:// protocol. Due to Chrome's security policy local resources aren't allowed to be loaded and that's what's preventing playback. (If you check out your JavaScript console, I bet you'll see a similar error.)
To workaround this, you can use an IDE like Visual Studio or WebMatrix that will automatically set up a local web server for you so you can access your page with http://localhost:8000 or whichever port you prefer.
If you don't want to use VS or WebMatrix, you could also use Python's Simple HTTP server. Hope this helps and happy coding :)

CoffeeScript from CDN above 1.4.0 cannot call JavaScript function

CoffeeScript code is not working when the 1.10.0 version coffee-script.min.js is linked.
<!DOCTYPE html>
<html lang="en">
<head> <meta charset='utf-8'> </head>
<body>
<div id="myDiv">Content</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js" > </script>
<!--
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.4.0/coffee-script.min.js" > </script>
-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.10.0/coffee-script.min.js" > </script>
<script type="text/coffeescript" >
$("#myDiv").text "New Content"
alert "Hello world"
</script>
</html>
The latest working CDN coffee-script.min.js is 1.4.0. What is the problem?
Those script hosted in CDN are not for browser, I think.
I tried your code, and as you say it did not work and there was the following console log.
Uncaught ReferenceError: require is not defined
require is a specification of commonJS and it is not implemented in browser default.
If you would not like to compile and make it work easily, the code below is available.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
</head>
<body>
<div id="myDiv">Content</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://coffeescript.org/extras/coffee-script.js"></script>
<script type="text/coffeescript">
$("#myDiv").text "New Content"
alert "Hello world"
</script>
</html>
This way is introduced at the official site.
http://coffeescript.org/
While it's not recommended for serious use, CoffeeScripts may be included directly within the browser using tags. The source includes a compressed and minified version of the compiler (Download current version here, 39k when gzipped) as extras/coffee-script.js. Include this file on a page with inline CoffeeScript tags, and it will compile and evaluate them in order.
Error in packaging on the part of the CDN provider, see here:
https://github.com/jashkenas/coffeescript/issues/3811
https://github.com/cdnjs/cdnjs/issues/4869

Getting a 404 when trying to run a qunit test

I'm using the trial webide and trying to run myqunittest.qunit.html from the /test-resources folder. by using the url /test-resources/myqunittest.qunit.html. However it simply returns a 404 error whenever I attempt to run it.
Is this a problem with defining the resources? I don't understand how, for example, view/Main.view.xml can be found but not anything in the test-resources folder (I've tried just creating a simple js or html file containing a single line and it still 404'd).
I've copied the page directly from the qunit help page, QUnit Testing Fundamentals, this code seems to imply it should just work without any reference to the rest of the app.
I've tried various combinations of sap.ui.localResources and data-sap-ui-resourceroots in both html files to no avail.
My folder structure is as follows:
myapp
test-resources
myqunittest.qunit.html
view
Main.controller.js
Main.view.xml
index.html
myqunittest.qunit.html
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script id="sap-ui-bootstrap"
type="text/javascript"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-noConflict="true">
</script>
<link rel="stylesheet" href="resources/sap/ui/thirdparty/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="resources/sap/ui/thirdparty/qunit.js"></script>
<script type="text/javascript" src="resources/sap/ui/qunit/qunit-junit.js"></script>
<script type="text/javascript" src="resources/sap/ui/qunit/QUnitUtils.js"></script>
</head>
<body>
<div id="qunit"></div>
</body>
</html>
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-resourceroots='{"myapp": "./"}'
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
sap.ui.localResources("view");
var app = new sap.m.App({initialPage:"idMain"});
var page = sap.ui.view({id:"idMain", viewName:"myapp.view.Main", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
In your index.html you are loading ui5 relatively to the index.html in a resources folder
so on your server there is another folder
myapp
resources
sap-ui-core.js
test-resources
myqunittest.qunit.html
view
Main.controller.js
Main.view.xml
index.html
The problem is, that you are loading the core also relatively to your test-resources. You probably need to go 1 directory up.
so in myqunittest.qunit.html
change the bootstrap to
<script src="../resources/sap-ui-core.js"
Best regards,
Tobias
The SAP WebIDE adds neo-app.json to a project you create. It contains this entry:
{
"path": "/test-resources",
"target": {
"type": "service",
"name": "sapui5",
"entryPath": "/test-resources"
},
"description": "SAPUI5 Test Resources"
}
This is interfering with creating my own test-resources folder (one doesn't already exist in the project), and was causing the 404 error. Removing this entry has fixed my problem.

Minimum includes for Alfresco Share custom page?

I am creating a custom Share page that must have none of the Alfresco UI on it, but which still needs access to the Alfresco and YAHOO objects.
I have successfully created the page and caused it to open in a new tab, but I get errors that the Alfresco and YAHOO objects are undefined.
What are the minimum includes I must add to my Freemarker template to get access to those objects?
Update: I have gotten the Alfresco and YAHOO objects to load, but now am getting "Uncaught Error: extend failed, please check that all dependencies are included."
Here are the freemarker and javascript includes I've got so far, if it'll help:
<#import "import/alfresco-common.ftl" as common />
...
<script type="text/javascript" src="../scripts/ajax/yahoo/yahoo-min.js"> </script>
<script type="text/javascript" src="../scripts/ajax/yahoo/connection/connection-min.js"> </script>
<script type="text/javascript" src="../scripts/ajax/common.js"> </script>
<script type="text/javascript" src="../scripts/ajax/utilities/utilities.js"> </script>
<script type="text/javascript" src="../yui/yuiloader/yuiloader.js"> </script>
<script type="text/javascript" src="../js/alfresco.js"> </script>
Update 2: Based on the first answer, the first few lines of the template look like this and again yield Uncaught ReferenceError: YAHOO is not defined:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<region-id>head-resources</region-id>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title></title>
<script>
var urlParams;
Update 3: I've reduced the source to the minimum necessary to demonstrate the problem. What follows next is the template component definition file, followed by the freemarker template itself. Definition:
<?xml version='1.0' encoding='UTF-8'?>
<page>
<title>iPad Viewer</title>
<title-id>page.iPad.title</title-id>
<description>iPad Viewer</description>
<description-id>page.iPad.description</description-id>
<template-instance>viewer-ipad</template-instance>
<authentication>user</authentication>
</page>
Freemarker template:
<html>
<body>
<div class="content">
<#region-id>head-resources</#region-id>
<script>
alert(YAHOO);
alert(Alfresco);
</script>
</div>
</body>
</html>
Error is:
Caused by: freemarker.core.ParseException: Parsing error in template "org/alfresco/viewer-ipad.ftl" in line 11, column 7: Unclosed #... when the end of the file was reached.
I'm not sure how you created the page, but this is not needed when you define your regions.
Probably there are all in the <region-id>head-resources</region-id> So if you include that in the page-template that should suffice.