Unable to initialise the dynamic dashboard API due to frame-ancestors Security Policy Directive
I'm unable to initialise the dynamic dashboard API due to a frame-ancestors Security Policy Directive - presumably because the frame contents and the web page come from different domains. However there are samples that work!
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://dde-us-south.analytics.ibm.com') does not match the recipient window's origin ('https://nrjhmXXXX.mybluemix.net').
Refused to display 'https://dde-us-south.analytics.ibm.com/daas/?perspective=postMessageApiLoader≈iKey=capi_1628fa658af∥entOrigin=https%3A%2F%2FnrjhmXXXX.mybluemix.net&sessionCode=CDXXXXXXXXXXXXXX' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://dde-us-south.analytics.ibm.com".
<html>
<head>
<script src="https://dde-us-south.analytics.ibm.com/daas/CognosApi.js"></script>
</head>
<body>
<h1>Hello World</h1>
<div id="ddeDashboard"></div>
</body>
<script type="text/javascript">
window.api = new CognosApi({
cognosRootURL: 'https://dde-us-south.analytics.ibm.com/daas/',
node: document.getElementById("ddeDashboard"),
sessionCode: 'CDXXXXXXXXXXXXXX'
});
window.api.initialize().then(function() {
console.log('API created successfully.');
}, function(err) {
console.log('Failed to create API. ' + err.message);
});
window.onError = function(event) {
console.log('onError:' + JSON.stringify(event));
};
window.api.on(CognosApi.EVENTS.REQUEST_ERROR, window.onError);
window.dashboardAPI = window.api.dashboard.createNew().then(
function(dashboardAPI) {
console.log('Dashboard created successfully.');
// window.dashboardAPI = dashboardAPI;
}
).catch(
function(err) {
console.log('User hit cancel on the template picker page.');
}
);
</script>
</html>
I ran into this as well and filed a documentation defect. Here was my guidance.
As the name suggests, DDE embeds a dashboard within your existing web application. It does this by injecting an HTML iframe into your application. The frame may only be loaded into authorized web applications. As a result, you may see the following error, which suggests that your application is not authorized.
Refused to display IBM URL in a frame because an ancestor violates the following Content Security Policy directive: frame-ancestors https://myapp.bluemix.net.
To resolve this issue, confirm that the URL (including port if applicable) in the address bar of your browser matches the webDomain property of the /daas/v1/session POST body.
expiresIn: 3600,
webDomain: 'https://myapp.bluemix.net'
This can be an initial stumbling point because the Dynamic Dashboard Embedded API explorer page uses SAMEORIGIN, but this does not apply to your external application.
Van is spot on, with his answer. You need to specify the webdomain of your application that will contain the DDE dashboard, in the POST request to create the session. We'll update the documentation to make this clearer.
Thanks for the feedback!
Thanks Van - should have updated this sooner. Exactly the issue!