Power Pages Iframes

Welcome to the wild world of Power Pages sites and low-code web design. Just like the rest of the Power Platform products, it democratizes IT development and brings more people to the web design journey. Many flexible components exist, like the embedding of videos or Iframes. But does it always go to plan? Absolutely no. Sometimes, it is a rollercoaster.

Sometimes, you may bump into an issue when embedding a website. An unknown, 404-like, error message pops up. And you are sitting there wondering if your site is having a hangover moment. You are NOT allowed to this Iframe party. Hmm…

The Problem

Just by getting this error screen in your site design page with no explanations is hard. Especially if the previous Iframe went down smoothly. In this example, the left-hand side is an AccuWeather page, whilst the right hand site is the URL of a YouTube video. This got double confusing as YouTube videos have embed links, so surely that generally means it is ok to embed? Sorta, let’s unpick this.

First line of defense: Inspection

Just like with any website misbehaving, let’s right click and Inspect the code. Then, click on Issues and scroll down to the Security area. You will see eventually the error message “Content Security Policy blocks inline execution of scripts and stylesheets”

What does this even mean?

Content Security Policy (CSP) is a crucial security feature for web applications with various benefits.

1. By setting your CSP policy, you can define which domains or content sources are allowed e.g. scripts or images, to prevent malicious scripts from executing or someone impersonating your site. These are known as Cross-Site Scripting attacks (XSS).

2. This can also help with data leakage e.g. cookies or user info by restricting the domains from which resources can be loaded. Ultimately, you can avoid such sensitive data from being leaked to unauthorized third-party domains.

3. Modern browsers enforce these policies by blocking such unsafe inline scripts from executing. You can configure CSP to report violations to a specified endpoint (e.g., a logging server). This can help you identify issues, fine-tune your policy, and remain on top of potential threats.
   

One big caveat

While CSP provides significant security benefits, it requires careful configuration to avoid breaking legitimate functionality on your site. Regular testing and monitoring are essential to maintain a robust CSP policy.

Help, what can I do?

• One way is to disable custom errors (yes, that blanket message is!). This will help you avoid seeing that blanket error message and having to think about inspecting the code. To do that for your site:

1. Open the Power Platform admin center

2. Under the Resources section, select Power Pages sites

3. Click on your website

4. From the Site Actions menu, select Disable custom errors

5. Click Disable to confirm

• In this YouTube video situation, instead of taking the URL directly from the site:

1. Click on the Share option.

2. Click on Embed.

3. Take the src attribute which specifies the address of the external file to embed. Essentially, take what is in the first quotes after src, and THAT is the URL you want.

4. Paste it in your Iframe component.

• Now the weird path starts. Once you paste, you see the screen has changed from random grey error screen to a black one with some funky looking description. No, it will NOT be all Greek to you, I just happen to have a Greek YouTube account. Does not matter though, just ignore the message and preview.
  

• Once you click Preview and your website has saved, click on Desktop.
  

• Like magic, the video has now appeared!