15
Views
1
Comments
iFrame web with custom add Header

Today I realize that in OutSystems it very difficult to add header value for iframe a website. I've a problem with that because I've study case :
I want to iFrame a website to my app but when accessing that website, I need to add a custom header like token access to the header. I don't have any solutions to this problem.

are there any solutions to my issue?

Rank: #17146

Hello Ryan, 


Do you know how to add an header to an iframe using AJAX requests ?

First of all you need to include the iframe in your page (you can use it inside an expression changing the "escape content" property to NO):

<iframe id='myIframe' src=""></iframe> 


Then you run your request with javascript code, replacing <iframe-url> for your target URL and adding your headers to the array, in this case i added 'x-api-version' with a value of 'v1.2':


var myIframe = document.querySelector('#myIframe');
var myURL= '<iframe-url>'

populateIframe(myIframe, myURL, [['x-api-version', 'v1.2']]);

function populateIframe(iframe, url, headers) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onreadystatechange = handler;
  xhr.responseType = 'blob';
  headers.forEach(function(header) {
    xhr.setRequestHeader(header[0], header[1]);
  });
  xhr.send();

  function handler() {
    if (this.readyState === this.DONE) {
      if (this.status === 200) {
        iframe.src = URL.createObjectURL(this.response);
      } else {
        console.error('Request failed', this);
      }
    }
  }
}


Cheers,

JD