Skip to content

Commit

Permalink
plugin feature added
Browse files Browse the repository at this point in the history
  • Loading branch information
Byson94 committed Nov 29, 2024
1 parent 3322e31 commit 90d66e2
Show file tree
Hide file tree
Showing 12 changed files with 558 additions and 76 deletions.
12 changes: 11 additions & 1 deletion Engine/html/Engine/Engine.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,17 @@
let engineState;
</script>

<!-- Plugin manager -->
<script type="module" src="../../../Plugin manager/load.js"></script>
<script type="module" src="../../../Plugin manager/sanitizer.js"></script>

<!-- CodeMirror CSS -->
<link rel="stylesheet" href="../../../libraries/codemirror/codemirror.min.css">
<link rel="stylesheet" href="../../../libraries/codemirror/theme/3024-night.css">
<link rel="stylesheet" href="../../../libraries/codemirror/theme/3024-day.css">
<link rel="stylesheet" href="../../../libraries/codemirror/theme/dracula.css">
<link rel="stylesheet" href="../../../libraries/codemirror/addons/show-hint.css">
<link rel="stylesheet" href="../../../libraries/codemirror/addons/lint.css">

<!-- Blocky -->
<script src="../../../libraries/blockly/blockly.min.js"></script>
Expand Down Expand Up @@ -178,6 +183,7 @@ <h3>Add Frame Duration</h3>
<script src="../../../libraries/codemirror/addons/javascript-hint.js"></script>
<script src="../../../libraries/codemirror/addons/active-line.js"></script>
<script src="../../../libraries/codemirror/addons/mark-selection.js"></script>
<script src="../../../libraries/codemirror/addons/lint.js"></script>

<!-- Ensure script files are included in the correct order -->
<script src="../../JavaScript/Engine/BlocklyEditor.js"></script>
Expand Down Expand Up @@ -214,8 +220,11 @@ <h3>Add Frame Duration</h3>
tabSize: 4,
autofocus: true,
autoCloseBrackets: true,
gutters: ["CodeMirror-lint-markers"],
lint: true,
hintOptions: {
// Configure hint options if needed (not yet)
completeSingle: false,
hint: CodeMirror.hint.javascript,
},
styleActiveLine: true,
matchBrackets: true
Expand All @@ -229,6 +238,7 @@ <h3>Add Frame Duration</h3>
// Automatically trigger autocomplete while typing
codeMirrorEditor.on('inputRead', function(cm, change) {
if (change.text[0] !== undefined) {
// Trigger autocomplete
CodeMirror.commands.autocomplete(cm, null, { completeSingle: false });
}
});
Expand Down
28 changes: 14 additions & 14 deletions Engine/html/Engine/PreviewGame.html
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,10 @@
<h3>Console</h3>
</div>

<!-- Plugin manager -->
<script type="module" src="../../../Plugin manager/load.js"></script>
<script type="module" src="../../../Plugin manager/sanitizer.js"></script>

<script type="module">
// import lfjs (custom api)
import * as lfjs from '../../../lfjs/api.js'
Expand Down Expand Up @@ -223,24 +227,20 @@ <h3>Console</h3>
}
});

if (typeof BlocklyCode === 'string' && BlocklyCode.trim()) {
try {
eval(BlocklyCode, {lfjs: lfjs,});
} catch (e) {
console.error('Error evaluating BlocklyCode:', e);
}
} else {
console.warn('Invalid or empty BlocklyCode.');
}

if (typeof JSCode === 'string' && JSCode.trim()) {
if (typeof BlocklyCode === 'string' && BlocklyCode.trim() && typeof JSCode === 'string' && JSCode.trim()) {
try {
eval(JSCode, {lfjs: lfjs});
// Combine both BlocklyCode and JSCode into a new function and execute them
new Function('BlocklyCode', 'JSCode', 'lfjs', `
// Executing BlocklyCode
${BlocklyCode}
// Executing JSCode
${JSCode}
`)(BlocklyCode, JSCode, lfjs);
} catch (e) {
console.error('Error evaluating JSCode:', e);
console.error('Error evaluating combined code:', e);
}
} else {
console.warn('Invalid or empty JSCode.');
console.warn('Invalid or empty BlocklyCode or JSCode.');
}

layer.draw()
Expand Down
4 changes: 4 additions & 0 deletions Engine/html/main/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,10 @@ <h2>Create New Project</h2>
<h4>New to LiteForge-Evo? <a href="https://github.com/Byson94/LiteForge-Evo/blob/main/Documentation.md">Click here to get started!</a></h4>
</div>
</div>

<!-- Plugin manager -->
<script type="module" src="../../../Plugin manager/load.js"></script>
<script type="module" src="../../../Plugin manager/sanitizer.js"></script>

<script>
function createClicked() {
Expand Down
79 changes: 72 additions & 7 deletions Engine/html/settings/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ <h1>Settings</h1>
</div>

<div class="content">
<h2 style="text-decoration: underline;">Theme</h2>
<div class="engine-theme-selector">
<label for="engine-theme-select">Engine Theme:</label>
<select id="engine-theme-select">
Expand All @@ -28,24 +29,88 @@ <h1>Settings</h1>
<option value="3024-day">3024 Day</option>
<option value="dracula">Dracula</option>
</select>
</div>
<div class="plugin-selector" style="display: none;">
</div>
<h2 style="text-decoration: underline;">Plugin</h2>
<div class="plugin-selector">
<label for="plugin-url">Engine Plugin (url):</label>
<input id="plugin-url-input">
<input id="plugin-url-input" type="file" accept=".js" style="display: none;">
<div id="plugin-selector">
<button id="custom-file-button">Choose File</button>
<span id="plugin-file-name">No file selected</span>
</div>
</div>

<p style="font-weight: 900; text-decoration: underline; color: yellow;">Warning:</p>
<p style="color: yellow;"> Never use plugins from untrusted sources. They may be malicious and can potentially cause harm to your system or compromise the safety of others.</p>
</div>

<!-- Plugin manager -->
<script type="module" src="../../../Plugin manager/load.js"></script>
<script type="module" src="../../../Plugin manager/sanitizer.js"></script>

<script>
document.getElementById('custom-file-button').addEventListener('click', function () {

document.getElementById('plugin-url-input').click();
});

document.getElementById('plugin-url-input').addEventListener('change', function () {
const file = this.files[0];

if (file) {

document.getElementById('plugin-file-name').textContent = file.name;
} else {

document.getElementById('plugin-file-name').textContent = "No file selected";
}
});

document.getElementById('plugin-url-input').addEventListener('change', function(event) {
const file = event.target.files[0];

if (file) {
console.log("Selected file:", file);

if (file.type === "application/javascript" || file.name.endsWith(".js")) {
const reader = new FileReader();

reader.onload = function(e) {
const fileContent = e.target.result;


saveToCookie(file.name, fileContent);
};

reader.readAsText(file);
} else {
alert("Please select a valid .js file");
}
} else {
alert("No file selected");
}
});

function saveToCookie(fileName, content) {
const encodedContent = encodeURIComponent(content);

document.cookie = `engine_plugin=${encodedContent}; SameSite=Lax; path=/; max-age=3600`;

console.log("File content saved to cookie successfully!");
}

function BackButtonClicked() {
savePluginURL();
window.location.href = "../main/";
}

function savePluginURL() {
const url = document.getElementById('plugin-url-input').value
const file = document.getElementById('plugin-url-input').files[0];
const fileName = file ? file.name : '';
const currentTheme = localStorage.getItem('EngineDATA') ? JSON.parse(localStorage.getItem('EngineDATA')).editorTheme : null;

const data = {
'EngineURL': url,
'EngineURL': fileName,
'editorTheme': currentTheme
};

Expand Down Expand Up @@ -74,9 +139,9 @@ <h1>Settings</h1>
document.getElementById('theme-select').value = data.editorTheme;
}


if (data.EngineURL) {
document.getElementById('plugin-url-input').value = data.EngineURL;

document.getElementById('plugin-file-name').textContent = `Selected Plugin: ${data.EngineURL}`;
}
}
}
Expand Down
22 changes: 22 additions & 0 deletions Engine/html/settings/settings.css
Original file line number Diff line number Diff line change
Expand Up @@ -124,3 +124,25 @@ body {
border-color: #007bff;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
}
#plugin-url-input {
display: none;
}

#custom-file-button {
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
}

#custom-file-button:hover {
background-color: #0056b3;
}

#plugin-file-name {
margin-left: 10px;
font-size: 14px;
color: #ffffff;
}
11 changes: 3 additions & 8 deletions Engine/html/showcase/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,11 @@
<iframe src="https://itch.io/embed-upload/11510690?color=333333" allowfullscreen></iframe>
<h4>DVD Animation - 1st Animation Made</h4>
</div>
<div id="Item-2">
<iframe src="https://itch.io/embed-upload/11510690?color=333333" allowfullscreen></iframe>
<h4>DVD Animation - 1st Animation Made</h4>
</div>
<div id="Item-3">
<iframe src="https://itch.io/embed-upload/11510690?color=333333" allowfullscreen></iframe>
<h4>DVD Animation - 1st Animation Made</h4>
</div>
</div>
<a href="../main/" class="back-button">Back to Engine</a>
<!-- Plugin manager -->
<script type="module" src="../../../Plugin manager/load.js"></script>
<script type="module" src="../../../Plugin manager/sanitizer.js"></script>
<script>
function updateScale() {
const gameItem = document.getElementById('gameItem');
Expand Down
66 changes: 31 additions & 35 deletions Plugin manager/load.js
Original file line number Diff line number Diff line change
@@ -1,40 +1,36 @@
let savedData = localStorage.getItem("EngineDATA");
import { checkIfSafe } from "./sanitizer.js";

if (savedData) {
let data = JSON.parse(savedData);
let loadURL = data.EngineURL;

// Create an iframe element
let iframe = document.createElement("iframe");
iframe.style.display = "none"; // Hide the iframe
iframe.src = loadURL;
function getCookie(name) {
const nameEq = name + "=";
const cookies = document.cookie.split(';');

iframe.onload = function() {
try {
// When the iframe has loaded, get its content
let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

// Extract all scripts in the iframe
let scripts = iframeDocument.getElementsByTagName('script');
let jsCode = '';

for (let script of scripts) {
if (script.src) {
// If it's an external script, you can get the URL
console.log(`External script: ${script.src}`);
} else {
// Inline script: Extract the content
jsCode += script.innerText || script.textContent;
}
}

// Now jsCode holds the JS code of the iframe
console.log("Extracted JS code:", jsCode);
} catch (error) {
console.error("Error accessing iframe content:", error);
for (let i = 0; i < cookies.length; i++) {
let cookie = cookies[i].trim();
if (cookie.indexOf(nameEq) === 0) {
return decodeURIComponent(cookie.substring(nameEq.length));
}
};
}

return null;
}

// Append the iframe to the body
document.body.appendChild(iframe);
function injectScript(content) {
let result = checkIfSafe(content)
if (result === false) {
console.error("Aborted loading the plugin due to suspicious code")
return
}
const scriptElement = document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.textContent = content;
document.head.appendChild(scriptElement);
}

let cookieValue = getCookie('engine_plugin');

if (cookieValue) {
injectScript(cookieValue);
console.log("Script injected successfully.");
} else {
console.log("Cookie not found.");
}
30 changes: 30 additions & 0 deletions Plugin manager/sanitizer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
const unsafePatterns = [
{ pattern: /import\s+[^\n]*/, replacement: '' },
{ pattern: /export\s+[^\n]*/, replacement: '' },
{ pattern: /fetch\s*\([^\)]*\)/, replacement: '' },
{ pattern: /XMLHttpRequest\s*\([^\)]*\)/, replacement: '' },
{ pattern: /eval\s*\([^\)]*\)/, replacement: '' },
{ pattern: /new\s+Function\s*\([^\)]*\)/, replacement: '' },
{ pattern: /window\.location\s*=\s*[^\n]*/, replacement: '' },
{ pattern: /window\.open\s*\([^\)]*\)/, replacement: '' },
{ pattern: /document\.write\s*\([^\)]*\)/, replacement: '' },
{ pattern: /document\.cookie\s*=\s*[^\n]*/, replacement: '' },
{ pattern: /localStorage\s*\.[a-zA-Z0-9]+\s*=\s*[^\n]*/, replacement: '' },
{ pattern: /FileReader\s*\([^\)]*\)/, replacement: '' },
{ pattern: /WebSocket\s*\([^\)]*\)/, replacement: '' },
{ pattern: /localStorage\.setItem\s*\([^\)]*\)/, replacement: '' },
];

function checkIfSafe(code) {
for (let { pattern } of unsafePatterns) {
if (pattern.test(code)) {
console.error("PLUGIN is SUS");
return false;
}
}

console.log("Plugin seems safe (not 100% accurate)");
return true;
}

export { checkIfSafe }
11 changes: 0 additions & 11 deletions TEST.html

This file was deleted.

4 changes: 4 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@
<!-- Text in the grey background -->
<div id="loadingOverlay">Loading the engine...</div>

<!-- Plugin manager -->
<script type="module" src="./Plugin manager/load.js"></script>
<script type="module" src="./Plugin manager/sanitizer.js"></script>

<script src="Engine/JavaScript/renderer.js"></script>
<script>
// Going to the engines mainmenu
Expand Down
Loading

0 comments on commit 90d66e2

Please sign in to comment.