使用iframe时跨源域，其中src来自服务器端

Question

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 comes 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.

Answer 1

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.

Answer 2

Both of your domains are different, ie, 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.