Skip to main content
Announcements
Qlik Introduces a New Era of Visualization! READ ALL ABOUT IT
cancel
Showing results for 
Search instead for 
Did you mean: 
ianwickline
Contributor II
Contributor II

QlikSense Extension - iframe - unable to handle dynamic URL

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!

Labels (3)
0 Replies