Is it possible to add Request Headers to an iframe src request?

by

You can make the request in javascript, setting any headers you’d like. Then you can URL.createObjectURL(), to get something suitable for the src of the iframe.

var xhr = new XMLHttpRequest();

xhr.open('GET', 'page.html');
xhr.onreadystatechange = handler;
xhr.responseType="blob";
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.send();

function handler() {
  if (this.readyState === this.DONE) {
    if (this.status === 200) {
      // this.response is a Blob, because we set responseType above
      var data_url = URL.createObjectURL(this.response);
      document.querySelector('#output-frame-id').src = data_url;
    } else {
      console.error('no pdf :(');
    }
  }
}

The MIME type of the response is preserved. So if you get an html response, the html will show in the iframe. If you requested a pdf, the browser pdf viewer will kick in for the iframe.

If this is part of a long-lived client-side app, you may want to use URL.revokeObjectURL() to avoid memory leaks.

The object URLs are also pretty interesting. They’re of the form blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170. You can actually open them in a new tab and see the response, and they’re discarded when the context that created them is closed.

Here’s a full example: https://github.com/courajs/pdf-poc

More Related Contents:

  1. Get element from within an iFrame
  2. Calling a parent window function from an iframe
  3. How to communicate between iframe and the parent site?
  4. How to access parent Iframe from JavaScript
  5. Redirect parent window from an iframe action
  6. Javascript callback when IFRAME is finished loading?
  7. HTTP status code 401 even though I’m sending credentials in the request
  8. How do I print an IFrame from javascript in Safari/Chrome
  9. make iframe height dynamic based on content inside- JQUERY/Javascript
  10. What’s the best way to reload / refresh an iframe?
  11. Add click event to iframe
  12. Get value of input field inside an iframe
  13. Unsafe JavaScript attempt to access frame in Google Chrome
  14. How to move an iFrame in the DOM without losing its state?
  15. Understanding Cross-Domain issue in Iframes
  16. Nested iframes, AKA Iframe Inception
  17. Detect mousemove when over an iframe?
  18. ‘load’ event not firing when iframe is loaded in Chrome
  19. Is there a way to change context to iframe in javascript console?
  20. Stop all playing iframe videos on click a link javascript
  21. Access child iFrame DOM from parent page
  22. Insert content into iFrame
  23. QuerySelector for Web Elements Inside iframe
  24. How can I handle errors in loading an iframe?
  25. Resize external website content to fit iFrame width
  26. Cross sub domain iframes and JavaScript
  27. Stopping a iframe from loading a page using javascript
  28. Why won’t this JavaScript (using document.open and document.write) work in Internet Explorer or Opera?
  29. iframe not reading cookies in Chrome
  30. iframe inside angular2 component, Property ‘contentWindow’ does not exist on type ‘HTMLElement’

Leave a Comment