workadventure/maps/tests/EmbeddedWebsite/website_in_map_script.php
David Négrier 41fd848fa0 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.
2021-11-29 19:05:13 +01:00

82 lines
3.5 KiB
PHP

<!doctype html>
<html lang="en">
<head>
<script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
<script>
window.addEventListener('load', () => {
console.log('On load');
WA.onInit().then(() => {
console.log('After WA init');
const createButton = document.getElementById('createEmbeddedWebsite');
const deleteButton = document.getElementById('deleteEmbeddedWebsite');
const xField = document.getElementById('x');
const yField = document.getElementById('y');
const widthField = document.getElementById('width');
const heightField = document.getElementById('height');
const urlField = document.getElementById('url');
const visibleField = document.getElementById('visible');
createButton.addEventListener('click', () => {
console.log('CREATING NEW EMBEDDED IFRAME');
WA.room.website.create({
name: "test",
url: urlField.value,
position: {
x: parseInt(xField.value),
y: parseInt(yField.value),
width: parseInt(widthField.value),
height: parseInt(heightField.value),
},
visible: !!visibleField.value,
});
});
deleteButton.addEventListener('click', () => {
WA.room.website.delete("test");
});
xField.addEventListener('change', async function() {
const website = await WA.room.website.get('test');
website.x = parseInt(this.value);
});
yField.addEventListener('change', async function() {
const website = await WA.room.website.get('test');
website.y = parseInt(this.value);
});
widthField.addEventListener('change', async function() {
const website = await WA.room.website.get('test');
website.width = parseInt(this.value);
});
heightField.addEventListener('change', async function() {
const website = await WA.room.website.get('test');
website.height = parseInt(this.value);
});
urlField.addEventListener('change', async function() {
const website = await WA.room.website.get('test');
website.url = this.value;
});
visibleField.addEventListener('change', async function() {
const website = await WA.room.website.get('test');
website.visible = this.checked;
});
});
})
</script>
</head>
<body>
X: <input type="text" id="x" value="64" /><br/>
Y: <input type="text" id="y" value="64" /><br/>
width: <input type="text" id="width" value="600" /><br/>
height: <input type="text" id="height" value="400" /><br/>
URL: <input type="text" id="url" value="https://mensuel.framapad.org/p/rt6c904745-9oxm?lang=en" /><br/>
Visible: <input type="checkbox" id="visible" value=1 /><br/>
<button id="createEmbeddedWebsite">Create embedded website</button>
<button id="deleteEmbeddedWebsite">Delete embedded website</button>
</body>
</html>