From 812485f8633d7b28c2a7d1b707a9f7996afccada Mon Sep 17 00:00:00 2001
From: Alexis Faizeau <a.faizeau@workadventu.re>
Date: Mon, 29 Nov 2021 15:54:34 +0100
Subject: [PATCH 1/7] Cannot rezise main cowebsite when fullscreen is enable

---
 front/src/WebRtc/CoWebsiteManager.ts | 26 ++++++++++++++++++--------
 front/style/cowebsite.scss           |  9 ++++++---
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts
index 3bfaa5f7..09de4b41 100644
--- a/front/src/WebRtc/CoWebsiteManager.ts
+++ b/front/src/WebRtc/CoWebsiteManager.ts
@@ -15,6 +15,7 @@ const cowebsiteContainerDomId = "cowebsite-container"; // the id of the whole co
 const cowebsiteMainDomId = "cowebsite-slot-0"; // the id of the parent div of the iframe.
 const cowebsiteBufferDomId = "cowebsite-buffer"; // the id of the container who contains cowebsite iframes.
 const cowebsiteAsideDomId = "cowebsite-aside"; // the id of the parent div of the iframe.
+const cowebsiteAsideHolderDomId = "cowebsite-aside-holder";
 const cowebsiteSubIconsDomId = "cowebsite-sub-icons";
 export const cowebsiteCloseButtonId = "cowebsite-close";
 const cowebsiteFullScreenButtonId = "cowebsite-fullscreen";
@@ -54,6 +55,7 @@ class CoWebsiteManager {
     private cowebsiteMainDom: HTMLDivElement;
     private cowebsiteBufferDom: HTMLDivElement;
     private cowebsiteAsideDom: HTMLDivElement;
+    private cowebsiteAsideHolderDom: HTMLDivElement;
     private cowebsiteSubIconsDom: HTMLDivElement;
     private previousTouchMoveCoordinates: TouchMoveCoordinates | null = null; //only use on touchscreens to track touch movement
 
@@ -99,6 +101,7 @@ class CoWebsiteManager {
         this.cowebsiteMainDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteMainDomId);
         this.cowebsiteBufferDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteBufferDomId);
         this.cowebsiteAsideDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteAsideDomId);
+        this.cowebsiteAsideHolderDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteAsideHolderDomId);
         this.cowebsiteSubIconsDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteSubIconsDomId);
         this.initResizeListeners();
 
@@ -188,21 +191,23 @@ class CoWebsiteManager {
             this.fire();
         };
 
-        this.cowebsiteAsideDom.addEventListener("mousedown", (event) => {
+        this.cowebsiteAsideHolderDom.addEventListener("mousedown", (event) => {
+            if (this.isFullScreen) return;
             this.cowebsiteMainDom.style.display = "none";
             this.resizing = true;
             document.addEventListener("mousemove", movecallback);
         });
 
         document.addEventListener("mouseup", (event) => {
-            if (!this.resizing) return;
+            if (!this.resizing || this.isFullScreen) return;
             document.removeEventListener("mousemove", movecallback);
             this.cowebsiteMainDom.style.display = "block";
             this.resizing = false;
             this.cowebsiteMainDom.style.display = "flex";
         });
 
-        this.cowebsiteAsideDom.addEventListener("touchstart", (event) => {
+        this.cowebsiteAsideHolderDom.addEventListener("touchstart", (event) => {
+            if (this.isFullScreen) return;
             this.cowebsiteMainDom.style.display = "none";
             this.resizing = true;
             const touchEvent = event.touches[0];
@@ -211,7 +216,7 @@ class CoWebsiteManager {
         });
 
         document.addEventListener("touchend", (event) => {
-            if (!this.resizing) return;
+            if (!this.resizing || this.isFullScreen) return;
             this.previousTouchMoveCoordinates = null;
             document.removeEventListener("touchmove", movecallback);
             this.cowebsiteMainDom.style.display = "block";
@@ -640,17 +645,22 @@ class CoWebsiteManager {
     }
 
     private fullscreen(): void {
+        const openFullscreenImage = HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId);
+        const closeFullScreenImage = HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId);
+
         if (this.isFullScreen) {
             this.resetStyleMain();
             this.fire();
             //we don't trigger a resize of the phaser game since it won't be visible anyway.
-            HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = "inline";
-            HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = "none";
+            this.cowebsiteAsideHolderDom.style.visibility = "visible";
+            openFullscreenImage.style.display = "inline";
+            closeFullScreenImage.style.display = "none";
         } else {
             this.verticalMode ? (this.height = window.innerHeight) : (this.width = window.innerWidth);
             //we don't trigger a resize of the phaser game since it won't be visible anyway.
-            HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = "none";
-            HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = "inline";
+            this.cowebsiteAsideHolderDom.style.visibility = "hidden";
+            openFullscreenImage.style.display = "none";
+            closeFullScreenImage.style.display = "inline";
         }
     }
 }
diff --git a/front/style/cowebsite.scss b/front/style/cowebsite.scss
index 69085cc1..a6af21ee 100644
--- a/front/style/cowebsite.scss
+++ b/front/style/cowebsite.scss
@@ -28,7 +28,7 @@
     justify-content: space-between;
 
     #cowebsite-aside-holder {
-      pointer-events: none;
+      background: gray;
       height: 20px;
       flex: 1;
       display: flex;
@@ -38,6 +38,7 @@
 
       img {
         width: 80%;
+        pointer-events: none;
       }
     }
 
@@ -206,12 +207,14 @@
 
     aside {
       width: 30px;
-      cursor: ew-resize;
 
       img {
-        cursor: ew-resize;
         transform: rotate(90deg);
       }
     }
+
+    &-aside-holder {
+      cursor: ew-resize;
+    }
   }
 }

From 41fd848fa0335ca85d8a4cd3cc2b84b7ecf00bf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Mon, 29 Nov 2021 19:05:13 +0100
Subject: [PATCH 2/7] Fixed potential injection by switching map container to
 PHP

Some HTML files were importing iframe_api.js automatically by detecting the referrer document.

While this was done in a safe way (the map container does not use cookies), it is not
a best practice to load a script originating from document.referrer.

This PR solves the issue by using PHP to inject the correct domain name in the HTML files.
---
 deeployer.libsonnet                           |  5 ++-
 docker-compose.single-domain.yaml             |  3 +-
 docker-compose.yaml                           |  3 +-
 .../website_in_map_script.json                | 10 ++---
 ..._script.html => website_in_map_script.php} |  6 +--
 maps/tests/Metadata/cowebsiteAllowApi.html    | 18 --------
 maps/tests/Metadata/cowebsiteAllowApi.js      |  2 +-
 maps/tests/Metadata/cowebsiteAllowApi.php     | 14 ++++++
 maps/tests/Metadata/customIframeMenuApi.html  | 20 ---------
 maps/tests/Metadata/customIframeMenuApi.php   | 16 +++++++
 maps/tests/Metadata/customMenu.html           | 18 --------
 maps/tests/Metadata/customMenu.js             |  4 +-
 maps/tests/Metadata/customMenu.json           |  4 +-
 maps/tests/Metadata/customMenu.php            | 14 ++++++
 maps/tests/Metadata/playerMove.html           | 18 --------
 maps/tests/Metadata/playerMove.json           | 42 +++++++++---------
 maps/tests/Metadata/playerMove.php            | 14 ++++++
 maps/tests/Metadata/setProperty.json          | 44 +++++++++----------
 .../{setProperty.html => setProperty.php}     |  8 +---
 maps/tests/Metadata/setTiles.html             |  6 +--
 maps/tests/Metadata/setTiles.json             |  2 +-
 maps/tests/Metadata/showHideLayer.html        |  8 +---
 maps/tests/Metadata/showHideLayer.json        | 44 +++++++++----------
 maps/tests/Variables/shared_variables.json    | 20 ++++-----
 ...ed_variables.html => shared_variables.php} |  6 +--
 maps/tests/{iframe.html => iframe.php}        |  8 +---
 maps/tests/iframe_api.json                    | 14 +++---
 27 files changed, 167 insertions(+), 204 deletions(-)
 rename maps/tests/EmbeddedWebsite/{website_in_map_script.html => website_in_map_script.php} (89%)
 delete mode 100644 maps/tests/Metadata/cowebsiteAllowApi.html
 create mode 100644 maps/tests/Metadata/cowebsiteAllowApi.php
 delete mode 100644 maps/tests/Metadata/customIframeMenuApi.html
 create mode 100644 maps/tests/Metadata/customIframeMenuApi.php
 delete mode 100644 maps/tests/Metadata/customMenu.html
 create mode 100644 maps/tests/Metadata/customMenu.php
 delete mode 100644 maps/tests/Metadata/playerMove.html
 create mode 100644 maps/tests/Metadata/playerMove.php
 rename maps/tests/Metadata/{setProperty.html => setProperty.php} (52%)
 rename maps/tests/Variables/{shared_variables.html => shared_variables.php} (78%)
 rename maps/tests/{iframe.html => iframe.php} (61%)

diff --git a/deeployer.libsonnet b/deeployer.libsonnet
index d3280ed2..0bbda264 100644
--- a/deeployer.libsonnet
+++ b/deeployer.libsonnet
@@ -101,7 +101,10 @@
       "host": {
         "url": "maps-"+url
       },
-      "ports": [80]
+      "ports": [80],
+      "env": {
+          "FRONT_URL": "https://play-"+url
+      }
     },
     "redis": {
       "image": "redis:6",
diff --git a/docker-compose.single-domain.yaml b/docker-compose.single-domain.yaml
index 52875ce8..14c14e3e 100644
--- a/docker-compose.single-domain.yaml
+++ b/docker-compose.single-domain.yaml
@@ -92,11 +92,12 @@ services:
       - "traefik.http.routers.pusher-ssl.service=pusher"
 
   maps:
-    image: thecodingmachine/nodejs:12-apache
+    image: thecodingmachine/php:8.1-v4-apache-node12
     environment:
       DEBUG_MODE: "$DEBUG_MODE"
       HOST: "0.0.0.0"
       NODE_ENV: development
+      FRONT_URL: http://play.workadventure.localhost
       #APACHE_DOCUMENT_ROOT: dist/
       #APACHE_EXTENSIONS: headers
       #APACHE_EXTENSION_HEADERS: 1
diff --git a/docker-compose.yaml b/docker-compose.yaml
index ed5389c0..3a0e9b7b 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -96,11 +96,12 @@ services:
       - "traefik.http.routers.pusher-ssl.service=pusher"
 
   maps:
-    image: thecodingmachine/nodejs:12-apache
+    image: thecodingmachine/php:8.1-v4-apache-node12
     environment:
       DEBUG_MODE: "$DEBUG_MODE"
       HOST: "0.0.0.0"
       NODE_ENV: development
+      FRONT_URL: http://play.workadventure.localhost
       #APACHE_DOCUMENT_ROOT: dist/
       #APACHE_EXTENSIONS: headers
       #APACHE_EXTENSION_HEADERS: 1
diff --git a/maps/tests/EmbeddedWebsite/website_in_map_script.json b/maps/tests/EmbeddedWebsite/website_in_map_script.json
index 00ce95cb..3b667c11 100644
--- a/maps/tests/EmbeddedWebsite/website_in_map_script.json
+++ b/maps/tests/EmbeddedWebsite/website_in_map_script.json
@@ -12,8 +12,8 @@
                 {
                  "name":"openWebsite",
                  "type":"string",
-                 "value":"website_in_map_script.html"
-                }, 
+                 "value":"website_in_map_script.php"
+                },
                 {
                  "name":"openWebsiteAllowApi",
                  "type":"bool",
@@ -24,7 +24,7 @@
          "width":30,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          "height":30,
@@ -36,7 +36,7 @@
          "width":30,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "draworder":"topdown",
          "id":3,
@@ -90,4 +90,4 @@
  "type":"map",
  "version":1.5,
  "width":30
-}
\ No newline at end of file
+}
diff --git a/maps/tests/EmbeddedWebsite/website_in_map_script.html b/maps/tests/EmbeddedWebsite/website_in_map_script.php
similarity index 89%
rename from maps/tests/EmbeddedWebsite/website_in_map_script.html
rename to maps/tests/EmbeddedWebsite/website_in_map_script.php
index 1180a2de..c822b8ca 100644
--- a/maps/tests/EmbeddedWebsite/website_in_map_script.html
+++ b/maps/tests/EmbeddedWebsite/website_in_map_script.php
@@ -1,12 +1,8 @@
 <!doctype html>
 <html lang="en">
 <head>
+    <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
     <script>
-        var script = document.createElement('script');
-        // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-        // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-        script.setAttribute('src', document.referrer + 'iframe_api.js');
-        document.head.appendChild(script);
         window.addEventListener('load', () => {
             console.log('On load');
             WA.onInit().then(() => {
diff --git a/maps/tests/Metadata/cowebsiteAllowApi.html b/maps/tests/Metadata/cowebsiteAllowApi.html
deleted file mode 100644
index a689fe31..00000000
--- a/maps/tests/Metadata/cowebsiteAllowApi.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <script>
-            var script = document.createElement('script');
-            // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-            // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-            script.setAttribute('src', document.referrer + 'iframe_api.js');
-            document.head.appendChild(script);
-            window.addEventListener('load', () => {
-                WA.chat.sendChatMessage('The iframe opened by a script works !', 'Mr Robot');
-            })
-        </script>
-    </head>
-    <body>
-        <p>Website opened by script.</p>
-    </body>
-</html>
diff --git a/maps/tests/Metadata/cowebsiteAllowApi.js b/maps/tests/Metadata/cowebsiteAllowApi.js
index 56c7b767..aa2ad5a9 100644
--- a/maps/tests/Metadata/cowebsiteAllowApi.js
+++ b/maps/tests/Metadata/cowebsiteAllowApi.js
@@ -1 +1 @@
-WA.nav.openCoWebSite("cowebsiteAllowApi.html", true, "");
+WA.nav.openCoWebSite("cowebsiteAllowApi.php", true, "");
diff --git a/maps/tests/Metadata/cowebsiteAllowApi.php b/maps/tests/Metadata/cowebsiteAllowApi.php
new file mode 100644
index 00000000..c3d1ddff
--- /dev/null
+++ b/maps/tests/Metadata/cowebsiteAllowApi.php
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
+        <script>
+            window.addEventListener('load', () => {
+                WA.chat.sendChatMessage('The iframe opened by a script works !', 'Mr Robot');
+            })
+        </script>
+    </head>
+    <body>
+        <p>Website opened by script.</p>
+    </body>
+</html>
diff --git a/maps/tests/Metadata/customIframeMenuApi.html b/maps/tests/Metadata/customIframeMenuApi.html
deleted file mode 100644
index afe840cc..00000000
--- a/maps/tests/Metadata/customIframeMenuApi.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>API in iframe menu</title>
-  <script>
-    var script = document.createElement('script');
-    // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-    // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-    script.setAttribute('src', document.referrer + 'iframe_api.js');
-    document.head.appendChild(script);
-    window.addEventListener('load', () => {
-      WA.chat.sendChatMessage('The iframe opened by a script works !', 'Mr Robot');
-    })
-  </script>
-</head>
-<body style="text-align: center">
-    <p style="color: whitesmoke">This is an iframe in a custom menu.</p>
-</body>
-</html>
\ No newline at end of file
diff --git a/maps/tests/Metadata/customIframeMenuApi.php b/maps/tests/Metadata/customIframeMenuApi.php
new file mode 100644
index 00000000..977c36d1
--- /dev/null
+++ b/maps/tests/Metadata/customIframeMenuApi.php
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>API in iframe menu</title>
+    <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
+    <script>
+    window.addEventListener('load', () => {
+      WA.chat.sendChatMessage('The iframe opened by a script works !', 'Mr Robot');
+    })
+    </script>
+</head>
+<body style="text-align: center">
+    <p style="color: whitesmoke">This is an iframe in a custom menu.</p>
+</body>
+</html>
diff --git a/maps/tests/Metadata/customMenu.html b/maps/tests/Metadata/customMenu.html
deleted file mode 100644
index 4b38f0b9..00000000
--- a/maps/tests/Metadata/customMenu.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <script>
-        var script = document.createElement('script');
-        // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-        // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-        script.setAttribute('src', document.referrer + 'iframe_api.js');
-        document.head.appendChild(script);
-        window.addEventListener('load', () => {
-            WA.ui.registerMenuCommand('test', 'customIframeMenu.html', {autoClose: true});
-        })
-    </script>
-</head>
-<body>
-    <p>Add a custom menu</p>
-</body>
-</html>
\ No newline at end of file
diff --git a/maps/tests/Metadata/customMenu.js b/maps/tests/Metadata/customMenu.js
index ba66ee0d..7cedb632 100644
--- a/maps/tests/Metadata/customMenu.js
+++ b/maps/tests/Metadata/customMenu.js
@@ -7,9 +7,9 @@ WA.ui.registerMenuCommand('custom callback menu', () => {
 WA.ui.registerMenuCommand('custom iframe menu', {iframe: 'customIframeMenu.html'});
 
 WA.room.onEnterZone('iframeMenu', () => {
-    menuIframeApi = WA.ui.registerMenuCommand('IFRAME USE API', {iframe: 'customIframeMenuApi.html', allowApi: true});
+    menuIframeApi = WA.ui.registerMenuCommand('IFRAME USE API', {iframe: 'customIframeMenuApi.php', allowApi: true});
 })
 
 WA.room.onLeaveZone('iframeMenu', () => {
     menuIframeApi.remove();
-})
\ No newline at end of file
+})
diff --git a/maps/tests/Metadata/customMenu.json b/maps/tests/Metadata/customMenu.json
index c107aaf2..fdb69168 100644
--- a/maps/tests/Metadata/customMenu.json
+++ b/maps/tests/Metadata/customMenu.json
@@ -54,7 +54,7 @@
         {
           "name":"openWebsite",
           "type":"string",
-          "value":"customMenu.html"
+          "value":"customMenu.php"
         },
         {
           "name":"openWebsiteAllowApi",
@@ -97,4 +97,4 @@
   "type":"map",
   "version":"1.6",
   "width":10
-}
\ No newline at end of file
+}
diff --git a/maps/tests/Metadata/customMenu.php b/maps/tests/Metadata/customMenu.php
new file mode 100644
index 00000000..68205085
--- /dev/null
+++ b/maps/tests/Metadata/customMenu.php
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
+    <script>
+        window.addEventListener('load', () => {
+            WA.ui.registerMenuCommand('test', 'customIframeMenu.html', {autoClose: true});
+        })
+    </script>
+</head>
+<body>
+    <p>Add a custom menu</p>
+</body>
+</html>
diff --git a/maps/tests/Metadata/playerMove.html b/maps/tests/Metadata/playerMove.html
deleted file mode 100644
index 46a36845..00000000
--- a/maps/tests/Metadata/playerMove.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <script>
-            var script = document.createElement('script');
-            // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-            // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-            script.setAttribute('src', document.referrer + 'iframe_api.js');
-            document.head.appendChild(script);
-            window.addEventListener('load', () => {
-                WA.player.onPlayerMove(console.log);
-            })
-        </script>
-    </head>
-    <body>
-        <p>Log in the console the movement of the current player in the zone of the iframe</p>
-    </body>
-</html>
\ No newline at end of file
diff --git a/maps/tests/Metadata/playerMove.json b/maps/tests/Metadata/playerMove.json
index db590b05..109c78c0 100644
--- a/maps/tests/Metadata/playerMove.json
+++ b/maps/tests/Metadata/playerMove.json
@@ -13,7 +13,7 @@
          "width":10,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "data":[33, 34, 34, 34, 34, 34, 34, 34, 34, 35, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 49, 50, 50, 50, 50, 50, 50, 50, 50, 51],
          "height":10,
@@ -25,7 +25,7 @@
          "width":10,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "data":[0, 0, 0, 128, 128, 128, 128, 128, 128, 128, 0, 0, 0, 128, 128, 128, 128, 128, 128, 128, 0, 0, 0, 128, 128, 128, 128, 128, 128, 128, 0, 0, 0, 128, 128, 128, 128, 128, 128, 128, 0, 0, 0, 128, 128, 128, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          "height":10,
@@ -36,8 +36,8 @@
                 {
                  "name":"openWebsite",
                  "type":"string",
-                 "value":"playerMove.html"
-                }, 
+                 "value":"playerMove.php"
+                },
                 {
                  "name":"openWebsiteAllowApi",
                  "type":"bool",
@@ -48,7 +48,7 @@
          "width":10,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "draworder":"topdown",
          "id":5,
@@ -105,7 +105,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":1,
                  "properties":[
@@ -114,7 +114,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":2,
                  "properties":[
@@ -123,7 +123,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":3,
                  "properties":[
@@ -132,7 +132,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":4,
                  "properties":[
@@ -141,7 +141,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":8,
                  "properties":[
@@ -150,7 +150,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":9,
                  "properties":[
@@ -159,7 +159,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":10,
                  "properties":[
@@ -168,7 +168,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":11,
                  "properties":[
@@ -177,7 +177,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":12,
                  "properties":[
@@ -186,7 +186,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":16,
                  "properties":[
@@ -195,7 +195,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":17,
                  "properties":[
@@ -204,7 +204,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":18,
                  "properties":[
@@ -213,7 +213,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":19,
                  "properties":[
@@ -222,7 +222,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":20,
                  "properties":[
@@ -233,7 +233,7 @@
                         }]
                 }],
          "tilewidth":32
-        }, 
+        },
         {
          "columns":8,
          "firstgid":65,
@@ -251,4 +251,4 @@
  "type":"map",
  "version":1.4,
  "width":10
-}
\ No newline at end of file
+}
diff --git a/maps/tests/Metadata/playerMove.php b/maps/tests/Metadata/playerMove.php
new file mode 100644
index 00000000..a9cf0495
--- /dev/null
+++ b/maps/tests/Metadata/playerMove.php
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
+        <script>
+            window.addEventListener('load', () => {
+                WA.player.onPlayerMove(console.log);
+            })
+        </script>
+    </head>
+    <body>
+        <p>Log in the console the movement of the current player in the zone of the iframe</p>
+    </body>
+</html>
diff --git a/maps/tests/Metadata/setProperty.json b/maps/tests/Metadata/setProperty.json
index 06addc2f..db6087bb 100644
--- a/maps/tests/Metadata/setProperty.json
+++ b/maps/tests/Metadata/setProperty.json
@@ -13,7 +13,7 @@
          "width":10,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "data":[33, 34, 34, 34, 34, 34, 34, 34, 34, 35, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 49, 50, 50, 50, 50, 50, 50, 50, 50, 51],
          "height":10,
@@ -25,7 +25,7 @@
          "width":10,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "data":[0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          "height":10,
@@ -36,8 +36,8 @@
                 {
                  "name":"openWebsite",
                  "type":"string",
-                 "value":"setProperty.html"
-                }, 
+                 "value":"setProperty.php"
+                },
                 {
                  "name":"openWebsiteAllowApi",
                  "type":"bool",
@@ -48,7 +48,7 @@
          "width":10,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 101, 101, 101, 101, 101, 0, 0, 0, 0, 0, 101, 101, 101, 101, 101, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          "height":10,
@@ -60,7 +60,7 @@
          "width":10,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "draworder":"topdown",
          "id":5,
@@ -117,7 +117,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":1,
                  "properties":[
@@ -126,7 +126,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":2,
                  "properties":[
@@ -135,7 +135,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":3,
                  "properties":[
@@ -144,7 +144,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":4,
                  "properties":[
@@ -153,7 +153,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":8,
                  "properties":[
@@ -162,7 +162,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":9,
                  "properties":[
@@ -171,7 +171,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":10,
                  "properties":[
@@ -180,7 +180,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":11,
                  "properties":[
@@ -189,7 +189,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":12,
                  "properties":[
@@ -198,7 +198,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":16,
                  "properties":[
@@ -207,7 +207,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":17,
                  "properties":[
@@ -216,7 +216,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":18,
                  "properties":[
@@ -225,7 +225,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":19,
                  "properties":[
@@ -234,7 +234,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":20,
                  "properties":[
@@ -245,7 +245,7 @@
                         }]
                 }],
          "tilewidth":32
-        }, 
+        },
         {
          "columns":8,
          "firstgid":65,
@@ -263,4 +263,4 @@
  "type":"map",
  "version":1.4,
  "width":10
-}
\ No newline at end of file
+}
diff --git a/maps/tests/Metadata/setProperty.html b/maps/tests/Metadata/setProperty.php
similarity index 52%
rename from maps/tests/Metadata/setProperty.html
rename to maps/tests/Metadata/setProperty.php
index c61aa5fa..f23504f1 100644
--- a/maps/tests/Metadata/setProperty.html
+++ b/maps/tests/Metadata/setProperty.php
@@ -1,12 +1,8 @@
 <!doctype html>
 <html lang="en">
     <head>
+        <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
         <script>
-            var script = document.createElement('script');
-            // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-            // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-            script.setAttribute('src', document.referrer + 'iframe_api.js');
-            document.head.appendChild(script);
             window.addEventListener('load', () => {
                 WA.room.setProperty('iframeTest', 'openWebsite', 'https://www.wikipedia.org/');
                 WA.room.setProperty('metadata', 'openWebsite', 'https://www.wikipedia.org/');
@@ -16,4 +12,4 @@
     <body>
         <p>Change the url of this iframe and add the 'openWebsite' property to the red tile layer</p>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/maps/tests/Metadata/setTiles.html b/maps/tests/Metadata/setTiles.html
index 90b5a84d..0fb47f8b 100644
--- a/maps/tests/Metadata/setTiles.html
+++ b/maps/tests/Metadata/setTiles.html
@@ -1,12 +1,8 @@
 <!doctype html>
 <html lang="en">
     <head>
+        <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
         <script>
-            var script = document.createElement('script');
-            // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-            // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-            script.setAttribute('src', document.referrer + 'iframe_api.js');
-            document.head.appendChild(script);
 
             window.addEventListener('load', () => {
                 WA.room.setTiles([
diff --git a/maps/tests/Metadata/setTiles.json b/maps/tests/Metadata/setTiles.json
index 7eb9791a..f0baefa3 100644
--- a/maps/tests/Metadata/setTiles.json
+++ b/maps/tests/Metadata/setTiles.json
@@ -43,7 +43,7 @@
                 {
                  "name":"openWebsite",
                  "type":"string",
-                 "value":"setTiles.html"
+                 "value":"setTiles.php"
                 },
                 {
                  "name":"openWebsiteAllowApi",
diff --git a/maps/tests/Metadata/showHideLayer.html b/maps/tests/Metadata/showHideLayer.html
index c6103722..c5fd1880 100644
--- a/maps/tests/Metadata/showHideLayer.html
+++ b/maps/tests/Metadata/showHideLayer.html
@@ -1,12 +1,8 @@
 <!doctype html>
 <html lang="en">
     <head>
+        <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
         <script>
-            var script = document.createElement('script');
-            // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-            // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-            script.setAttribute('src', document.referrer + 'iframe_api.js');
-            document.head.appendChild(script);
             window.addEventListener('load', () => {
                 document.getElementById('show/hideLayer').onclick = () => {
                     if (document.getElementById('show/hideLayer').checked) {
@@ -24,4 +20,4 @@
             <label for="show/hideLayer">Crysal Layer : </label><input type="checkbox" id="show/hideLayer" name="visible" value="show" checked>
         </div>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/maps/tests/Metadata/showHideLayer.json b/maps/tests/Metadata/showHideLayer.json
index df61a655..4419979c 100644
--- a/maps/tests/Metadata/showHideLayer.json
+++ b/maps/tests/Metadata/showHideLayer.json
@@ -13,7 +13,7 @@
          "width":10,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "data":[33, 34, 34, 34, 34, 34, 34, 34, 34, 35, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 49, 50, 50, 50, 50, 50, 50, 50, 50, 51],
          "height":10,
@@ -25,7 +25,7 @@
          "width":10,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "data":[22, 0, 0, 0, 22, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 22, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 22, 0, 0, 0, 0, 0, 22, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 22, 0, 0, 22, 0, 0, 22, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          "height":10,
@@ -37,7 +37,7 @@
          "width":10,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "data":[0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          "height":10,
@@ -48,8 +48,8 @@
                 {
                  "name":"openWebsite",
                  "type":"string",
-                 "value":"showHideLayer.html"
-                }, 
+                 "value":"showHideLayer.php"
+                },
                 {
                  "name":"openWebsiteAllowApi",
                  "type":"bool",
@@ -60,7 +60,7 @@
          "width":10,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "draworder":"topdown",
          "id":5,
@@ -117,7 +117,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":1,
                  "properties":[
@@ -126,7 +126,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":2,
                  "properties":[
@@ -135,7 +135,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":3,
                  "properties":[
@@ -144,7 +144,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":4,
                  "properties":[
@@ -153,7 +153,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":8,
                  "properties":[
@@ -162,7 +162,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":9,
                  "properties":[
@@ -171,7 +171,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":10,
                  "properties":[
@@ -180,7 +180,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":11,
                  "properties":[
@@ -189,7 +189,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":12,
                  "properties":[
@@ -198,7 +198,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":16,
                  "properties":[
@@ -207,7 +207,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":17,
                  "properties":[
@@ -216,7 +216,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":18,
                  "properties":[
@@ -225,7 +225,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":19,
                  "properties":[
@@ -234,7 +234,7 @@
                          "type":"bool",
                          "value":true
                         }]
-                }, 
+                },
                 {
                  "id":20,
                  "properties":[
@@ -245,7 +245,7 @@
                         }]
                 }],
          "tilewidth":32
-        }, 
+        },
         {
          "columns":8,
          "firstgid":65,
@@ -263,4 +263,4 @@
  "type":"map",
  "version":1.4,
  "width":10
-}
\ No newline at end of file
+}
diff --git a/maps/tests/Variables/shared_variables.json b/maps/tests/Variables/shared_variables.json
index 2de5e4c0..9b457f01 100644
--- a/maps/tests/Variables/shared_variables.json
+++ b/maps/tests/Variables/shared_variables.json
@@ -12,8 +12,8 @@
                 {
                  "name":"openWebsite",
                  "type":"string",
-                 "value":"shared_variables.html"
-                }, 
+                 "value":"shared_variables.php"
+                },
                 {
                  "name":"openWebsiteAllowApi",
                  "type":"bool",
@@ -24,7 +24,7 @@
          "width":10,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          "height":10,
@@ -36,7 +36,7 @@
          "width":10,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "draworder":"topdown",
          "id":3,
@@ -59,7 +59,7 @@
                  "width":252.4375,
                  "x":2.78125,
                  "y":2.5
-                }, 
+                },
                 {
                  "height":0,
                  "id":5,
@@ -70,22 +70,22 @@
                          "name":"default",
                          "type":"string",
                          "value":"default value"
-                        }, 
+                        },
                         {
                          "name":"jsonSchema",
                          "type":"string",
                          "value":"{}"
-                        }, 
+                        },
                         {
                          "name":"persist",
                          "type":"bool",
                          "value":true
-                        }, 
+                        },
                         {
                          "name":"readableBy",
                          "type":"string",
                          "value":""
-                        }, 
+                        },
                         {
                          "name":"writableBy",
                          "type":"string",
@@ -128,4 +128,4 @@
  "type":"map",
  "version":1.5,
  "width":10
-}
\ No newline at end of file
+}
diff --git a/maps/tests/Variables/shared_variables.html b/maps/tests/Variables/shared_variables.php
similarity index 78%
rename from maps/tests/Variables/shared_variables.html
rename to maps/tests/Variables/shared_variables.php
index 21e0b998..ebeade5b 100644
--- a/maps/tests/Variables/shared_variables.html
+++ b/maps/tests/Variables/shared_variables.php
@@ -1,12 +1,8 @@
 <!doctype html>
 <html lang="en">
 <head>
+    <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
     <script>
-        var script = document.createElement('script');
-        // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-        // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-        script.setAttribute('src', document.referrer + 'iframe_api.js');
-        document.head.appendChild(script);
         window.addEventListener('load', () => {
             console.log('On load');
             WA.onInit().then(() => {
diff --git a/maps/tests/iframe.html b/maps/tests/iframe.php
similarity index 61%
rename from maps/tests/iframe.html
rename to maps/tests/iframe.php
index 038874b6..0c97c359 100644
--- a/maps/tests/iframe.html
+++ b/maps/tests/iframe.php
@@ -1,13 +1,7 @@
 <!doctype html>
 <html lang="en">
     <head>
-        <script>
-            var script = document.createElement('script');
-            // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-            // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-            script.setAttribute('src', document.referrer + 'iframe_api.js');
-            document.head.appendChild(script);
-        </script>
+        <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
     </head>
     <body>
         <button id="sendchat">Send chat message</button>
diff --git a/maps/tests/iframe_api.json b/maps/tests/iframe_api.json
index db840b3f..11f2202b 100644
--- a/maps/tests/iframe_api.json
+++ b/maps/tests/iframe_api.json
@@ -20,7 +20,7 @@
          "width":10,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          "height":10,
@@ -32,7 +32,7 @@
          "width":10,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          "height":10,
@@ -43,8 +43,8 @@
                 {
                  "name":"openWebsite",
                  "type":"string",
-                 "value":"iframe.html"
-                }, 
+                 "value":"iframe.php"
+                },
                 {
                  "name":"openWebsiteAllowApi",
                  "type":"bool",
@@ -55,7 +55,7 @@
          "width":10,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "data":[0, 0, 93, 0, 104, 0, 0, 0, 0, 0, 0, 0, 104, 0, 115, 0, 0, 0, 93, 0, 0, 0, 115, 0, 0, 0, 93, 0, 104, 0, 0, 0, 0, 0, 0, 0, 104, 0, 115, 93, 0, 0, 0, 0, 0, 0, 115, 0, 0, 104, 0, 0, 0, 0, 0, 0, 0, 0, 0, 115, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          "height":10,
@@ -67,7 +67,7 @@
          "width":10,
          "x":0,
          "y":0
-        }, 
+        },
         {
          "draworder":"topdown",
          "id":3,
@@ -121,4 +121,4 @@
  "type":"map",
  "version":1.4,
  "width":10
-}
\ No newline at end of file
+}

From 60475111cc4208252cffbe38bc5a851d8544475f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 30 Nov 2021 09:15:42 +0100
Subject: [PATCH 3/7] Fixing maps image

---
 maps/Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/maps/Dockerfile b/maps/Dockerfile
index 7fc6fd19..6cc21542 100644
--- a/maps/Dockerfile
+++ b/maps/Dockerfile
@@ -1,4 +1,4 @@
-FROM thecodingmachine/nodejs:12-apache
+FROM thecodingmachine/php:8.1-v4-apache-node12
 
 COPY --chown=docker:docker . .
 #RUN yarn install

From f40dda69f48c4f04ff4451a8e10f3b1359a62f22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 30 Nov 2021 09:34:25 +0100
Subject: [PATCH 4/7] Fixing missing header extension in new maps image

---
 maps/Dockerfile | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/maps/Dockerfile b/maps/Dockerfile
index 6cc21542..d75ade4a 100644
--- a/maps/Dockerfile
+++ b/maps/Dockerfile
@@ -6,4 +6,5 @@ COPY --chown=docker:docker . .
 #ENV NODE_ENV=production
 #ENV STARTUP_COMMAND_1="yarn run build"
 #ENV APACHE_DOCUMENT_ROOT=dist/
-RUN sudo a2enmod headers
+#RUN sudo a2enmod headers
+ENV APACHE_EXTENSION_HEADERS=1

From 06483fd5863194846786782c84ffca650645849c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 30 Nov 2021 14:23:39 +0100
Subject: [PATCH 5/7] Fixing "Query string parameters prevent WA from loading"

Due to a regression, query string parameters added to the URL (like:

http://play.workadventure.localhost/_/global/maps.workadventure.localhost/starter/map.json?utm_source=sendinblue&utm_campaign=WA+-+2021+Christmap+map+launch&utm_medium=email#foo

) were causing a crash in WA.

This commit fixes the issue (and adds a E2E test)
---
 front/src/Connexion/ConnectionManager.ts | 3 ++-
 tests/tests/test.ts                      | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/front/src/Connexion/ConnectionManager.ts b/front/src/Connexion/ConnectionManager.ts
index 22289895..b75c6bc6 100644
--- a/front/src/Connexion/ConnectionManager.ts
+++ b/front/src/Connexion/ConnectionManager.ts
@@ -163,12 +163,13 @@ class ConnectionManager {
                     console.error(err);
                 }
             } else {
+                const query = urlParams.toString();
                 roomPath =
                     window.location.protocol +
                     "//" +
                     window.location.host +
                     window.location.pathname +
-                    urlParams.toString() + //use urlParams because the token param must be deleted
+                    (query ? "?" + query : "") + //use urlParams because the token param must be deleted
                     window.location.hash;
             }
 
diff --git a/tests/tests/test.ts b/tests/tests/test.ts
index c7747578..94659ad7 100644
--- a/tests/tests/test.ts
+++ b/tests/tests/test.ts
@@ -4,8 +4,9 @@ const fs = require('fs')
 import { Selector } from 'testcafe';
 import {userAlice} from "./utils/roles";
 
+// Note: we are also testing that we can connect if the URL contains a random query string
 fixture `Variables`
-    .page `http://play.workadventure.localhost/_/global/maps.workadventure.localhost/tests/Variables/Cache/variables_tmp.json`;
+    .page `http://play.workadventure.localhost/_/global/maps.workadventure.localhost/tests/Variables/Cache/variables_tmp.json?somerandomparam=1`;
 
 test("Test that variables cache in the back don't prevent setting a variable in case the map changes", async (t: TestController) => {
     // Let's start by visiting a map that DOES not have the variable.

From d81ecb31996290aad7f5975ae360b035150f0227 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 30 Nov 2021 14:58:37 +0100
Subject: [PATCH 6/7] Making the ADMIN_URL parameter optionnal in front

This parameter is only used in the SAAS version (and ideally, should disappear completely).
The warning message that uses the ADMIN_URL should originate from the admin itself.
---
 docker-compose.single-domain.yaml | 2 +-
 docker-compose.yaml               | 2 +-
 front/webpack.config.ts           | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docker-compose.single-domain.yaml b/docker-compose.single-domain.yaml
index 52875ce8..59752cb9 100644
--- a/docker-compose.single-domain.yaml
+++ b/docker-compose.single-domain.yaml
@@ -28,7 +28,7 @@ services:
       NODE_ENV: development
       PUSHER_URL: /pusher
       UPLOADER_URL: /uploader
-      ADMIN_URL: /admin
+      #ADMIN_URL: /admin
       MAPS_URL: /maps
       ICON_URL: /icon
       STARTUP_COMMAND_1: ./templater.sh
diff --git a/docker-compose.yaml b/docker-compose.yaml
index ed5389c0..b8fa15ab 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -34,7 +34,7 @@ services:
       NODE_ENV: development
       PUSHER_URL: //pusher.workadventure.localhost
       UPLOADER_URL: //uploader.workadventure.localhost
-      ADMIN_URL: //workadventure.localhost
+      #ADMIN_URL: //workadventure.localhost
       ICON_URL: //icon.workadventure.localhost
       STARTUP_COMMAND_1: ./templater.sh
       STARTUP_COMMAND_2: yarn install
diff --git a/front/webpack.config.ts b/front/webpack.config.ts
index 9d18d51f..7a189911 100644
--- a/front/webpack.config.ts
+++ b/front/webpack.config.ts
@@ -189,7 +189,7 @@ module.exports = {
             DISABLE_NOTIFICATIONS: false,
             PUSHER_URL: undefined,
             UPLOADER_URL: null,
-            ADMIN_URL: undefined,
+            ADMIN_URL: null,
             CONTACT_URL: null,
             PROFILE_URL: null,
             ICON_URL: null,

From 8205775dc97fee69a2bb47b4f344edf2af0d2f5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 30 Nov 2021 15:02:52 +0100
Subject: [PATCH 7/7] Adding missing environment variable in
 docker-compose.prod.yml

In the new version, a new FRONT_URL environment variable is now compulsory in the Pusher.
This is done to setup CORS security in the pusher.

This commit adds this environment variable in the sample docker-compose.prod.yml file.
---
 contrib/docker/docker-compose.prod.yaml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/contrib/docker/docker-compose.prod.yaml b/contrib/docker/docker-compose.prod.yaml
index e5a7fb79..62be6749 100644
--- a/contrib/docker/docker-compose.prod.yaml
+++ b/contrib/docker/docker-compose.prod.yaml
@@ -66,6 +66,7 @@ services:
       API_URL: back:50051
       JITSI_URL: $JITSI_URL
       JITSI_ISS: $JITSI_ISS
+      FRONT_URL: https://play.${DOMAIN}
     labels:
       - "traefik.http.routers.pusher.rule=Host(`pusher.${DOMAIN}`)"
       - "traefik.http.routers.pusher.entryPoints=web,traefik"