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.

9 thoughts on “Using your Dynamics 365 portal in an iframe”

  1. I agree with Nick: great post.

    Just two questions, as part of a customer portal,
    1. If my CMS already contains an identification (login, password), how to use this token to access only the information of this client within an iframe for example?
    2. Is it possible to use the 365 Portal ID to replace my CMS ID?

    1. Sharing authentication between the frames could be a little complicated. The most ideal solution would be to use a common STS (Secure Token Service – like Azure B2C or IdentityServer) with both CMS. With the STS the identity store is external from both systems and it would allow you to share to other applications too. You could just extend the profile in each individual application and sync with a backend process if necessary, or share common profile data through claims and also include common unique ID that would be included in the STS token.

      Other solutions would be to use one systems native auth but it might be hard trying to read a common cookie without code access in v8.x, you would be able to read your other CMS cookie in JS but this has potential for you to reveal your encryption key. Setting a common cookie was possible in v7.0.0018+ because of the ASP.NET Identity site settings, but they have been removed in v8.x. Also decrypting the cookie from v8.x would be difficult as you won’t know the machine key that is used to encrypt cookies.

  2. Hi Colin, How to manipulate the X-Frame-Options under Dynamics 365 portal, I could not find the setting anywhere? Thanks!

    1. The setting is found under the CRM navigation – Portals > Site Settings and the setting name “HTTP/X-Frame-Options”, if it does not already exist then create a new site setting with that name and your desired value.

  3. Hi

    After manipulating , X-Frame-Options , still we are getting “Access Denied” issue in Iframe, Could you please explain further.

  4. Hi Colin,
    Thanks for this helpful post.
    I configured the portal to run inside an iFrame, and it is working well. However some of links (HTML a elements) have attribute target =”_top” and when clicked change the top location to the portal url and exiting from the parent site.
    Do you know if it is possible to disable this behaviour with portal configuration. I can have JavaScript to change the attribute target to _self, but I have other issues …
    Thank you.

    1. Hi Lahcen, you should be able to override most of the HTML functionality by creating your own Liquid templates where you can write the HTML how your requirements need implemented. Alteratively if you just want easy coverage without going through all HTML then as you suggest a quick JavaScript/jQuery function to do a replace of “_top” to “_self” would work as well.

      Colin

Leave a Reply

Your email address will not be published. Required fields are marked *