Angular encodes url in ng-src and replaces '/' with %2F and '?' with %3F

Question

I have a Kibana dashboard with URL:

/logquery/app/kibana#/dashboard/Some-Dashboard?someParameters

and I have a web application in which I am trying to embed the dashboard above in an <iframe>. The url in the web application is as follows

/dashboards/logquery/app/kibana#/dashboard/Some-Dashboard?someParameters

and in AngularJs, I am doing:

ctrl.dashboardUrl = $location.url().replace('/dashboards', '');

In my view:

<div ng-controller="DashboardCtrl as ctrl">
    <div class="iframe-container">
        <iframe ng-src="{{ctrl.dashboardUrl | trustAsUrl}}"
                height="100%"
                width="100%"
                ng-cloak
                frameborder="0"
                marginheight="0"
                marginwidth="0"></iframe>
    </div>
</div>

trustAsUrl filter is as follows:

filtersGroup.filter('trustAsUrl', [
    '$sce',
    function ($sce) {
        return function (val) {
            return $sce.trustAsResourceUrl(val);
        };
    }]);

and I have:

$locationProvider.html5Mode({
                enabled: true,
                requireBase: false,
                rewriteLinks: false
            });

This causes / characters after /kibana# to be replaced with %2F and ? with %3F which causes Kibana not to be able to find the requested dashboard.

How can I overcome this? Thanks!

Answer 1

It seems the problem is with vsprintf method which you missed in your question statement but present in fiddle code. I modified fiddle and used javascript string interpolation instead PHP vsprintf method and it is returning correct URL.

Fix:

Before

vsprintf("%s://%s/%s", [$location.protocol(), $location.host(), $location.url().replace('/dashboards', '')]);

After

ctrl.dashboardUri = `${$location.protocol()}://${$location.host()}/${$location.url().replace('/dashboards', '')}`