Today I discovered an interesting issue with the new SharePoint Modern Library views on Office 365. One of my clients for whom I had built an application that loads some content within an iframe element on the site was suddenly no longer able to get the Modern Library pages to render correctly – they would simply show up as a blank page. At first, we thought maybe something with our code was failing and causing the rendering to fail but as we weren’t really doing much with the code running in the host site it didn’t seem like it could be the culprit and opening up the developer tools quickly showed that the error seemed related to code in a file created by Microsoft (spofiles-03fb8a55.js in this case – the hash may vary with builds):

Looking at the spfiles-[hash].js file where the failure occurred I could see the following:

As soon as I took a minute to understand what this code was doing I immediately saw the issue. Microsoft is basically looping through all cookies and trying to store them as key/value pairs in a collection. The problem is that they’re making an incorrect assumption about the data stored within the cookie – they’re assuming that any value stored would be an encoded value. Within our application, we were storing a cookie with the relative position of a particular element on the page. The value that we were storing in this case was a percentage – “20%”. So when the code on line 14887 in the screenshot above attempted to read the value of the cookie by first calling the decodeURIComponent() method it caused a failure because 20% is not a valid encoding (it should be 20%25 as %25 is the URI encoded value of %).

You can easily replicate this issue by opening up the console window of the developer tools and running the following to create a test cookie:

1document.cookie = 'Test=20%; path=/';

With this test cookie in place, any attempt to navigate to a Modern page (such as a list/library or site contents page) will fail as the code in the spfiles-[hash].js file will throw an error when it attempts to parse the cookie with the result being that the entire page will fail to render. To fix the error simply delete the offending cookie, or clear all cookies if you’re unsure which one is causing the issue. Microsoft could easily solve this issue by simply wrapping the decodeURIComponent() call within a try/catch and not making an assumption about the data but, in the meantime, the lesson learned for anyone doing development with SharePoint Online is that you can’t always trust that Microsoft’s code will play nicely with your code so it’s important to test thoroughly.

SharePoint Online customizations can be frustrating and overwhelming with all the various options available (Add-Ins, SharePoint Framework, Custom Actions, etc.) – if you’re having trouble with your SharePoint customizations or just don’t know where or how to start contact us at Aptillon and we’ll help you to get your project moving in the right direction!