Medium Feed

 

Saturday, December 12, 2020

Custom HTTP interceptor hook to Intercept Iframe Window HTTP requests from Parent Window in Angular

 As we all know, angular provides a default HTTP Interceptor as part of angular HTTP module. We can use this interceptor to intercept the HTTP requests. But this has a limitation of intercepting HTTP calls only from the current window object. 

Recently I had a requirement to intercept the HTTP requests triggered from Iframe window object and add the intercept values from parent object. We tried with default angular HTTP interceptor object, as I initially expected it did not work. Because the default HTTP interceptor does not provide provision to intercept the iframe window object. 

Hence, I've written a quick hook using JavaScript which will intercept all the HTTPRequests triggered from the Iframe object.  

This will be a hook within the XMLHTTPRequest open object and the hook will stay permanent in the iframe object until the iframe window object itself completely destroyed. 

Here is the custom hook you can add in your parent window object. You just have to inject the interceptor in the iframe load event.



5 comments:

  1. Hello.
    You created an outstanding code.I'm glad to finaly find this code,because I was searching ideas like the code for long time.
    I have a question about the code. Can I ask you?
    Isn't the code subject to restrictions of the same domain policy?

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Can you share a similar solution for react+typescript? Thank you! -

    ReplyDelete
  4. Sorry for my missing understanding, but what is the "setRequestHeader()" function look like, to set the header to a request I need the request, how do I get it?

    ReplyDelete