Loading Content Across Site Collections (SP Online)

Question

I have a site with a list that holds information about users, extracted from the user profile service in Powershell CSOM; each time the site loads, one of these rows is picked and the info displayed to produce a 'Have You Met' type WP. This code is run with SP.SOD.executeFunc('sp.js','SP.ClientContext',runWhenLoaded).

One of the fields is the absolute URL of the users display picture (looks like https://spe551120-my.sharepoint.com/User%20Photos/Profile%20Pictures/AllanD_SPE551120_onmicrosoft_com_MThumb.jpg) which is loaded within an img tag.

The problem is, if I access the site (in the root site collection of the tenant) before any other site, the code runs and all the text values are fine, but the image does not load. No amount of refreshing will make it load. However, if I access/refresh the site after having accessed the MySite site collection (i.e. where the images are), it's fine. Same behaviour in both Chrome, Firefox and IE11 on Windows 7.

So, obviously this is down to SP authorising your account for each site collection only when you access it 'properly' i.e. by going to a URL within it from the browser - remotely loading content within it from outside that site collection boundary obviously isn't enough.

The way I see it, there are a few possible solutions:

1. Add a hidden Page Viewer web part pointed at the Mysite site collection. Have tried this and it doesnt work, possibly because the sp.js code is running before it issues a HTTP call.

2. Add JS to pop-under open the Mysite page, then close it again. Would prefer to avoid this due to pop up blockers and it's a bit messy.

3. Open a client context to the Mysite site collection, but don't do anything with it, or do something trivial. Have tried this and it didn't work - any suggestions on using CC to force authorisation?

4. Insert some ASP code into the default.aspx page that silently loads the Mysite page somehow. Unsure how to do this one, if someone can lend a hand with the required code.

5. Modify the CSOM script that populates the list to copy the profile image from the Mysite SC to the same one as the site is in. This is a last resort option as the deadline for completing this work is quite soon, and it would require a fair bit of work to add cleanup, duplicate checking etc.

Any ideas? Looking for feedback on how to do the above methods that would work.

Answer 1

This is actually quite a known issue when trying to fetch the User profile photo and binding it to the html in other sharepoint page.

To fix, we used the userphoto.aspx layouts page which helped us fix the issue.

So, in your code, you need to form the url as below:

https://sitecollectionurl/_layouts/15/userphoto.aspx?size=L
&accountname=encodeduseremail&url=encodeduserprofilepictureurl

Where account name would be email address in encoded form and url would be the actual profile picture url.

So, your actual url would be somewhat as below:

https://tenantname.sharepoint.com/_layouts/15/userphoto.aspx?size=L&
accountname=user.name%40tenantname.com
&url=https://tenantname-my.sharepoint.com/User%20Photos/Profile%20Pictures
/AllanD_SPE551120_onmicrosoft_com_MThumb.jpg.

Bind this as the image's src attr and it will display the image without any issue.

Code would be somewhat as below:

var userPicUrl = https://tenantname.sharepoint.com/_layouts/15/userphoto.aspx?size=S&accountname=" + email + "&url=" + profilePictureUrl;
$('#userimage').attr('src', userPicUrl);

References - User profile pic in sp hosted app

Show user profile pictures in sp hosted app

Both the above references were for SP-hosted app. But we faced it in a normal sharepoint page as well and it works there as well.