The Original Filemaker Community - Forum
FileMaker News | FileMaker Tutorials | FileMaker Videos

The Leading Filemaker Developer Tools

Password protection and security…

Show #FileMaker #WebDirect Page in #iFrame

This is our featured How To Blog of the week from FMT Affiliate MindFire’s Lakin Mohapatra

Any FileMaker file can be accessed by webdirect using following type of url

http://www.fmsever.com/fmi/webd/FileMakerFile

But there are some issues when we use above kind of url to access files via webdirect.

  1. Use can modify url to view home page of webdirect which lists all FileMaker files being hosted on corresponding server which many admins don’t want.
    User can click on back button for doing the same.
  2. Session will be lost when user will reload page.

In order to solve above problems , we have to load entire webdirect page of specific FileMaker file in an iframe.
Using an iframe helps us to have custom domain name.
Also we can have custom javascript implementation for preventing back button click & showing alert when page will be reloaded.

Steps to be followed :

Now above solution will work if both parent webpage domain and webdirect domain are same. [Same origin]

If webdirect domain will be different than that of parent page domain , then iframe will be blocked from loading resources due to content security policy.

So for fixing cross domain issues with iframe , we need to perform following actions.

  1. Allow X-Frame-Options from example.com. in IIS config.

Open C:\ProgramFiles\FileMaker\FileMakerServer\HTTPServer\conf\web.config file and edit the <customHeaders> element to include the Content-Security-Policy and and X-Frame-Options headers.

<add name=”Content-Security-Policy” value=”frame-ancestors ’self’ http://example.com“ />

<add name=”X-Frame-Options” value=”Allow-From http://example.com” />

2. In Safari 11, Apple enables the “Prevent cross-site tracking” privacy preference by default. This preference prevents cookies from being set across domains if the user has not already visited the domain setting the cookie.

We need to implement a solution by using a simple javascript trick.

For the very first time, user will be redirected to FileMaker web server[iframe domain] which will set a cookie there and redirect back to parent webpage which hosts webdirect as iframe page.Then next time onwards , browser will get to know that its a trusted site and will not show any cookie error.

  1. Add following javascript code within <head></head> of parent webpage which contains iframe.

<script>
// Detect browser
var is_safari = navigator.userAgent.indexOf(“Safari”) > -1;
var is_chrome = navigator.userAgent.indexOf(‘Chrome’) > -1;
if ((is_chrome) && (is_safari)) {is_safari = false;}

if (is_safari) {

// Check if cookie not matched
if (!document.cookie.match(/^(.*;)?\s*webd\s*=\s*[^;]+(.*)?$/)) {

// Create cookie
document.cookie=”webd=true; expires=Tue, 19 Jan 2038 03:14:07 UTC; path=/”;
// Redirect to FM server cookie page
window.location.replace(“http://FMserver.com/cookie.html“);
}
}

</script>

2. Create a html file in Filemaker Web server named cookie.html and add following html & javascript code.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>

// Detect browser
var is_safari = navigator.userAgent.indexOf(“Safari”) > -1;
var is_chrome = navigator.userAgent.indexOf(‘Chrome’) > -1;
if ((is_chrome) && (is_safari)) {is_safari = false;}

if (is_safari) {

// Check for cookie
if (!document.cookie.match(/^(.*;)?\s*webd\s*=\s*[^;]+(.*)?$/)) {

// If cookie not created, create a cookie.
document.cookie=”webd=true; expires=Tue, 19 Jan 2038 03:14:07 UTC; path=/”;
}
}

// Redirect user to parent webpage which hosts webdirect page as iframe.
window.location.replace(“https://www.example.com/webdirect.html”);

</script>
</body>
</html>

I hope, above solutions will help in rendering webdirect in an iframe without any issues.

Thanks for reading so far.
If you have any questions, please let me know in comment section. I will be happy to help.

Follow Lankin on Twitter: https://twitter.com/lakincoder

Comments are closed.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

Privacy & Cookies Policy