Content Security Policy interaction with Forms

[bensom0]

Hello everybody, 

I got a responsiveness issue when trying to implement the Forms-link into an iframe in my .html file. When declaring the content security policy through the frame-src tag with my respective link provided by Forms the implementation works just fine, but once the site triggers the media query for the mobile version the Forms iframe stops being responsive . What could the issue be? I assume the content security policy restricts some resource needed for the proper implementation of Forms but that specific resource is not fetched via the Forms-link and instead needs to be retrieved from somewhere else. 

Thank you in advance. 

[#2 · Accepted solution]

Hi @bensom0,

The issue you are facing is likely caused by the fact that the Forms iframe is attempting to load resources that are not explicitly allowed by the Content Security Policy (CSP). The CSP is a security feature that helps to protect your website from malicious code by restricting the types of resources that can be loaded.

When you declare the CSP through the frame-src tag, you are explicitly allowing the Forms iframe to load resources from the Forms domain. However, once the site triggers the media query for the mobile version, the Forms iframe may attempt to load resources from other domains, such as the Microsoft Office domain. If these domains are not explicitly allowed in the CSP, then the Forms iframe will not be able to load the resources and will not be displayed properly.

To fix this issue, you need to explicitly allow the Forms iframe to load resources from all of the domains that it needs to access. You can do this by adding the following domains to the frame-src tag in your CSP:

frame-src https://*.microsoft.com https://*.forms.office.com

This will allow the Forms iframe to load resources from all of the domains that it needs to access, regardless of whether the site is in desktop or mobile mode.

Here are some links to resources on CSP:

• Content Security Policy (CSP) Reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
• Content Security Policy (CSP) Cheat Sheet: https://scotthelme.co.uk/csp-cheat-sheet/)
• How to Use Content Security Policy (CSP) to Protect Your Website: https://m.youtube.com/watch?v=pBKB4wsQK48)

Please click Mark as Best Response & Like if my post helped you to solve your issue.
This will help others to find the correct solution easily. It also closes the item.

If the post was useful in other ways, please consider giving it Like.

Kindest regards,

Leon Pavesic

[#3]

Hi Leon,
thank you very much for your outstandingly helpful reply.

Best Regards,
bensom0