Cross-Origin blocking on forms using dropkick

[ultimaustin]

Version of Dropkick:

2.1.8

Expected Behavior

When we iframe a form into another page on a different site (two distinct domains) we expect the form to load correctly regardless of whether we are invoking dropkick on the select elements in the form.

Actual Behavior

What we see is that where the form uses dropkick we see cross-origin frame blocking (testing in chrome). Removing dropkick and allowing the select lists to operate natively eliminates the x-origin errors.

This is the error we see in chrome:

Uncaught DOMException: Blocked a frame with origin "http://localhost:7495" from accessing a cross-origin frame.

Steps To Reproduce:

1. Host a form which uses dropkick. Example: https://streamstaging.loop.jobs/Form/Widget?formid=262&cd=demo.loop.jobs
2. Try to load that form in an iframe on a different site (different domain)
3. Inspect console for errors.

JSBin / Example repo / Failing test:

Put this tag in a vanilla web app degugging session. I tried doing the same in your code pen but other cross-domain issues obfuscate the real error there.

<iframe align="middle" frameborder="0" height="450" scrolling="yes" src="https://streamstaging.loop.jobs/Form/Widget/Testing?cd=demo.loop.jobs" width="100%" style="border:2px solid grey; height:500px; width:650px"></iframe>

[kmgdevelopment]

I'm having this issue as well. If Dropkick is included in an iframe's source then loaded on a page with a different origin then I get that cross-origin console error.

What's weird is that on my form one select field is hidden by default and one is visible. When the iframe loads, the visible field is correctly styled with Dropkick but the hidden field is not. However when loading the iframe URL directly in the browser both visible and hidden selects are styled with Dropkick.