Blog Archive » How to Pull Content via jQuery from Another Web Site (Cross Domain) — And do it in SharePoint Too!

How to Pull Content via jQuery from Another Web Site (Cross Domain) — And do it in SharePoint Too!

I recently ran into a situation where I wanted to pull some content from another web site, however, due to a configuration constraint, I was unable to to this in a normal fashion.  Essentially, there was a table of data (a subset of the content on the page) on another site which I wanted to include on my web page, but using an IFrame to display the content simply wasn’t an option (due to the fact, I only wanted a subset of the data on the page).  In fact, I wanted to pull the data and display it in a web part, embedded in a web part page in SharePoint.  The main issue was that since I was doing this across domains (which is a big no-no for many security reasons), I had to come up with another technique.

After searching around the web for a while and trying to come up with a decent technique, I fell upon this thread on stackoverflow.com http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy.   There’s a number of noted techniques in there, but the one I chose was not one of the many highlighted earlier on in the thread, but instead a little one buried later on where someone discusses “anyorigin.com”.  Basically, ruling the items out one by one, iframe doesn’t work, as I wanted sub-content.  The AJAX discussion they’re talking about sounded very browser specific, and also quite flaky, depending on the browser version.  And window.postmessage wasn’t an option as I didn’t have direct access to the content on the other end, so I had no way of embedding anything that into the destination.

How anyorigin.com works is that you provide it a URL you’re wanting to retrieve, and it will provide you back the content from that site, basically the entire web page, as a string in JavaScript (or jQuery if you want to call it that).  You can then take that string and set it as the innerHTML value of a div (or other DOM node), and voila, you’ve got the content from the other site.  A little jQuery tweaking, and you’ve got sub-content from that site.  This was the complete solution for me – yay!  So how did I do it?

The Code

Disclaimer 1: Do not use this technique to take other’s intellectual property or copyright material.  This is only meant to be used on content you already own, or have permission to use.

Disclaimer 2: The possibility of having a cross site scripting attack is very real by using this technique – below, I’ve added a line which strips out any inline JavaScript “script” tags for this very reason – I highly recommend you do not remove that security precaution.

So what my solution looks like is below.  Essentially, it’s a block of code I embed into a SharePoint script editor web part (in 2013 – in 2010 use a content editor), and it runs itself when the page loads.

Simply replace the yellow highlighted text below with the website URL you’re looking to query for data.  And the purple text below with the location of the content (see the comment).

//Start of code

<script src=”http://code.jquery.com/jquery-1.9.1.min.js”></script>
<script type=”text/javascript”>
   var ExternalURL = “www.dummysite.com“; // This address must not contain any leading “http://”
   var ContentLocationInDOM = “#someNode > .childNode“; // If you’re trying to get sub-content from the page, specify the “CSS style” jQuery syntax here, otherwise set this to “null”

   $(document).ready(loadContent);
   function loadContent()
   {
      var QueryURL = “http://anyorigin.com/get?url=” + ExternalURL + “&callback=?”;
      $.getJSON(QueryURL, function(data){
         if (data && data != null && typeof data == “object” && data.contents && data.contents != null && typeof data.contents == “string”)
         {
            data = data.contents.replace(/<script[^>]*>[sS]*?</script>/gi, ”);
            if (data.length > 0)
            {
               if (ContentLocationInDOM && ContentLocationInDOM != null && ContentLocationInDOM != “null”)
               {
                  $(‘#queryResultContainer’).html($(ContentLocationInDOM, data));
               }
               else
               {
                  $(‘#queryResultContainer’).html(data);
               }
            }
         }
      });
   }
</script>
<div id=”queryResultContainer”/>

//End of code

This is a simple way to be able to pull content (or sub-content) from another web site into a web part on your SharePoint site.

44 responses to “How to Pull Content via jQuery from Another Web Site (Cross Domain) — And do it in SharePoint Too!”

  1. Thanks for your nice tutorial. how to send setHeader to remote site using anyorigion.com? for example send user agent and sessionID ?

    1. You should just be able to simply set the variable ContentLocationInDOM to whatever jquery selector you’d like to use, and it will return the sub-content based on the selector you’ve identified.

      1. Thanks, I am inexperienced with this.

        I did that and tried to execute the code but I had issues with:

        data = data.contents.replace(/]*>[sS]*?/gi, ”);

        Specifically, the near the end of the line that my browser (chrome) takes as an end of the script.

        Thanks for your help and for posting your code.

        – Raul

        1. I assume your comment stripped out the script tags, and that your code actually looks like mine in the post. That line is there to strip out all all embedded JavaScript, so that it can’t be used maliciously against you (on the rare occasion that you were pulling in malicious code). You could try without that line to see if the rest worked without that line.

  3. Hi,

    I have created a web part and made it as a wsp file and deployed in the server and added the web part in one of my list.

    The images, css and script files has been added in the Style Library.

    when I add the webpart in one site it was working fine, but the same web part when added in another site its not working, js files are not referenced.

    I am really stuck with this issue for the past one week, please provide my some solutions.

    Thanks,
    Ramkumar K

  4. Hi,
    Thanks for your tutorial.
    I want to pull a sub-content from my website into a facebook page tab using the script you provided.unfortunatly, it doesnt work.
    Your help will be so much appreciated
    Best regards,

      1. Hi again,
        First,i just wanna thank you for yout fast support.
        I understand now why it didnt work:i tought that i can use it in an html page.
        Are there any alternatives to this script for an html page?
        Have a nice day.
        PS:Sorry for disturbing you specially because my request is not related the SharePoint.

  5. Its not working for me in a content editor webpart inside VMware i am trying with sharepoint 2010

  6. Hi, great tutorial. I trying to do something similar. I have a mobile web app and I have content ( HTML) page that is on my server I’d like pass it into a div. I seen .load() or .get I just don’t now how to the correct syntax should. be to. Any thoughts how I can do this

  8. Hi,
    Thanks for your tutorial,
    I am trying to do something similar but load the content from a virtual directlory on the same server.
    I am using $().load or $.get(), both works for loading the html content into a div in my page. But the images and other js/css references are not loaded as the parent site is searching for content in its root folder, where as the images are in the Virtual directory folder. ANy ideas on how load images from Virtual directory ? Any suggestion would be helpful
    Thanks!

  10. I like your code, but I would like to be able to use it in an HTML setting on an internal webpage.

    I would like to pull data from our “public” site and display it in house. How can I only display the i want to?

  12. Can I use this code to specifically pull a line item from the source code of another site?

    For instance
    Line 163=( 1845.62)

    and I would like to create an iframe that would pull that 1845.62 value into my website on a daily basis.

    Thanks for your help.

    1. This is mainly meant to put into a content editor webpart within SharePoint. If that’s your intention, then sure, that should work.

  13. So how would I put this into the code above? That value in line 163 updates every 15 minutes and I would want anyone getting on our website to see the latest value from that string.

    Thanks so much for your help.

    1. Are you doing this in SharePoint? If so, the article describes exactly how to set it up for a page in SharePoint. If you want to use outside of the world of SharePoint, that should be fine, it would just need to be somewhat adapted to working outside of the SharePoint framework.

  14. I don’t have Sharepoint installed on my wordpress website. Not saying that I couldn’t install it if necessary but am mainly trying to accomplish this within a wordpress widget that shows that line code value whenever someone gets on the site.

  15. Trying to pull from one site collection to another in SP Online 2013 (O365) and this does absolutely nothing. Also tried ot with the url of this site – nothing.

  16. I want to extract certain component say a jquery slider along with its css and all the jqueries used in it. Is the method u mentioned works in my case?

  17. In the jsp page of my web application I need to take the contents of another webpage can I use the above code for the same ?

    Thanks in advance 🙂

        1. No I am not using sharepoint . I have a web application where I need to get the contents of another site

          1. Sorry, this is meant as a solution for SharePoint. Outside of that, I would look elsewhere for a solution. I would start with anyorigin.com.

  18. Thanks so much for this. I utilized it in Tumblr, not Share Point, but it worked perfectly after removing the line you added in Disclaimer 2. As is, it kept outputting the code as plain text after the closing script tag.

    Also, if anyone else is having issues, I had to replace all the quotes from this code block with straight quotes.

  21. I want to show images from tags in WP page.
    Images are hosted on a subdomain in Media gallery and i want to show various tags in page and post.
    how can various tags be displayed together.

    regards

  22. You’re code didn’t work for me.
    I’m not sure how AnyOrigin can function if SharePoint resides on-prem?

  23. Good Morning! I have been looking all over the web for a similar issue. But in my circumstance, I need to be able to update the SharePoint list with an external xml file I have access to. Any assistance in this matter would be greatly appreciated, thank you!

Comments are closed.