cross origin domain when using iframe where src comes from server side

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.

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: http://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame#answer-25098153 — Dandy, Jul 05 '16 at 06:26

score 3 · Answer 1 · answered Jul 05 '16 at 06:22

3

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.

answered Jul 05 '16 at 06:22

Jason

1,282
16
25

could you please elaborate @EnglishMaster – Shikha thakur Jul 05 '16 at 06:24
1

@Shikhathakur He means disabling it in the browser http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome but this will only work for your local browser. You'll want to fix it via other means (same port, or bypassing using steps provided in another answer). – Dandy Jul 05 '16 at 06:28

score 1 · Answer 2 · edited May 23 '17 at 11:44

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.

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

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

cross origin domain when using iframe where src comes from server side

2 Answers2