Merge pull request #14411 from Budibase/poc-authenticated-iframe

Poc authenticated iframe
This commit is contained in:
Martin McKeaveney 2024-09-02 09:08:56 +01:00 committed by GitHub
commit cbf6891c5f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 169 additions and 101 deletions

View File

@ -57,6 +57,7 @@ export const getBindableProperties = (asset, componentId) => {
const stateBindings = getStateBindings() const stateBindings = getStateBindings()
const selectedRowsBindings = getSelectedRowsBindings(asset) const selectedRowsBindings = getSelectedRowsBindings(asset)
const roleBindings = getRoleBindings() const roleBindings = getRoleBindings()
const embedBindings = getEmbedBindings()
return [ return [
...contextBindings, ...contextBindings,
...urlBindings, ...urlBindings,
@ -65,6 +66,7 @@ export const getBindableProperties = (asset, componentId) => {
...deviceBindings, ...deviceBindings,
...selectedRowsBindings, ...selectedRowsBindings,
...roleBindings, ...roleBindings,
...embedBindings,
] ]
} }
@ -813,6 +815,25 @@ export const getActionBindings = (actions, actionId) => {
return bindings return bindings
} }
/**
* Gets all device bindings for embeds.
*/
const getEmbedBindings = () => {
let bindings = []
const safeEmbed = makePropSafe("embed")
bindings = [
{
type: "context",
runtimeBinding: `${safeEmbed}`,
readableBinding: `ParentWindow`,
category: "Embed",
icon: "DistributeVertically",
},
]
return bindings
}
/** /**
* Gets the schema for a certain datasource plus. * Gets the schema for a certain datasource plus.
* The options which can be passed in are: * The options which can be passed in are:

View File

@ -42,6 +42,7 @@
import FreeFooter from "components/FreeFooter.svelte" import FreeFooter from "components/FreeFooter.svelte"
import MaintenanceScreen from "components/MaintenanceScreen.svelte" import MaintenanceScreen from "components/MaintenanceScreen.svelte"
import SnippetsProvider from "./context/SnippetsProvider.svelte" import SnippetsProvider from "./context/SnippetsProvider.svelte"
import EmbedProvider from "./context/EmbedProvider.svelte"
// Provide contexts // Provide contexts
setContext("sdk", SDK) setContext("sdk", SDK)
@ -160,6 +161,7 @@
{#if $environmentStore.maintenance.length > 0} {#if $environmentStore.maintenance.length > 0}
<MaintenanceScreen maintenanceList={$environmentStore.maintenance} /> <MaintenanceScreen maintenanceList={$environmentStore.maintenance} />
{:else} {:else}
<EmbedProvider>
<DeviceBindingsProvider> <DeviceBindingsProvider>
<UserBindingsProvider> <UserBindingsProvider>
<StateBindingsProvider> <StateBindingsProvider>
@ -212,7 +214,8 @@
Something went wrong rendering your app Something went wrong rendering your app
</Heading> </Heading>
<Body size="S"> <Body size="S">
Get in touch with support if this issue persists Get in touch with support if this issue
persists
</Body> </Body>
</Layout> </Layout>
</div> </div>
@ -270,6 +273,7 @@
</StateBindingsProvider> </StateBindingsProvider>
</UserBindingsProvider> </UserBindingsProvider>
</DeviceBindingsProvider> </DeviceBindingsProvider>
</EmbedProvider>
{/if} {/if}
</div> </div>
<KeyboardManager /> <KeyboardManager />

View File

@ -0,0 +1,43 @@
<script>
import Provider from "./Provider.svelte"
import { onMount } from "svelte"
let data = {}
function extractDomainFromUrl(url) {
const { hostname } = new URL(url)
const parts = hostname.split(".")
const tld = parts.slice(-2).join(".")
return tld
}
function handleMessage(event) {
if (event.data?.type !== "bb-parent-window-event") {
return
}
// Validate the event origin to ensure it's coming from a trusted source
// Allow different subdomains but must match TLD
const appOrigin = extractDomainFromUrl(window.location.origin)
const eventOrigin = extractDomainFromUrl(event.origin)
if (appOrigin === eventOrigin) {
data = event.data
} else {
console.error(
`Embedded budibase app domain ${appOrigin} does not match origin of event ${eventOrigin}.
Top level domains must match`
)
}
}
onMount(() => {
window.addEventListener("message", handleMessage)
return () => window.removeEventListener("message", handleMessage)
})
</script>
<Provider key="embed" {data}>
<slot />
</Provider>