Looking to navigate around X-frame restrictions?
You can check out this npm package: https://www.npmjs.com/package/x-frame-bypass
To make it work, include the following tag within your HTML:
<iframe is="x-frame-bypass" src="https://example.org/"></iframe>After installation, adding these lines to App.js:
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import {xframe} from 'x-frame-bypass' <-- importing the npm package
library.add(faCoffee, faLink, faUser, faSync, faArrowLeft, faPlay, faCheck, faTimes, faEdit, faPause, faStepForward, faCog, faUserCircle, faInfoCircle, faSignOutAlt, faImages)
Vue.use(spatial)
Vue.use(progress)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('x-frame-bypass', xframe) <-- adding the xframe component
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App
},
template: '<App/>'
})
Encountered an error like this on the console:
Vue warn: Unknown custom element: <x-frame-bypass> - did you register the component correctly?
In your Vue component using the iframe, try adding this to the components:
import xframe from 'x-frame-bypass'
export default {
name: 'Component',
components: {
Button,
'x-frame-bypass': xframe
},
An error message pops up:
Failed to mount component: template or render function not defined.
Need assistance figuring this out. Is there a solution, or is it just not feasible?