I have an issue of cross origin domain and getting an error as below when working with iframe

candidateInterviewCtrl.js:39 Uncaught SecurityError: Blocked a frame with origin "http://localhost:9000" from accessing a frame with origin "http://localhost:4000". Protocols, domains, and ports must match.

below is html code:

<div ng-class="{'col-xs-6': myVar=='something'}">
<div class="panel panel-default panel-height" ng-repeat="candidateInfo in aCandidateDetails track by $index">
    <div class="panel-heading header-background">
        <div stop-watch time="xyz" name="candidateInfo.name" time-of-interview="candidateInfo.doi" class="stop-watch"></div>
        <div class="row">
            <div class="col-xs-2"><a style="cursor:pointer" class="pull-right">{{candidateInfo.name}}</a></div>
            <div class="col-xs-offset-9"><a style="cursor:pointer" ng-click="fnVar(candidateInfo.name, candidateInfo.filepath)" data-toggle="collapse" data-target="{{'#'+toggle}}">{{candidateInfo.name}} resume</a></div>
        </div>
    </div>
</div></div>
<div id="{{toggle}}" class="collapse" ng-class="{'col-xs-6': myVar=='something'}" ng-if="checkVar">
<iframe width="100%" height="600px" ng-src="{{getIframeSrc()}}" onload="resizeIframe(this)"></iframe></div>

Here the src link es from server side from where i am passing it through controller

below is the code of controller:

angular.module('hrPortalApp')
.controller('candidateInterviewCtrl', function($scope, $state, $sce, getCandidateInterviewListService) {
    getCandidateInterviewListService.fnGetCandidateDetails("xyzzy").then(function(response) {
        $scope.aCandidateDetails = response;
        console.log(response);
        $scope.toggle = "accor"
    });
    $scope.fnVar = function(name, filepath) {
        $scope.file = filepath;
        $scope.checkVar = !$scope.checkVar;
        if ($scope.checkVar) {
            $scope.myVar = "something";
        } else {
            $scope.myVar = false;
        }
    };
    $scope.fnInterviewView = function(name) {
        $state.go('main.Topics', {
            "candidateDetails": $scope.aCandidateDetails,
            "name": name
        })
    };
    $scope.getIframeSrc = function() {
        return 'http://localhost:4000/' + $scope.file;
    };
    window.resizeIframe=function(obj){
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    }
});

i dont understand how to resolve this cross domain issue because at the server side it self i am using CORS

Any help would be appreciated.

I have an issue of cross origin domain and getting an error as below when working with iframe

candidateInterviewCtrl.js:39 Uncaught SecurityError: Blocked a frame with origin "http://localhost:9000" from accessing a frame with origin "http://localhost:4000". Protocols, domains, and ports must match.

below is html code:

<div ng-class="{'col-xs-6': myVar=='something'}">
<div class="panel panel-default panel-height" ng-repeat="candidateInfo in aCandidateDetails track by $index">
    <div class="panel-heading header-background">
        <div stop-watch time="xyz" name="candidateInfo.name" time-of-interview="candidateInfo.doi" class="stop-watch"></div>
        <div class="row">
            <div class="col-xs-2"><a style="cursor:pointer" class="pull-right">{{candidateInfo.name}}</a></div>
            <div class="col-xs-offset-9"><a style="cursor:pointer" ng-click="fnVar(candidateInfo.name, candidateInfo.filepath)" data-toggle="collapse" data-target="{{'#'+toggle}}">{{candidateInfo.name}} resume</a></div>
        </div>
    </div>
</div></div>
<div id="{{toggle}}" class="collapse" ng-class="{'col-xs-6': myVar=='something'}" ng-if="checkVar">
<iframe width="100%" height="600px" ng-src="{{getIframeSrc()}}" onload="resizeIframe(this)"></iframe></div>

Here the src link es from server side from where i am passing it through controller

below is the code of controller:

angular.module('hrPortalApp')
.controller('candidateInterviewCtrl', function($scope, $state, $sce, getCandidateInterviewListService) {
    getCandidateInterviewListService.fnGetCandidateDetails("xyzzy").then(function(response) {
        $scope.aCandidateDetails = response;
        console.log(response);
        $scope.toggle = "accor"
    });
    $scope.fnVar = function(name, filepath) {
        $scope.file = filepath;
        $scope.checkVar = !$scope.checkVar;
        if ($scope.checkVar) {
            $scope.myVar = "something";
        } else {
            $scope.myVar = false;
        }
    };
    $scope.fnInterviewView = function(name) {
        $state.go('main.Topics', {
            "candidateDetails": $scope.aCandidateDetails,
            "name": name
        })
    };
    $scope.getIframeSrc = function() {
        return 'http://localhost:4000/' + $scope.file;
    };
    window.resizeIframe=function(obj){
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    }
});

i dont understand how to resolve this cross domain issue because at the server side it self i am using CORS

Any help would be appreciated.

• javascript
• angularjs
• iframe

• As the error notes, you're using different ports in your URL (9000 -> 4000 respectively). This is prevented due to cross site origin restrictions. You can disable this in-browser, but remember not everyone will have this. My suggestion is make sure these are running on the same port, or use these instructions to bypass this: stackoverflow./questions/25098021/… – Dandy Commented Jul 5, 2016 at 6:26

2 Answers 2

In your server configuration, you have cross site origin restriction set up. You are getting this error because you are requesting iframe resource from localhost:4000 while you are on localhost:9000. Change it to request resource from localhost:9000 or disable cross origin restriction.

Both of your domains are different, i.e., http://localhost:9000 and http://localhost:4000. Because of the same-origin policy every browser blocks any script trying to access a frame with a different origin. For more info on this, Please refer to this StackOverflow answer once

However, as a quick fix, you can disable same origin policy for your browser.

1. To disable it in chrome, refer to this Stackoverflow answer.
2. To disable it in firefox, refer to this Stackoverflow answer.

FYI: This fix will only work on your local browser.