Retrieve data from list in SharePoint 2013 provider hosted App

Question

I have developed a provider hosted app in SharePoint 2013. As you already know, Visual Studio creates web application and SharePoint app. The web application gets hosted inside IIS and the SharePoint App in SharePoint site collection. I'm trying to get data from a list hosted in SharePoint using CSOM. But I get ran insecure content error.

"[blocked] The page at 'https://localhost:44302/Pages/Default.aspx?SPHostUrl=http%3A%2F%2Fecontent&0319c41%2Eecontent%2Eelibrary%2Eapps%2Elocal%2FSharePointApp2%5Fsingeltest' was loaded over HTTPS, but ran insecure content from 'http://apps-892db5a0319c41.econtent.elibrary.apps.local/sharepointapp2_singeltest/_layouts/15/AppWebProxy.aspx': this content should also be loaded over HTTPS."

here is my code in Default.aspx

<script type="text/javascript" src="../Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="../Scripts/MicrosoftAjax.js"></script>
<script type="text/javascript" src="../Scripts/SP.Core.js"></script>
<script type="text/javascript" src="../Scripts/INIT.JS"></script>
<script type="text/javascript" src="../Scripts/SP.Runtime.js"></script>
<script type="text/javascript" src="../Scripts/SP.js"></script>
<script type="text/javascript" src="../Scripts/SP.RequestExecutor.js"></script>

<script type="text/javascript" src="../Scripts/App.js"></script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>

    <form id="form1" runat="server">
    <div>
        <input id="Button1" type="button" value="Get title via CSOM" onclick="execCSOMTitleRequest()" /> <br />
        <input id="Button2" type="button" value="Get Lists via CSOM" onclick="execCSOMListRequest()" />
    </div>
        <p ID="lblResultTitle"></p><br />
        <p ID="lblResultLists"></p>
    </form>
</body>
</html>

and App.js is:

var hostwebUrl;
var appwebUrl;

// Load the required SharePoint libraries
$(document).ready(function () {
    //Get the URI decoded URLs.
    hostwebUrl =
        decodeURIComponent(
            getQueryStringParameter("SPHostUrl")
    );
    appwebUrl =
        decodeURIComponent(
            getQueryStringParameter("SPAppWebUrl")
    );

    // resources are in URLs in the form:
    // web_url/_layouts/15/resource
    var scriptbase = hostwebUrl + "/_layouts/15/";

    // Load the js files and continue to the successHandler
    //$.getScript(scriptbase + "/MicrosoftAjax.js",
    //   function () {
    //       $.getScript(scriptbase + "SP.Core.js",
    //           function () {
    //               $.getScript(scriptbase + "INIT.JS",
    //                   function () {
    //                       $.getScript(scriptbase + "SP.Runtime.js",
    //                           function () {
    //                               $.getScript(scriptbase + "SP.js",
    //                                   function () { $.getScript(scriptbase + "SP.RequestExecutor.js", execCrossDomainRequest); }
    //                                   );
    //                           }
    //                           );
    //                   });
    //           });
    //   });
});

function execCrossDomainRequest() {
    alert("scripts loaded");
}
function getQueryStringParameter(paramToRetrieve) {
    var params = document.URL.split("?")[1].split("&");
    var strParams = "";
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve)
            return singleParam[1];
    }
}

function execCSOMTitleRequest() {
    var context;
    var factory;
    var appContextSite;
    var collList;
    //Get the client context of the AppWebUrl
    context = new SP.ClientContext(appwebUrl);
    //Get the ProxyWebRequestExecutorFactory
    factory = new SP.ProxyWebRequestExecutorFactory(appwebUrl);
    //Assign the factory to the client context.
    context.set_webRequestExecutorFactory(factory);
    //Get the app context of the Host Web using the client context of the Application.
    appContextSite = new SP.AppContextSite(context, hostwebUrl);
    //Get the Web
    this.web = context.get_web();
    //Load Web.
    context.load(this.web);
    context.executeQueryAsync(
        Function.createDelegate(this, successTitleHandlerCSOM),
        Function.createDelegate(this, errorTitleHandlerCSOM)
        );
    //success Title
    function successTitleHandlerCSOM(data) {
        $('#lblResultTitle').html("<b>Via CSOM the title is:</b> " + this.web.get_title());
    }
    //Error Title
    function errorTitleHandlerCSOM(data, errorCode, errorMessage) {
        $('#lblResultLists').html("Could not complete CSOM call: " + errorMessage);
    }
}

function execCSOMListRequest() {
    var context;
    var factory;
    var appContextSite;
    var collList;
    //Get the client context of the AppWebUrl
    context = new SP.ClientContext(appwebUrl);
    //Get the ProxyWebRequestExecutorFactory
    factory = new SP.ProxyWebRequestExecutorFactory(appwebUrl);
    //Assign the factory to the client context.
    context.set_webRequestExecutorFactory(factory);
    //Get the app context of the Host Web using the client context of the Application.
    appContextSite = new SP.AppContextSite(context, hostwebUrl);
    //Get the Web
    this.web = context.get_web();
    // Get the Web lists.
    collList = this.web.get_lists();
    //Load Lists.
    context.load(collList);
    context.executeQueryAsync(
        Function.createDelegate(this, successListHandlerCSOM),
        Function.createDelegate(this, errorListHandlerCSOM)
        );
    //Success Lists
    function successListHandlerCSOM() {
        var listEnumerator = collList.getEnumerator();
        $('#lblResultLists').html("<b>Via CSOM the lists are:</b><br/>");
        while (listEnumerator.moveNext()) {
            var oList = listEnumerator.get_current();
            $('#lblResultLists').append(oList.get_title() + " (" + oList.get_itemCount() + ")<br/>");
        }
    }
    //Error Lists
    function errorListHandlerCSOM(data, errorCode, errorMessage) {
        $('#lblResultLists').html("Could not complete CSOM Call: " + errorMessage);
    }
};

Any solution is appreciated.

yeah im running into the same issue with cross-site domain problem. Im testing mine off o365 dev site. Ill monitor this thread or post resolution if i get one. — GoldBishop

GoldBishop GoldBishop · Accepted Answer · 2014-03-25T17:28:07

well first off, i can tell you your decodeURIComponent logic isnt working.

Yours:https://localhost:44302/Pages/Default.aspx?SPHostUrl=http%3A%2F%2Fecontent&0319c41%2Eecontent%2Eelibrary%2Eapps%2Elocal%2FSharePointApp2%5Fsingeltest

Mine: https://localhost:44302/Pages/Default.aspx?SPHostUrl=http://econtent&0319c41.econtent.elibrary.apps.local/SharePointApp2_singeltest

Secondly, is the HostURL content supposed to be unsecure? If so, then you may want to change your browser settings. If not, then you need to see why your HostURL is in the Anonymous Zone but your AppURL is in the Secure Zone.

In either case, verify that Everyone has at least Read Access to the location your trying to pull from.

Last thing to do, is to setup a Trusted Host Location if you have access to the Admin Center.

Here is a code snippet for what i used to test:

    $(document).ready(function () {
    $.getScript(qsHostUrl + "/_layouts/15/SP.RequestExecutor.js", getHostInfo);

    function getHostInfo() {

        var ctxApp = new SP.ClientContext(qsAppUrl);
        var factory = new SP.ProxyWebRequestExecutorFactory(qsAppUrl);
        ctxApp.set_webRequestExecutorFactory(factory);
        var ctxHost = new SP.AppContextSite(ctxApp, qsHostUrl);
        var web = ctxHost.get_web();
        ctxApp.load(web);

        ctxApp.executeQueryAsync(
            Function.createDelegate(this, getHostInfoSuccess),
            Function.createDelegate(this, getHostInfoError)
        );

        function getHostInfoSuccess(sender, args) {
            lblData.html(
                'Title: ' + web.get_title() + '<br/>' +
                'Description: ' + web.get_description()
            );
        }
        function getHostInfoError(sender, args) {
            lblData.html(
                'Request Failed: ' + args.get_message() + '\n' +
                'Stacktrace: ' + args.get_stackTrace()
            );
        }
    }
}

Retrieve data from list in SharePoint 2013 provider hosted App

1 Answers