Hello all.
I want to use ODK to design certain question that i want it to display on my website without living my website.
Just like how the odk webform is but without I want it to automatically appear on my website through embedding, integrating or the like without clicking on the webform link.
Is there any help I can do this?
Thank you very much.
Hi @Mohamed_Keita,
To be more concise, they are called enketo webform.
Yes there is a way: Check this link https://github.com/enketo/enketo-iframe-demo
Demo at : http://enketo.github.io/enketo-iframe-demo/
Also in your form make use you allow anonymous access so as the login screen does not show
Regards
Dickson
It looks like the Enketo Site is no longer operational. Is this function still usable? Will the new ODK Web Forms that is being developed include this function, IE the ability to embed a form into a different website?
Yes, you can still embed an Enketo form in a iframe on a different website.
If you are using Central, embedding is off by default because it exposes you to cross-site scripting attacks. To enable this functionality, edit your odk.conf.template to whitelist the sites where you want to embed. For example, if you want to embed on https://example.com https://company.sharepoint.com, you'd make these changes.
# More lax CSP for enketo-express:
# Google Maps API: https://developers.google.com/maps/documentation/javascript/content-security-policy
add_header Content-Security-Policy-Report-Only "default-src 'none'; connect-src 'self' blob: https://maps.googleapis.com/maps/ https://maps.google.com/ https://maps.gstatic.com/mapfiles/ https://fonts.gstatic.com/ https://fonts.googleapis.com/; font-src 'self' https://fonts.gstatic.com/; frame-src 'none'; img-src data: blob: jr: 'self' https://maps.google.com/maps/ https://maps.gstatic.com/mapfiles/ https://maps.googleapis.com/maps/; manifest-src 'none'; media-src blob: jr: 'self'; object-src 'none'; script-src 'unsafe-inline' 'self' https://maps.googleapis.com/maps/api/js/ https://maps.google.com/maps/ https://maps.google.com/maps-api-v3/api/js/; style-src 'unsafe-inline' 'self' https://fonts.googleapis.com/css; style-src-attr 'none'; report-uri /csp-report";
add_header Content-Security-Policy "frame-ancestors 'self' https://example.com https://company.sharepoint.com";
I've filed an issue at https://github.com/enketo/enketo/issues/1354 so the demo site you linked to gets fixed.
Is there anything else that needs to be done to do this with the new ODK Web Forms/ is this the same process?
I just added line 4 in that code you provided
add_header Content-Security-Policy "frame-ancestors 'self' https://myepicdomain.com/reallyawesome/no/seriously";
I then pasted this HTML into my website changing the iframe src like seen below:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background: #ccc;
}
iframe {
display: block;
margin: 100px auto 0 auto;
border: 1px solid black;
height: 500px;
width: 400px;
}
</style>
</head>
<body>
<iframe src="https://myODK.com/my_public_form"></iframe>
<script>
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
// TODO in real life, check origin! if (event.origin !== "http://enk.to:8080") return;
console.log('data received from iframe', JSON.parse(event.data));
console.log('origin of message', event.origin);
console.log('source of message', event.source);
}
</script>
</body>
</html>
but it still doesn't work. I tried both the Enketo and Web Forms (Beta). The iframe shows up with the following error:
Please remove reallyawesome/no/seriously from the config, here we just need to provide origin of the application where Form is embedded. Also add the same line after try_files $uri $uri/ /index.html;
Another thing I noticed in your HTML is that you are not setting parentWindowOrigin query parameter in the iframe src, without that you won't received any messages from the iframe.
So I've changed the iframe src in the HTML to
<iframe src="https://my.odkserver.org/f/zgo1B0te2XDyZBll0FEyJIU5dXh4R3n?st=njXPGkvrLbyTNp9WObCwxIZw9sKhlmFQEckO15WAdeaJIikY7mpAyoWiqF5N8DaS?parentWindowOrigin=https://sites.google.com/"></iframe>
and I've inserted
add_header Content-Security-Policy "frame-ancestors 'self' https://sites.google.com;
to two spots in the odk.conf.template file. If using this as a reference, I added them to:
Line 133
Line 159
It still seems to be showing the same error. Any thoughts?
Not totally sure what's happening, maybe sites.google is blocking somehow. Is it possible for you to record network requests with a tool like https://jam.dev and share the link in my DM?
To provide wider visibility to the community. Here are our findings related to embedding a Form (public link) in Google Sites.