How to Show IFRAME in New Creatio V 8.3.1

Hi, 

I've not yet tried this in 8.3.1, so not sure if there are changes in that version that would break anything. However, if you view the browser console, are there any error messages related to the iframe?

Ryan

Hello Ryan Farley,

No there is no Error message in Browser console.

from what I was able to figure out using console.log()  "_loadFrame()" Function seems to be called when the page is loading. So, the component is being called, but it seems for some reason it is not being rendered or added by creatio. (as not able to find it in elements tab as well).

Thank you !! 

The code for the IFRAME in the customerfx.com article does still work in 8.3.1. The issue is that the Creatio content security policy is blocking the external resource from loading. In previous versions, the content security policy was set to log violations only. It seems that in 8.3.1 it is now set to block unless it is a trusted url. 

You have two options: 

Option 1: Add the URL you're loading in the IFRAME to the content security policy trusted list. To do this, click gear icon, go to Content Security Policy, add URL on trusted sources tab, then log out/in.

Option 2: Change the content security policy off or back to warn only. To do this, go to system settings, locate the setting for "Content security mode" (code CspMode) and change to either "Log violations of content security policies" or "Disable content security", then log out/in.

Ryan

Hello Ryan Farley,

Thanks for reply

I had added the url in Content Security Policy before, It is added with below directives



Is this correct or do we need to add anything else. in my case I believe the IFRAME is not loaded runtime at all.

Below is the source of Frame module:

// jshint esversion: 11
define("FrameComponent", ["@creatio-devkit/common"], function (sdk) {
   class FrameComponent extends HTMLElement {
       constructor() {
           super();
           this._dom = this.attachShadow({ mode: 'open' });
           this._frameConfig = {};
           // Add a stylesheet to the shadow DOM for default styling
           const style = document.createElement('style');
           style.textContent = `
               :host {
                   display: block;
                   height: 100%;
                   width: 100%;
                    font-family: 'Montserrat', sans-serif;
               }
               iframe {
                   display: block;
                   border: none;
               }
           `;
           this._dom.appendChild(style);
       }
       get src() {
           return this._frameConfig.src;
       }
       set src(value) {
           this.frameConfig = { ...this._frameConfig, src: value };
       }
       get frameConfig() {
           return this._frameConfig;
       }
       set frameConfig(value) {
           this._frameConfig = { ...value };
           // Apply defaults
           this._frameConfig.src = this._frameConfig.src || '';
           this._frameConfig.height = this._frameConfig.height || '100%';
           this._frameConfig.width = this._frameConfig.width || '100%';
           this._frameConfig.sandbox = this._frameConfig.sandbox || 'allow-scripts';
           this._frameConfig.loading = this._frameConfig.loading || 'lazy';
           this._frameConfig.referrerPolicy = this._frameConfig.referrerPolicy || 'no-referrer-when-downgrade';
           // Allow custom element sizing to be overridden via frameConfig
           this.style.height = this._frameConfig.containerHeight || '100%';
           this.style.width = this._frameConfig.containerWidth || '100%';
           // Build iframe style
           this._frameConfig.style = `height: ${this._frameConfig.height};width: ${this._frameConfig.width};${this._frameConfig.style || ''}`;
           if (!this._frameConfig.border) {
               this._frameConfig.style += 'border: none;';
           }
           if (typeof this._frameConfig.src !== 'string' || !/^https?:\/\//i.test(this._frameConfig.src)) {
               this._showError(this._frameConfig.src);
               return;
           }
           this._loadFrame();
       }
       _loadFrame() {
           console.log("Loading iframe with src:", this._frameConfig.src);
           const iframe = document.createElement('iframe');
           iframe.src = this._frameConfig.src;
           iframe.style.cssText = this._frameConfig.style;
           iframe.sandbox = this._frameConfig.sandbox;
           iframe.allowFullscreen = this._frameConfig.allowFullscreen !== false;
           iframe.loading = this._frameConfig.loading;
           iframe.referrerPolicy = this._frameConfig.referrerPolicy;
           this._dom.innerHTML = ''; // Clear previous content (except stylesheet)
           this._dom.appendChild(iframe);
       }
       _showError(message) {
           const cleanMessage = message.replace(/^Error:\s*/i, '');
           const div = document.createElement('div');
           div.style.cssText = `
               display: flex;
               align-items: center;
               font-family: 'Montserrat', sans-serif;
               justify-content: center;
               color: #004fd6;
               font-size: 16px;
               font-weight: bold;
               text-align: center;
               height: 100%;
               width: 100%;
               border: 2px solid #004fd6;
               border-radius: 6px;
               box-sizing: border-box;
           `;
           div.textContent = cleanMessage;
           this._dom.innerHTML = ''; // Clear previous content (except stylesheet)
           this._dom.appendChild(div);
       }
   }
   customElements.define('usr-frame-component', FrameComponent);
   sdk.registerViewElement({
       type: 'usr.FrameComponent',
       selector: 'usr-frame-component',
       inputs: {
           frameConfig: {},
           src: {}
       }
   });
   return FrameComponent;
});

Let me know your thoughts about this.

Thank you !! 

If the IFRAME isn't getting loaded at runtime, it would have to be the CSP. Try turning it off in settings to verify it's loading, then work back from there?

Hello Ryan Farley,

Thanks for the response

I turned off the CSP from system settings as suggested but the result is same.

Is it possible that even though the component is showing in the Design panel. It is not attaching runtime?

Madhav Patel,

Not sure. I didn't go through the code completely that you're using for the component, but the code from my article does work for me, so maybe start with that and add in the changes to see what breaks it.