Create Custom iFrame Card that Strips X-Frame-Options

This may be the wrong place to post this, if so, let me know and/or the mods can move it where it needs to be.

I have been trying to find a way to view my Google Shopping List along side my HA interface, as I know several others have been wanting. Google doesn’t provide an API for this service and blocks the rendering of their pages in an iframe. I have found several Google Chrome Extensions that allow the x-frame-options to be stripped from the google pages, and allows them to display correctly. I’ve tested in Chrome with my shopping list in an iframe and it works!

Here’s where I’m asking for help. I don’t have enough knowledge to do it myself, but I think it seems feasible to create either a custom component or a custom lovelace card that would use javascript similar to what is used by the Chrome extensions to properly display the page for HA. I am more than happy to team up with someone to work on this, but I only have general knowledge of how custom code works.

Any help and feedback is appreciated!

1 Like

An idea for a Custom Component that would strip the x-frame-options could be similar to this: https://medium.com/@alexcambose/bypassing-x-frame-options-4934dd852618 It requests the page then reserves it without the x-frame-options in the header.

Edit: Nevermind this, it doesn’t allow for cookies or authentication to pass back to the origin.

1 Like