Sivarajan's Blog

SharePoint | Office 365 | Azure | JavaScript

How to customize the SharePoint 2013 Master Page for Anonymous Users

We may have a situation to use the same master page for both authenticated and unauthenticated (anonymous) users. In that case, we will see here how to customize the SharePoint master pages for anonymous users.

Why should we customize the Master page for Anonymous Users?

Anonymous users normally will view the site contents and they will not do any CRUD operations in publishing portal.  So we can try to eliminate the SharePoint CRUD options related stuffs like scripts (SP.js, Core.js, SP.Ribbon.js) and server side controls whenever possible.

In many of the SharePoint internet portal, we are simply hide the ribbons and SharePoint related stuffs if the request from anonymous users. We will not worry about server side / client side page rendering and browser response size. So we will load unwanted scripts and html contents for each page requests.

Unauthenticated Vs. Authenticated Comparison

For this walk through, I have used the starter master page which is available for downloading from CodePlex and also this is not a mandatory always. And you can try with default SharePoint master pages either Seattle or Oslo. You can see here the final output of the anonymous and authenticated users screen views.

Anonymous User View

SharePoint-Anonymous-master-2

Authenticated User View

SharePoint-Anonymous-master-1 

Benchmark data from chrome developer console

  Default master page Trimmed Master Page
Total number of requests 16 4
Total page response time 425 ms 76 ms
Total contents transferred 28.9 KB 6.6 KB

 

 

How to customize?

I have seen few blog posts on eliminate the JavaScript files on each page response at server side in different approach. But I think that we can use the SPSecurityTrimmedControl for eliminating unwanted scripts / controls using the property called AuthenticationRestrictions. The AuthenticationRestrictions enum will have the three values AllUsers, AuthenticatedUsersOnly and AnonymousUserOnly.

Based on our requirements, we can customize our master page using AuthenticatedUsersOnly or AnonymousUsersOnly enum value.

Here I am not going to explain all the steps. You can download the customized master page at end of this post.

Like that, if you want to customize the master page based on SharePoint group, we need to override the SPSecurityTrimmedControl. You can find the details on how to override the SPSecurityTrimmedControl here.

How to remove the Scripts?

We can apply the SPSecurityTrimmedControl for the following area if we do not need any SP.js or Core.js related scripts file for anonymous users.

 

<!-- ===== STARTER: SP Scripts and CSS  =========================================================================================== -->
        <SharePoint:SPSecurityTrimmedControlID="SPSecurityTrimmedControl1"runat="server"AuthenticationRestrictions="AuthenticatedUsersOnly">
            <SharePoint:StartScriptID="StartScript1"runat="server"/>
            <SharePoint:CssLinkID="CssLink1"runat="server"Version="15"/>
            <SharePoint:CacheManifestLinkID="CacheManifestLink1"runat="server"/>
            <SharePoint:PageRenderModeID="PageRenderMode1"runat="server"RenderModeType="Standard"/>
            <SharePoint:ScriptLinkID="ScriptLink1"Language="javascript"Name="core.js"OnDemand="true"runat="server"Localizable="false"/>
            <SharePoint:ScriptLinkID="ScriptLink2"Language="javascript"Name="menu.js"OnDemand="true"runat="server"Localizable="false"/>
            <SharePoint:ScriptLinkID="ScriptLink3"Language="javascript"Name="callout.js"OnDemand="true"runat="server"Localizable="false"/>
            <SharePoint:ScriptLinkID="ScriptLink4"Language="javascript"Name="sharing.js"OnDemand="true"runat="server"Localizable="false"/>
            <SharePoint:ScriptLinkID="ScriptLink5"Language="javascript"Name="suitelinks.js"OnDemand="true"runat="server"Localizable="false"/>
            <SharePoint:CustomJSUrlID="CustomJSUrl1"runat="server"/>
            <SharePoint:SoapDiscoveryLinkID="SoapDiscoveryLink1"runat="server"/>
            
            <!-- ===== STARTER: Additional header placeholder - overridden by asp:content on pages or page layouts  =========================== -->
            <asp:ContentPlaceHolderID="PlaceHolderAdditionalPageHead"runat="server"/>
            <SharePoint:DelegateControlID="DelegateControl1"runat="server"ControlId="AdditionalPageHead"AllowMultipleControls="true"/>

            <!-- ===== STARTER: Core SharePoint CSS =========================================================================================== -->
            <SharePoint:CssRegistrationID="CssRegistration1"Name="Themable/corev15.css"runat="server"/>
        </SharePoint:SPSecurityTrimmedControl>

 

How to Remove the SharePoint Controls?

We can apply the same SPSecurityTrimmedControl for the following area if we do not need any SharePoint title, Navigations and Ribbon bars for anonymous users.

<SharePoint:SPSecurityTrimmedControlID="SPSecurityTrimmedControl4"runat="server"AuthenticationRestrictions="AuthenticatedUsersOnly">
                                <divid="s4-titlerow">

                                    <!-- ===== STARTER: Site Logo with link to root ======================================================================= -->
                                    <divclass="ms-dialogHidden">
                                        <SharePoint:SPLinkButtonID="SPLinkButton1"runat="server"NavigateUrl="~sitecollection/">
                                            <SharePoint:SiteLogoImageID="x63829de2201a4365a3904788f682d0a3"LogoImageUrl="&lt;% $SPUrl:~sitecollection/_layouts/15/vintage/logo.png %&gt;"AlternateText="Back to Home"runat="server"/>
                                        </SharePoint:SPLinkButton>
                                    </div>

 

Any script errors?

Yes. I got the two errors in the final outputs. SharePoint farm will emit the two JavaScript method calls (ExecuteOrDelayUntilScriptLoaded and removeAllStatus). To avoid these two errors, either we should reference SP.js or can eliminate the SharePointForm tag from master page.  But the form tag is mandatory for SharePoint controls and WebParts rendering. So I added the two dummy methods in the master page and it will be rendered only if the request from anonymous users.

<SharePoint:SPSecurityTrimmedControlID="SPSecurityTrimmedControl2"runat="server"AuthenticationRestrictions="AnonymousUsersOnly">
            <SharePoint:ScriptBlockID="ScriptBlock1"runat="server">
                function ExecuteOrDelayUntilScriptLoaded(){}

                function removeAllStatus(){}
            </SharePoint:ScriptBlock>
        </SharePoint:SPSecurityTrimmedControl>

 

Summary

After customize the unwanted scripts / server side controls, we can apply the required Web Application frameworks like AngularJs, KnockockJs or Bootstrap and also custom CSS. You can download the completely customized master page here.

Download Source

Comments (4) -

  • David Lozzi

    10/22/2013 5:07:32 AM | Reply

    Great post, spot on. I did a comparison of the Oslo and Seattle master pages, davidlozzi.com/.../, which proved that Microsoft uses the very same techniques in Oslo to make it a more friendly page for anonymous users.

    Happy SharePointing!!
    David

  • Sivarajan Raju

    10/23/2013 5:43:29 AM | Reply

    Hi David,

    Thanks for your valuable comment and I will do the comparison with Oslo master page and update soon.

    Regards,
    Siva

  • Balakrishnan

    10/29/2013 5:04:22 AM | Reply

    Great post and please create more articles like this... Smile

  • Balakrishnan

    10/31/2013 11:41:35 PM | Reply

    Hi Siva,

    I have tried this in Oslo and Seattle master page and the permission validation is not working as intended ( shows anonymous block to the authenticated users ) and works fine with layout application pages.

    However it works fine with the starter master page (from codeplex link in your article ).

    Can you also check and let me know.

Add comment

Loading