Merge pull request #1246 from thecodingmachine/OpenWebSiteScriptAllowAPI

Cowebsite opened by script can use Iframe Api

docs/maps/api-nav.md

@@ -52,11 +52,11 @@ WA.nav.goToRoom("/_/global/<path to global map>.json#start-layer-2")
 ### Opening/closing a web page in an iFrame
 
 ```
-WA.nav.openCoWebSite(url: string): void
+WA.nav.openCoWebSite(url: string, allowApi: boolean = false, allowPolicy: string = ""): void
 WA.nav.closeCoWebSite(): void
 ```
 
-Opens the webpage at "url" in an iFrame (on the right side of the screen) or close that iFrame.
+Opens the webpage at "url" in an iFrame (on the right side of the screen) or close that iFrame. `allowApi` allows the webpage to use the "IFrame API" and execute script (it is equivalent to putting the `openWebsiteAllowApi` property in the map). `allowPolicy` grants additional access rights to the iFrame. The `allowPolicy` parameter is turned into an [`allow` feature policy in the iFrame](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allow).
 
 Example:
 
@@ -65,4 +65,3 @@ WA.nav.openCoWebSite('https://www.wikipedia.org/');
 // ...
 WA.nav.closeCoWebSite();
 ```
-

front/src/Api/Events/OpenCoWebSiteEvent.ts

@@ -5,6 +5,8 @@ import * as tg from "generic-type-guard";
 export const isOpenCoWebsite =
     new tg.IsInterface().withProperties({
         url: tg.isString,
+        allowApi: tg.isBoolean,
+        allowPolicy: tg.isString,
     }).get();
 
 /**

front/src/Api/IframeListener.ts

@@ -135,6 +135,8 @@ class IframeListener {
                 return;
             }
 
+            foundSrc = this.getBaseUrl(foundSrc, message.source);
+
             if (isIframeEventWrapper(payload)) {
                 if (payload.type === 'showLayer' && isLayerEvent(payload.data)) {
                     this._showLayerStream.next(payload.data);
@@ -168,7 +170,7 @@ class IframeListener {
                     this._loadSoundStream.next(payload.data);
                 }
                 else if (payload.type === 'openCoWebSite' && isOpenCoWebsite(payload.data)) {
-                    scriptUtils.openCoWebsite(payload.data.url, foundSrc);
+                    scriptUtils.openCoWebsite(payload.data.url, foundSrc, payload.data.allowApi, payload.data.allowPolicy);
                 }
 
                 else if (payload.type === 'closeCoWebSite') {
@@ -281,6 +283,15 @@ class IframeListener {
 
     }
 
+    private getBaseUrl(src: string, source: MessageEventSource | null): string{
+       for (const script of this.scripts) {
+           if (script[1].contentWindow === source) {
+               return script[0];
+           }
+       }
+       return src;
+    }
+
     private static getIFrameId(scriptUrl: string): string {
         return 'script' + btoa(scriptUrl);
     }

front/src/Api/ScriptUtils.ts

@@ -11,8 +11,8 @@ class ScriptUtils {
 
     }
 
-    public openCoWebsite(url: string, base: string) {
+    public openCoWebsite(url: string, base: string, api: boolean, policy: string) {
-           coWebsiteManager.loadCoWebsite(url, base);
+           coWebsiteManager.loadCoWebsite(url, base, api, policy);
     }
 
     public closeCoWebSite(){

front/src/Api/iframe/nav.ts

@@ -36,11 +36,13 @@ class WorkadventureNavigationCommands extends IframeApiContribution<Workadventur
         });
     }
 
-    openCoWebSite(url: string): void {
+    openCoWebSite(url: string, allowApi: boolean = false, allowPolicy: string = ""): void {
         sendToWorkadventure({
             "type": 'openCoWebSite',
             "data": {
-                url
+                url,
+                allowApi,
+                allowPolicy,
             }
         });
     }

front/src/iframe_api.ts

@@ -103,9 +103,9 @@ const wa = {
     /**
      * @deprecated Use WA.nav.openCoWebSite instead
      */
-    openCoWebSite(url: string): void {
+    openCoWebSite(url: string, allowApi: boolean = false, allowPolicy: string = ""): void {
         console.warn('Method WA.openCoWebSite is deprecated. Please use WA.nav.openCoWebSite instead');
-        nav.openCoWebSite(url);
+        nav.openCoWebSite(url, allowApi, allowPolicy);
     },
 
     /**

maps/tests/Metadata/cowebsiteAllowApi.html

@@ -0,0 +1,17 @@
+<!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>
+    </body>
+</html>

maps/tests/Metadata/cowebsiteAllowApi.js

@@ -0,0 +1 @@
+WA.nav.openCoWebSite("cowebsiteAllowApi.html", true, "");

maps/tests/Metadata/cowebsiteAllowApi.json

@@ -0,0 +1,98 @@
+{ "compressionlevel":-1,
+ "height":10,
+ "infinite":false,
+ "layers":[
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 52, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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,
+         "id":2,
+         "name":"start",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "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,
+         "id":1,
+         "name":"bottom",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "draworder":"topdown",
+         "id":3,
+         "name":"floorLayer",
+         "objects":[
+                {
+                 "height":116.5,
+                 "id":1,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "text":"Test : \nThe iframe is opened by script.\n\nResult : \nA message is send to the chat.",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":295.875,
+                 "x":11.8125,
+                 "y":188.5
+                }],
+         "opacity":1,
+         "type":"objectgroup",
+         "visible":true,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 16, 0, 0, 0, 16, 16, 16, 0, 0, 16, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 16, 16, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 16, 16, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":4,
+         "name":"mushroom",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }],
+ "nextlayerid":5,
+ "nextobjectid":2,
+ "orientation":"orthogonal",
+ "properties":[
+        {
+         "name":"script",
+         "type":"string",
+         "value":"cowebsiteAllowApi.js"
+        }],
+ "renderorder":"right-down",
+ "tiledversion":"1.4.3",
+ "tileheight":32,
+ "tilesets":[
+        {
+         "columns":8,
+         "firstgid":1,
+         "image":"tileset_dungeon.png",
+         "imageheight":256,
+         "imagewidth":256,
+         "margin":0,
+         "name":"tileset_dungeon",
+         "spacing":0,
+         "tilecount":64,
+         "tileheight":32,
+         "tilewidth":32
+        }],
+ "tilewidth":32,
+ "type":"map",
+ "version":1.4,
+ "width":10
+}

maps/tests/index.html

@@ -162,6 +162,14 @@
                     <a href="#" class="testLink" data-testmap="animated_tiles.json" target="_blank">Test animated tiles</a>
                 </td>
             </tr>
+            <tr>
+                <td>
+                    <input type="radio" name="test-cowebsite-allowAPI"> Success <input type="radio" name="test-cowebsite-allowAPI"> Failure <input type="radio" name="test-cowebsite-allowAPI" checked> Pending
+                </td>
+                <td>
+                    <a href="#" class="testLink" data-testmap="Metadata/cowebsiteAllowApi.json" target="_blank">Test cowebsite opened by script is allowed to use IFrame API</a>
+                </td>
+            </tr>
         </table>
 
         <script>