Using your Dynamics 365 portal in an iframe

There might be certain scenarios where you want to utilize certain parts of Dynamics 365 portals functionality within other applications. Most often this is where another content management system (CMS) is already in place but you want to enhance its abilities and add new functions that work with your CRM. Instead of writing customizations in that CMS it can be easy to configure your desired functionality with the out of box functionality of Dynamics 365 portals.

With Dynamics 365 portals through you might run into a issue with embedding the site in an iframe. If trying to embedding your portal in an iframe you will end up with a blank frame. Opening up Chrome’s developer tools and view the console you will notice the following error providing a hint as to the issue.

Refused to display 'https://mps155013.microsoftcrmportals.com' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

X-Frame-Options is part of the HTTP response header and can be used by the web server to control who can display your content directly in an iframe. This is important if you want to prevent any sort of embeds of your site as well as limit it to an allowed list of sites. You can read more about X-Frame-Options on the Morilla Developer Network Documentation.

The following are the X-Frame-Options directive options:

  • DENY – blocks all iframe requests
  • SAMEORIGIN – allows iframe’s from the origin site
  • ALLOW-FROM https://example.com/ – allows iframe’s from the URL

You can manipulate the X-Frame-Options of your Dynamics 365 portal through the site setting HTTP/X-Frame-Options, inserting in the value one of the options above. New portals should include the setting by default in all portals with the default value set to SAMEORIGIN. If you do not have the site setting from an older portal that has upgraded, you can add it but it requires the supporting portal code version (v8.2).

Some other considerations when embedding your portal will also be the display of the page. Most likely the site your embedding into will already have a header with navigation and also a footer, so it might not make sense to include these type of components on the pages your iframe will display.

You can handle this in various ways with the portal, either through simply putting some CSS only on iframe pages that hide elements, keep in mind that the Bootstrap CSS uses the width of your frame and not the parent window so you may be in a mobile layout inside the iframe. Another option is to use the Page Template with the Use Website Header and Footer when using the Web Template type. Leaving this option set to false will only render the contents of the liquid template, it will leave out all portal scaffolding like Bootstrap CSS, and JavaScript libraries. If you need those type of components you will need to add them back through your own references in your web template. The web template option is great for data display type options, if you want to use entity form or list then you will require that portal scaffolding for those components to work.

usewebsiteheaderfooter

There is a hidden rewrite template that does not have a header or footer you can use if your only need is an entity form. Create a new page template with the type Rewrite and set the Rewrite Url to ~/Areas/Portal/Pages/Form.aspx. This page template is used by entity list to display modal dialog forms for entity list create and edit functions. This page template if you look at the v7 code only contains an entity form control and sets the content controls for header and footer to blank, it does not even include the page copy.

norewrite

Based on the functions you want to accomplish and the security you require for the content in your iframe you will need to select the best method for displaying your page.