I am facing an issue with a Vue component that includes an IFrame. The component is responsible for making API calls, utilizing a Vuex store, to retrieve information for a Single Sign-On (SSO) process that will be loaded within the IFrame. Interestingly, upon the initial mount of the component, the SSO loads successfully in the IFrame. However, when I navigate to another screen and the component remounts, the SSO ends up loading in a new tab instead. Oddly enough, if I move to yet another screen, the SSO loads correctly again. This abnormal behavior only occurs in Safari and functions as expected in other browsers.
It's worth mentioning that my code structure closely resembles this example, although certain sections have been altered due to confidentiality reasons.
<template>
<div>
<form
:action="endPoint"
target="the_iframe"
ref="ssoForm"
method="POST"
name="ssoForm"
id="ssoForm"
>
<input
id="AuthCode"
type="hidden"
name="AuthCode"
:value="authorizationCode"
/>
<input
id="AuthAppUrl"
type="hidden"
name="AuthAppUrl"
:value="authAppUrl"
/>
</form>
<iframe
width="100%"
name="the_iframe"
height="300"
style="display: flex"
id="the_iframe"
frameborder="0"
></iframe>
</div>
</template>
<script>
import types from "path/to/types"
export default {
data() {
return {
endPoint: null,
authorizationCode: null,
authAppUrl: null,
errorStatus: false,
error: null
}
},
methods: {
async getSSOModel() {
try {
var data = await this.$store.dispatch(
`store/${types.GET_SSO_MODEL}`
)
this.endPoint = data.endPoint
this.authorizationCode = data.authorizationCode
this.authAppUrl = data.authAppUrl
await this.$nextTick()
this.$refs.ssoForm.submit()
} catch (error) {
this.error = error
this.errorStatus = true
}
}
},
async mounted() {
await this.getSSOModel()
}
}
</script>