Enable Cross-Domain Profile Photos in SharePoint Online

Question

Has anyone found a way to display user photos in SharePoint from a search web part on a site without the images breaking when the authentication period to [tenant]-my.sharepoint.com times out?

For example, I have a publishing site at [tenant].sharepoint.com and on the home page we show all new employees based on the Hire Date property in their profile. The pictures come back but don't load because the image source url is for [tenant]-my.sharepoint.com. If you look at the network traffic it's trying to redirect them to re-authenticate against the "my site." If the users click on a profile it takes them to the auth page and then redirects them to the profile (without prompting for login info). Now that they've recently authenticated against the "my site" the pictures on the original homepage will display.

I understand the security reasons for this; however in on-prem implementations there's a "CrossDomainPhotosEnabled" web application property, but there's no such thing for SharePoint Online.

Has anyone gotten this scenario to work? Maybe some clever workaround I'm not considering?

Answer 1

Solved! Huge thank you to Brent Ellis on the Office 365 SharePoint IT Yammer group.

The solution was to create a new content display template (/_catalogs/masterpage/Display Templates/Content Web Parts) based off of the picture+3 line template I was using previously. I added the WorkEmail attribute to the template first and overrode the pictureURL variable like:

var pictureURL = "/_layouts/15/userphoto.aspx?size=L&accountname=" + $htmlEncode(ctx.CurrentItem.WorkEmail);

Then modified how it was building the picture markup like so:

var pictureMarkup = "<img src='" + pictureURL + "' class='cbs-picture3LinesImg' alt='" + line1 + "' id='" + pictureId + "' onerror='this.parentNode.innerHTML=Srch.ContentBySearch.getNoPictureMarkup(100);' onload='Srch.ContentBySearch.resizeImageToSquareLength(this, 100);'/>";

Now because the pictures are coming from the local /_layouts/15/userphoto.aspx source, the authentication isn't required and photos display as expected.