Was hoping somebody could help me troubleshoot a major problem I am having. I am developing a new Qlik Sense extension (using the Angular template/framework). My new extension does nothing more that load an iframe. There is one important aspect of the extension that is not working and am hoping you might be able to help/assist. I am attempting to pass the current Qlik Sense user (their userid) in the URL (using the “get” method) to the iframe. Unfortunately I am consistently receiving the following error (in the developer console):
Error: [$interpolate:interr] Can't interpolate: {{currentUrl}} Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.
The iframe doesn’t load the requested web page due to this error/conflict.
I have verified that if I “hardcode” a URL directly (non-dynamically; explicitly: “https://xxxxxx.xxxxx.com/xxxxx/xxxxxxxxx?userid=xxxxxx”) into the iframe’s “ng-src=” the iframe page loads and renders correctly within the iframe (both with and without the userid parameter being included in the hardcoded/explicit value). The issue is when I attempt to dynamically build the URL string and pass it into the iframe’s ng-src.
Here is the source on the html page:
username: {{username}}<br> <!-- this line renders/loads correctly -->
currentUrl: {{currentUrl}}<br> <!-- this line renders/loads correctly -->
<iframe ng-src="{{currentUrl}}" frameborder="0" style="border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%;"></iframe>
Here is the code the get’s the current user name (so you can complete the full logic that I have developed):
var global = qlik.getGlobal();
var username = "";
global.getAuthenticatedUser(function(reply){
username = reply.qReturn.split('=')[2];
$scope.username = username;
$scope.currentUrl = “https://xxxxxx.xxxxx.com/xxxxx/xxxxxxxxx?userid=” + username;
});
I have attempted to use this logic in order to get a trusted URL, but this code doesn’t seem to return any value; hence the page doesn’t display/render. What is more bizarre/interesting is no errors or warnings are displayed on the developer console either:
var app = angular.module('plunker', ['ngSanitize']);
app.controller('MainCtrl', function($scope, $sce) {
$scope.trustsrc=function(src) {
return $sce.trustAsResourceUrl(src);
}
});
The html page when using this logic, is as followed:
username: {{username}}<br> <!-- this line renders/loads correctly -->
currentUrl: {{currentUrl}}<br> <!-- this line renders/loads correctly -->
<iframe ng-src="{{trustSrc(currentUrl)}}" frameborder="0" style="border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%;"></iframe>
No surprise, but in both situations noted above (when using: ng-src="{{currentUrl}}" and ng-src="{{trustSrc(currentUrl)}}") - when looking in the “developer – elements” tab the iframe results are identical (note, there is no source whatsoever):
<iframe frameborder="0" style="border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%;"></iframe>
Have you ever developed an extension that displayed an iframe with a dynamic URL/address? If so, how did you get around or resolve this error? Any expertise you can provide is sure appreciated. Thanks in advance for your support and assistance!
