Unsupported iframe urls in Sitecore page editor mode

I was working with Sitecore 6.5 when I ran into this issue with a client application.

If the Html (in a rich text field in this case) had an embedded iframe with a youtube url or a flickr slideshow, trying to perform any action on the page in page editor mode / preview mode would result in a javascript error, as in no save, no publish, nothing!

2014-05-25_155557

I saw the error:

Uncaught SecurityError: Blocked a frame with origin “http://mysite-local.com” from accessing a frame with origin “https://www.youtube.com“. The frame requesting access has a protocol of “http”, the frame being accessed has a protocol of “https”. Protocols must match.

This occurred even though I was accessing my site using http, and i tried accessing the youtube URL

  • specifically with http
  • without any protocol – which ideally means it should match the current browser url protocol.

But the issue persisted.

Here’s how we got around it:

The content author will need to add these potential iframe tags as anchor tags in the rich text field. These anchor tags could mandate a special attribute which would be the indicator for this custom code to trigger and transform the marked anchor tags into iframes only when the page mode is normal. (FYI, This js issue will also interfere with the ‘preview’ mode)

The content author will now enter this:

2014-05-25_155746

  • Add a processor in the <renderField> pipeline (Web.Config)

<processor type="MySite.RenderExternalLinks, MySite" />

  • For the condition when page mode is normal – search for all anchor tags within the rtf and if the special attribute to indicate transform is present, replace this with an iframe tag. You can you ‘data-‘ attributes to allow the content author to add additional attributes which will be applicable to the rendered iframe tag.

public class RenderExternalLinks
 {
 public void Process(RenderFieldArgs args)
 {
 Assert.ArgumentNotNull(args, "args");
 Assert.ArgumentNotNull(args.FieldTypeKey, "args.FieldTypeKey");

 if (args.FieldTypeKey != "rich text"
 || String.IsNullOrEmpty(args.FieldValue)
 || !Context.PageMode.IsNormal)
 return;

 // Load the HTML into the HtmlAgilityPack
 var doc = new HtmlDocument { OptionWriteEmptyNodes = true };
 doc.LoadHtml(args.Result.FirstPart);

 // Search for all links
 var aTag = doc.DocumentNode.SelectNodes("//a");
 if (aTag == null || aTag.Count == 0)
 return;

 foreach (HtmlNode node in aTag)
 {
 // Look for links to YouTube
 if (node.Attributes["href"] != null && node.Attributes["data-transform"] != null && node.ParentNode != null
 && (node.Attributes["href"].Value.Contains("youtube.com") || node.Attributes["href"].Value.Contains("flickr.com")))
 {
 node.ParentNode.InnerHtml
 = node.ParentNode.InnerHtml.Replace(node.OuterHtml,
 "");
 }
 }
 // Replace the Rich Text content with the modified content
 args.Result.FirstPart = doc.DocumentNode.OuterHtml;
 }
 }

So now the content author can made all the settings needed using the anchor tag and this will get rendered as the intended iframe tag in normal mode.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s