Parlons des Iframes. Existe-t-il une fonctionnalité que vous souhaitez ajouter à votre site web et que vous pourriez rapidement développer avec FileMaker, mais pas dans le langage utilisé par votre site ? Vous pourriez envoyer les utilisateurs vers une application WebDirect, mais reproduire tous les éléments de design de votre site dans FileMaker peut prendre beaucoup de temps. De plus, si le style de votre site n’est pas soigneusement reproduit dans WebDirect, vous risquez d’affaiblir la cohérence de votre image de marque. Et si vous pouviez créer la fonctionnalité dans FileMaker et l’intégrer directement dans une page de votre site comme un composant, en laissant le thème de votre site gérer les éléments comme les en-têtes, la navigation et le pied de page ?
Iframe HTML
L’élément HTML iframe permet de charger un autre site web ou une ressource web comme élément enfant d’une page. Il est utile lorsqu’on souhaite afficher une ressource externe aux visiteurs sans les rediriger vers un autre site. Tous les navigateurs modernes supportent les iframes, et il est même possible d’en inclure plusieurs sur une même page. Cet article explique comment intégrer une solution FileMaker WebDirect dans un site web via une iframe.
Pour cela, quelques modifications côté serveur sont nécessaires. Par défaut, les en-têtes HTTP de FileMaker Server autorisent uniquement le chargement de WebDirect dans une iframe si les pages ont la même origine. Selon Mozilla, deux pages ont la même origine si le protocole, le port et le domaine sont identiques. Par exemple https://app.works/downloads/ et https://app.works/project-give2017/ ont la même origine, mais https://app.works/blog et https://differenthost.app.works ne l’ont pas. Cette restriction empêche d’autres sites d’encapsuler votre solution FileMaker à votre insu. Sans ces protections, votre application serait vulnérable à des attaques comme le Cross-Frame Scripting.
Heureusement, il est possible de conserver la sécurité tout en utilisant les iframes grâce aux en-têtes Content-Security-Policy (CSP) et X-Frame-Options. CSP permet de définir quelles sources sont autorisées pour différents types de contenu. Dans notre cas, la directive importante est frame-ancestors, qui contrôle qui peut intégrer notre application dans une iframe.
X-Frame-Options est aujourd’hui déprécié au profit de CSP, mais reste nécessaire pour certains anciens navigateurs comme Internet Explorer. Sans lui, certains navigateurs considéreront qu’aucune restriction de framing n’est appliquée. Cependant, X-Frame-Options ne propose que trois options : interdire complètement le framing, autoriser uniquement la même origine, ou autoriser une seule origine spécifique.
Voici comment configurer cela (exemple sous FileMaker Server Windows). Sur macOS, les étapes sont similaires mais diffèrent dans les chemins système.
- Ouvrez l’Explorateur de fichiers et accédez à : C:\Program Files\FileMaker\FileMaker Server\HTTPServer\conf
- Faites une copie de sauvegarde du fichier web.config
- Ouvrez le fichier web.config en mode administrateur
- Ajoutez ou modifiez la section <customHeaders> pour inclure CSP et X-Frame-Options
- Enregistrez et fermez le fichier
Une dernière étape est nécessaire pour Safari 11 : la protection contre le suivi inter-sites bloque les cookies dans les iframes. Cela empêche parfois WebDirect de fonctionner correctement lorsqu’il est intégré.
Une solution consiste à utiliser un petit script JavaScript (basé sur un projet GitHub) côté site parent et côté iframe afin de forcer la création d’un cookie puis la redirection.
Après ces modifications, votre solution WebDirect intégrée dans une iframe devrait fonctionner correctement dans les navigateurs modernes tout en restant sécurisée contre les attaques de framing non autorisées.
*Cet article a été initialement rédigé pour AppWorks, aujourd’hui intégré à Direct Impact Solutions. Il est fourni à titre informatif. Les informations sont exactes à la date de publication selon nos connaissances.
« `
