javascript - Disabled Vue iframe security - Stack Overflow

admin管理员组

文章数量:1302912

I have a React app that renders Vue routes and React routes. All works fine, however, for one specific use case I am mounting a react app inside a Vue app. ReactParent -> Vue -> ReactChild. The problem is the React child is using an iframe and the connection gets blocked by Vue when. It works fine in the React-only version, but the iframe connection fails when the code passes through Vue. This is my VueReactWrapper. Any suggestions?

I'm using v-html right now to try to pass the XSS checks, not working though. I tried v-pre, the same output

<template>
  <div v-html="reactMount"></div>
</template>

<script lang="ts">
  import { createRoot } from "react-dom/client"
  import { Vue, Component } from "vue-property-decorator"
  import { renderWithProviders } from "@/react/App"
  import { Root } from "react-dom/client"

  Vue.config.ignoredElements = ["iframe", "div"]

  @Component({
    inheritAttrs: false
  })
  export default class VueReactWrapper extends Vue {
    private reactRoot: Root | null = null
    private reactMount = '<div id="react-root"></div>'

    mounted(): void {
      const reactRootEl = document.getElementById("react-root")
      this.reactRoot = createRoot(reactRootEl as Element)
      renderWithProviders(this.reactRoot)
    }

    destroyed() {
      if (this.reactRoot) {
        this.reactRoot.unmount()
      }
    }
  }
</script>

<style scoped></style>

本文标签： javascriptDisabled Vue iframe securityStack Overflow