Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1245 from thecodingmachine/cowebsiteAllowApibyScript

Browse source 
Allow a website opened by script to use iframe_api
This commit is contained in:
David Négrier 2021-06-29 16:10:22 +02:00 • committed by GitHub
commit 3afc725af6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 146 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

8
CHANGELOG.md
View file

@ -1,4 +1,10 @@
## Version 1.3.9 - in dev ## Version 1.4.2
## Updates
- A script in an iframe opened by another script can use the IFrame API.
## Version 1.4.0
### BREAKING CHANGES ### BREAKING CHANGES

4
docs/maps/api-reference.md
View file

@ -190,11 +190,11 @@ WA.goToPage('https://www.wikipedia.org/');
### Opening/closing a web page in an iFrame ### Opening/closing a web page in an iFrame
``` ```
openCoWebSite(url: string): void openCoWebSite(url : string, allowApi: boolean = false, allowPolicy: string = "") : void
closeCoWebSite(): void 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: Example:

2
front/src/Api/Events/OpenCoWebSiteEvent.ts
View file

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

2
front/src/Api/IframeListener.ts
View file

@ -114,7 +114,7 @@ class IframeListener {
this._loadSoundStream.next(payload.data); this._loadSoundStream.next(payload.data);
} }
else if (payload.type === 'openCoWebSite' && isOpenCoWebsite(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') { else if (payload.type === 'closeCoWebSite') {

4
front/src/Api/ScriptUtils.ts
View file

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

8
front/src/iframe_api.ts
View file

@ -22,7 +22,7 @@ interface WorkAdventureApi {
openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup; openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup;
openTab(url : string): void; openTab(url : string): void;
goToPage(url : string): void; goToPage(url : string): void;
openCoWebSite(url : string): void; openCoWebSite(url : string, allowApi: boolean, allowPolicy: string): void;
closeCoWebSite(): void; closeCoWebSite(): void;
disablePlayerControls(): void; disablePlayerControls(): void;
restorePlayerControls(): void; restorePlayerControls(): void;
@ -166,11 +166,13 @@ window.WA = {
}, '*'); }, '*');
}, },
openCoWebSite(url : string) : void{ openCoWebSite(url : string, allowApi: boolean = false, allowPolicy: string = "") : void{
window.parent.postMessage({ window.parent.postMessage({
"type" : 'openCoWebSite', "type" : 'openCoWebSite',
"data" : { "data" : {
url url,
allowApi,
allowPolicy,
} as OpenCoWebSiteEvent } as OpenCoWebSiteEvent
}, '*'); }, '*');
}, },

20
maps/tests/Metadata/cowebsiteAllowApi.html Normal file
View file

@ -0,0 +1,20 @@
<!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>
</head>
<body>
<p>Website opened by script.</p>
<script>
window.addEventListener('load', () => {
WA.sendChatMessage('The iframe opened by a script works !', 'Mr Robot');
})
</script>
</body>
</html>

1
maps/tests/Metadata/cowebsiteAllowApi.js Normal file
View file

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

98
maps/tests/Metadata/cowebsiteAllowApi.json Normal file
View file

@ -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
}

BIN
maps/tests/Metadata/tileset_dungeon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.5 KiB

8
maps/tests/index.html
View file

@ -90,6 +90,14 @@
<a href="#" class="testLink" data-testmap="help_camera_setting.json" target="_blank">Test the HelpCameraSettingScene</a> <a href="#" class="testLink" data-testmap="help_camera_setting.json" target="_blank">Test the HelpCameraSettingScene</a>
</td> </td>
</tr> </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 a iframe opened by a script can use Iframe API</a>
</td>
</tr>
</table> </table>
<script> <script>