Security error when loaded within a nested iframe

[swaroopsm]

Firstly, thanks for this amazing library 🙇!

📝 Summary:
I currently use this in one of our products and recently discovered an issue when our web app was rendered within a nested iframe (by one of our customers). And when the user tries to start the tour, they get the following error:

Uncaught (in promise) SecurityError: Failed to read a named property 'frameElement' from 'Window': Blocked a frame with origin "https://www.shepherdjs.dev" from accessing a cross-origin frame.

I was able to reproduce this error by also embedding: https://www.shepherdjs.dev/ within a nested iframe

📸 Screenshot of the error

🕵️ Steps to reproduce:

• Create 2 .html pages (e.g.: index.html and shepherd.html)
• Make sure these pages are accessible via localhost:<port>
• In index.html, add an <iframe src="http://localhost:<port>/shepherd.html" />
• In shepherd.html, add an <iframe src="https://www.shepherdjs.dev/" />
• Try clicking on the "Demo" , the tour doesn't start and it errors out with the mentioned iframe security error on the browser console.

When I investigated the code, it seems like it was caused by an issue here and in general the browsers block to frames due to the Same-origin policy.

Would highly appreciate if any of you folks can help and add pointers to solve this. Thanks 🙏