Request a Quote

How to manage "Cross-Domain" Call

How to manage "Cross-Domain" Call

What is Cross-Domain Call?

  • When a web-application request data from other domain then its called Cross Domain Call. It is also known as “Cross Site Scripting” or “XSS”.

Why we need Cross-Domain Call?

  • When it is required to get some data from other than current domain and that domain gives data in certain format then we need to make “Cross Domain” request.
  • or e.g: To display twitter feed data in our Web-Application, we need to make request to www.twitter.comfor feeding required feeds to our sites which is called Cross-Domain Call.

Behavior of cross-Domain Call :

  • ross-Domain calls are always asynchronous.

Ways to make Cross-Domain Call :

  • There are two ways to make Cross-Domain Call :
    1. Client-Side Call
    2. Server-Side Call

    1. Client-Side Cross-Domain Call :
      • Client-Side Cross-Domain Calls are Ajax calls and can be made through JavaScript or jQuery.
      • Client-Side call are always acynchronous in manner.
      • We can make Cross-Domain calls from Client-Side when it is independent call means no taks is depend on it.
      • For e.g. If we are making Cross-Domain Call from Client-Side in Fancybox Pop-Up and we have written code of Cross-Domain call and after that we are closing Fancybox then it ispossile that ajax call is under progrss asynchronously and Fancybox gets Closed.
      • So in above situation we can’t make Cross-Domain call from Client Side as Ajax calls are asynchron in nature specially when it is Cross-Domain call and we can’t make it is as synchronous call.
      • Example : Following Example Shows how we can make Client-Side Ajax Call. Following Example shows how we can get twitter feed from www.twitter.com.
        <script type=”text/javascript”>
        function GetTwitterFeed()
        {
        $.ajax({
        url:“http://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=abc&count=5&callback=?”
        contentType: “application/json; charset=utf-8”,
        success: function (result) {
        if (result.length > 0) {
        }
        }
        });
        }
        </script>
    2. Server-Side Cross-Domain Call :
      • We can make Cross-Domain Call from Server Side when some task depend on resulted data.
      • Following example shows how we can make Cross-Domain Call from Server Side.
      • In this example we are requesting twitter feed data from www.twitter.com.
        public static string GetJsonDataByUserName(string UserName, string TwitterFeedCount)
        {
        string jsondata;
        try
        {
        WebClient web = new WebClient();
        jsondata = web.DownloadString(string.Format(“http://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name={0}&count={1}&callback=?”, UserName, TwitterFeedCount));if (jsondata.Contains(“([]);”))
        {
        return string.Empty;
        }
        jsondata = jsondata.Substring(1);
        jsondata = jsondata.Substring(0, (jsondata.Length – 2));
        return jsondata;
        }
        catch (Exception ex)
        {
        return string.Empty;
        }
        }

Cross-Domain Call in Different Context : (Sub-Domain)

  • When we are working in a scenario where Domain and Sub-Domains exists and it is require to call some services which recognize only Domain call and rejects Sub-Domain Call at that time there is need to maintain Context and Cross Domain Call explicitly.
  • Let’s take scenario of Facebook Login Pop-UP from Fancybox Pop-Up which is open from some page.
  • For example we are working in https://test.qbs.com(Sub-Domain of https://www.qbs.com) context and we are in page called LinkToFacebook.aspx.
  • Now LinkToFacebook.aspx page contains link from which Fancybox Pop-Up page FacebookLogin.aspx going to open and in that Pop-Up page we are putting Facebook Login plugin.
  • But here Facebook Login plugin will not allow context of Sub-Domain https://test.qbs.com/FacebookLogin.aspx, So we need to open FacebookLogin.aspx as
    https://www.qbs.com/FacebookLogin.aspx, which is different context from Sub-Domain Context.
  • Now in this scenario https://test.qbs.com/LinkToFacebook.aspxis detached from https://www.qbs.com/FacebookLogin.aspxbecause we are now in different context.
  • So now from https://www.qbs.com/FacebookLogin.aspxpage we can access any parent window https://test.qbs.com/LinkToFacebook.aspxpage elements or any functions. For example we can’t call window.parent.$.fancybox.close() function to close Fancybox Pop-Up when our works get done on https://www.qbs.com/FacebookLogin.aspxpage.
  • Here we will not be able to access any session data because https://www.qbs.com/FacebookLogin.aspx will be a different session.
  • Now when it is required to pass some data from https://www.qbs.com/FacebookLogin.aspxto https://test.qbs.com/LinkToFacebook.aspx, we must have to use Cookie in this Scenario because as we are in different context, Session will be also different So Session will not work here.
  • Cookie is the only way to maintain session within different context.
  • So we need to store required data from https://www.qbs.com/FacebookLogin.aspxpage in Cookie and need to access data from Cookie in https://test.qbs.com/LinkToFacebook.aspxpage.
  • Here we also need to ask User to explicitly close Fancybox Pop-Up.
  • In this way we can handle Cross-Domain call in different context.

By, Bipin Jain

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © 2015 Trimantra Software Solution LLP- Software Outsourcing Company India. All rights reserved.