How to Use HTML Field Security and Insert Iframes into SharePoint 2013 Sites

One of the best things about SharePoint 2013 is the new and improved Web Content Management (WCM) tools.  One of these new tools, HTML Field Security, allows you to insert an iframe tag into a site page as well as control the source of its content.  In this article, we will introduce you to the HTML Field Security feature, as well as walk you through some of its common functionalities.

Set available iframe source(s):

To begin, log into SharePoint 2013. Click the Page tab from the Ribbon. From there, click on the Settings icon at the upper right and select Site settings. Under Site Collection Administration select the HTML Field Security link:

Once you have reached the HTML Field Security page, you will have three options (below).  Select the option which is applicable to your organization’s policies and procedures and click OK.

1. Do not permit contributors to insert iframes from external domains into pages on this site.

2. Permit contributors to insert iframes from any external domain into pages on this site.

3. Permit contributors to insert iframes from the following list of external domains into pages on this site.

Add an iframe to your page:

In order to add an iframe to a page, click on the Settings icon and select Edit Page:

On the Edit Page Ribbon, select Edit Source:

If you selected Option #1 (Do not permit contributors to insert iframes from external domains into pages on this site):

  • A popup page will appear to which you can enter your iframe. For this example, we will try inserting an iframe from Youtube, as pictured below:

  • Click the OK button. You will notice that an announcement has appeared, informing you that you cannot insert the iframe on the page:

 

  • When you go back to Edit Source, you will notice that your iframe has not been inserted. Additionally, you will see a popup informing you of this.

If you selected Option #2 (Permit contributors to insert iframes from any external domain into pages on this site):

Follow the instructions above for Option #1.  Since you are permitted with Option #2 to insert iframes from any external domain, rather than a warning message, you will see the iframe on your Site page.

If you selected Option #3 (Permit contributors to insert iframes from the following list of external domains into pages on this site):

Option #3, though similar to Option #2, has a caveat: you can only insert iframes from a pre-qualified list of external domains:

  • To insert iframes onto the page, click Edit Source as you did above in Option #1, and embed the code for the iframe you will be adding. For this example, we are using the following code:

<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/VL0sD0Iyjzo” frameborder=”0″></iframe>

  • Click OK:
  • Click the Save button on the right corner of your site. Your video will be pictured on your site as shown below: