I want to embed the Typeform in my Flutter app (Android and iOS). I need to listen the onSubmit callback so that Typeform can be closed once it is submitted.
I used the approach mentioned here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#form {
height: 100%;
width: 100%;
min-height: 100vh;
}
iframe {
border-radius: 0 !important;
width: 100%!important;
height: 100vh!important;
}
</style>
</head>
<body>
<div id='form'></div>
<script src='https://embed.typeform.com/next/embed.js'></script>
<script>
window.tf.createWidget('<form-id>', {
container: document.querySelector('#form'),
onSubmit: (e) => {
console.log(JSON.stringify(e));
// send the callback to the javascript handler
typeformAB.postMessage(JSON.stringify(e));
}
});
</script>
</body>
</html>
It works fine but there is an error on console regarding the content security policy.
[INFO:CONSOLE(0)] "[Report Only] Refused to frame 'https://form.typeform.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' http://localhost:* capacitor: iconic: https:".
I believe this can create a problem in future. So how to resolve this issue?
