This post is article 20 from the 30 Articles App series for SharePoint

I assume you have read article -19 to understand basic about cross-domain calls in SP Apps.

In this article I will discuss about implementing cross-domain communication from an SharePoint app.

• Let’s get started with placing SP.RequestExecuter.js library ( you can find this in LAYOUTS folder ) into you app project. you can put this file in scripts folder in your app project.
• Register the trusted domain(s) in your app manifest like below.
  Lets say for example I want to put otherdomain.com as a trusted domain so I am registering that as following.

   <AppPrincipal> 
     <Internal AllowedRemoteHostUrl="https://otherdomain.com/" /> 
   </AppPrincipal>
  

• With this library you can use REST or JSOM to communicate with SharePoint
• For REST option you will need to create a new SP.RequestExecutor as following.

  var executor = new SP.RequestExecutor(appweburl);
  executor.executeAsync(
  {
  url:
  appweburl +
  "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('aanuslist')?@target='" + targeturl+ "'" ,
  method: "GET",
  headers: { "Accept": "application/json; odata=verbose" },
  success: successHandler,
  error: errorHandler
  }
  );

• If you choose JSOM then get client context as below.

  var context = new SP.ClientContext(appweburl);    
  // context: The ClientContext object provides access to the web and lists objects. 
  var factory =  new SP.ProxyWebRequestExecutorFactory(appweburl); 
  // factory: Initialize the factory object with the app web URL. 
  context.set_webRequestExecutorFactory(factory); 
  var contextt = new SP.AppContextSite(context, targeturl);
  
  //Get the web and list objects and prepare the query 
  var web = contextt.get_web(); 
  var list = web.get_lists().getByTitle("aanuslist"); 
  var camlString = "<View> <ViewFields>" +
                   "<FieldRef Name='Title' />" +           
                   "</ViewFields> </View>";
  var camlQuery = new SP.CamlQuery(); 
  camlQuery.set_viewXml(camlString); 
  allItems= list.getItems(camlQuery); 
  context.load(allItems, "Include(Title)"); 
  //Execute the query with all the set options and parameters 
  context.executeQueryAsync(successHandler, errorHandler);
  
  

• Make sure in both scenarios your page includes reference to the cross-domain js library

Happy reading… and see you guys for the next article 🙂

This post is article 19 from the 30 Articles App series for SharePoint

In this article, I will discuss about Cross-Domain Calls, what are they and how to make it happen for Apps.

What is Cross-Domain Call?

As the name suggests whenever an app/programme wants to make client-side calls (for example, using JavaScript + XMLHttpRequest) from a page hosted in one domain (for example, http://www.domain_1.com/appPage.html) to a page or service hosted in a different domain (for example, http://domain_2.com) , it is called Cross-Domain call.

Cross-Site Request Forgery is an attack that tricks the victim into loading a page that contains a malicious request. It is malicious in the sense that it inherits the identity and privileges of the victim to perform an undesired function on the victim’s behalf, like change the victim’s e-mail address, home address, or password, or purchase something. these type of attacks generally target functions that cause a state change on the server but can also be used to access sensitive data.

By default, browsers block this type of communication for security reasons; they don’t want malicious apps to grab data or execute code without users knowing it. 

What to do when your app actually wants to make safe and trusted cross-domain call?

The App model for SharePoint and remote-hosting options easily put developers to face cross-domain challenges.  So how to achieve this trusted and secure connection? Well SharePoint offers Cross-Domain JS library SP.RequestExecutor.js which you can find in LAYOUTS directory. By utilizing this library, your app can incorporate information from SharePoint into your app and from your app it’s been utilized it to other web apps.

How does it actually work?

Behind the scene this JavaScript library uses hidden IFrame, PostMessage and proxy page to take care of making secure connection to SharePoint. This proxy page is responsible for forwarding calls to the underlined SharePoint infrastructure.

Your app will also need permission to make cross-domain calls and also have to have registration for the “allowed domains”.

Check the next article to know more about how to implement cross-domain calls in SharePoint Apps.