This post was most recently updated on October 4th, 2017
In the first post of this series I introduced how to create a basic HelloWorld SharePoint Hosted Add-in.
In this article we will discuss another important topic Host Web URL and App Web URL.
Before start let understand What is the Host Web and App Web.
Host Web: SharePoint site where our app will install. It always be a specific domain name. It is Main Site of subweb (App Web).
|
1 |
https://<DomainName>/sites/<SiteName> |
App Web : SharePoint site where our app will deploy. App web is an isolated domain but it still inside in the Host Web. App Web domain contains main domain as well as App Hash URL ( Random Unique ID ). After Every deployment it will change.
|
1 2 3 4 5 |
https://example-8a5d4d113642be.sharepoint.com/sites/Dev/HelloWorld Or https://<ServerName>-<apphash>.<DomainName>/sites/<SiteName>/<AppName> |
App Hash : It is a Hexa-Decimal Random number generated internally when an add-in is deploy or install. The App Hash is part of App Web URL. The App Hash instance supports multiple group of users or tenant environments, for each tenant it provide unique domain name for the add-in. We can use same App Hash prefix URL if we are not in tenant environments.
App Name: App Name is set by developer.
Getting the URLs for the Host Web and App Web within an SharePoint add-in.
To get the Host Web URL and App Web URL we need to parse the current URL using JavaScript. If we carefully check the deploy app URL,It contains SPHostUrl and SPAppWebUrl query string parameter which contains Host Web and App Web URL. On each app deployment app web add Dynamic hexadecimal unique value in domain prefix so every time we need to parse the current URL.
So Below function getQueryStringParameter(param) will return the value of given parameter.
|
1 2 3 4 5 6 7 8 9 10 11 |
// Read Current URL parameters function getQueryStringParameter(param) { var params = document.URL.split("?")[1].split("&"); //Split Current URL With ? after that & var strParams = ""; for (var i = 0; i < params.length; i = i + 1) { //param,parse with given URL parameter var singleParam = params[i].split("="); if (singleParam[0] == param) { return decodeURIComponent(singleParam[1]); //Decode URL Result } } } |
Call getQueryStringParameter(param) function in document.ready or document.load.
|
1 2 3 4 |
//Get the URI decoded URLs. var hostweburl = getQueryStringParameter("SPHostUrl"); //It wil return Host Web URL var appweburl = getQueryStringParameter("SPAppWebUrl"); //It wil return App Web URL |
Instead of above method we can also use _spPageContextInfo object to retrieve Host Web and App Web URL. it simply great work in both situations.
|
1 2 3 |
var hostUrl = _spPageContextInfo.siteAbsoluteUrl; var appweburl = _spPageContextInfo.webAbsoluteUrl; |
So the question is, Why do SharePoint create separate domain for an add-in?
There are Two reason.
- SharePoint Add-in may have its own permissions and it’s not necessary the user who is installing the app has same permission as Add-ins, so with separate domain SharePoint identify the add-in requests and verify the permissions of the add-in. For more information about add-in permissions, please see the Add-in permissions article.
- The same-origin policy is an important concept in the any web application security model. SharePoint takes advantage of the browser’s same origin policy with it’s own domain.
Below action we can perform with the App Web URL
- Fetching Item from App List/Library
- Fetching Item from Host site List/Library
- Add/Edit/Update of list item.
- Get the App Web part properties
Further reading of this series:
How to create Hello World SharePoint Hosted Add-in
About add-in permissions in SharePoint Hosted Add-Ins
Hope you find it helpful. If you liked this article, then please share and comment.
