fix: finally working embeds with github.dev

andre-dietrich · May 15, 2024 · 0da2c86 · 0da2c86
1 parent eaf602c
commit 0da2c86
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,10 @@ This is a preview module for [LiaScript](https://LiaScript.github.io) courses de
 
 ![Demo of the previewer](assets/demo.gif)
 
+![test](https://www.hackerspace-ffm.de/wiki/images/Test-sign_640.png)
+
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/H4zckOOf4rA?si=IIpEEY_0nZwpb8V-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
 ## Usage
 
 After installing press <kbd>F1</kbd> to open the fuzzy search and type "liascript", three options will be presented:

diff --git a/liascript/index.2aaafc1f.js b/liascript/index.2aaafc1f.js
diff --git a/liascript/index.4ca86089.js b/liascript/index.4ca86089.js
diff --git a/liascript/index.dc0fa47d.js b/liascript/index.dc0fa47d.js
diff --git a/liascript/index.ef4f64b2.js b/liascript/index.ef4f64b2.js
diff --git a/liascript/index.html b/liascript/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><title>Lia</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><script src="./index.c7a6ef7b.js"></script><script defer type="module" src="./index.7612a0f5.js"></script><script defer src="./index.7d9384fb.js" nomodule></script><script defer type="module" src="./index.cc7df34b.js"></script><script defer src="./index.b9ed5a40.js" nomodule></script><script defer type="module" src="./index.ab44ef94.js"></script><script defer src="./index.86dd56d4.js" nomodule></script><script defer type="module" src="./index.2aaafc1f.js"></script><script defer src="./index.dc0fa47d.js" nomodule></script><script defer type="module" src="./index.2238fc60.js"></script><script defer src="./index.fad28349.js" nomodule></script><script defer type="module" src="./index.40c93815.js"></script><script defer src="./index.b1f73fbe.js" nomodule></script><script defer type="module" src="./index.fd1f7137.js"></script><script defer src="./index.b432ef75.js" nomodule></script><script defer type="module" src="./index.aa26d311.js"></script><script defer src="./index.4ae92b65.js" nomodule></script><script defer type="module" src="./index.c5d89bdd.js"></script><script defer src="./index.66ebf531.js" nomodule></script><link rel="icon shortcut" sizes="192x192" href="./up_/up_/assets/logo_192.png"><meta name="mobile-web-app-capable" content="yes"><meta name="application-name" content="Lia"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title" content="LiaScript"><meta name="msapplication-TileImage" content="./up_/up_/assets/logo_192.png"><meta name="msapplication-TileColor" content="#0071c5"><meta name="msapplication-tap-highlight" content="no"><meta name="theme-color" content="#000000"><meta name="description" content="LiaScript is a service for running free and interactive online courses, build with its own Markup-language. So check out the following course ;-)"><link rel="apple-touch-icon" href="./logo.8a716d9b.png"><link rel="icon" href="./logo.8a716d9b.png" type="image/png"><style>.lds-dual-ring{width:150px;height:150px;display:inline-block}.lds-dual-ring:after{content:" ";width:128px;height:128px;border:5px solid #000;border-color:#000 #0000;border-radius:50%;margin:1px;animation:1.2s linear infinite lds-dual-ring;display:block}@keyframes lds-dual-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}</style><link rel="stylesheet" href="./index.8170c3eb.css"></head><body> <noscript> This page requires JavaScript to be enabled! </noscript> </body></html>
+<!DOCTYPE html><html lang="en"><head><title>Lia</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><script src="./index.c7a6ef7b.js"></script><script defer type="module" src="./index.7612a0f5.js"></script><script defer src="./index.7d9384fb.js" nomodule></script><script defer type="module" src="./index.cc7df34b.js"></script><script defer src="./index.b9ed5a40.js" nomodule></script><script defer type="module" src="./index.ab44ef94.js"></script><script defer src="./index.86dd56d4.js" nomodule></script><script defer type="module" src="./index.4ca86089.js"></script><script defer src="./index.ef4f64b2.js" nomodule></script><script defer type="module" src="./index.2238fc60.js"></script><script defer src="./index.fad28349.js" nomodule></script><script defer type="module" src="./index.40c93815.js"></script><script defer src="./index.b1f73fbe.js" nomodule></script><script defer type="module" src="./index.fd1f7137.js"></script><script defer src="./index.b432ef75.js" nomodule></script><script defer type="module" src="./index.aa26d311.js"></script><script defer src="./index.4ae92b65.js" nomodule></script><script defer type="module" src="./index.c5d89bdd.js"></script><script defer src="./index.66ebf531.js" nomodule></script><link rel="icon shortcut" sizes="192x192" href="./up_/up_/assets/logo_192.png"><meta name="mobile-web-app-capable" content="yes"><meta name="application-name" content="Lia"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title" content="LiaScript"><meta name="msapplication-TileImage" content="./up_/up_/assets/logo_192.png"><meta name="msapplication-TileColor" content="#0071c5"><meta name="msapplication-tap-highlight" content="no"><meta name="theme-color" content="#000000"><meta name="description" content="LiaScript is a service for running free and interactive online courses, build with its own Markup-language. So check out the following course ;-)"><link rel="apple-touch-icon" href="./logo.8a716d9b.png"><link rel="icon" href="./logo.8a716d9b.png" type="image/png"><style>.lds-dual-ring{width:150px;height:150px;display:inline-block}.lds-dual-ring:after{content:" ";width:128px;height:128px;border:5px solid #000;border-color:#000 #0000;border-radius:50%;margin:1px;animation:1.2s linear infinite lds-dual-ring;display:block}@keyframes lds-dual-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}</style><link rel="stylesheet" href="./index.8170c3eb.css"></head><body> <noscript> This page requires JavaScript to be enabled! </noscript> </body></html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "url": "https://github.com/andre-dietrich/liascript-preview-vscode-web.git"
   },
   "icon": "icon.png",
-  "version": "0.2.46",
+  "version": "0.2.48",
   "engines": {
     "vscode": "^1.89.0"
   },

diff --git a/src/web/extension.ts b/src/web/extension.ts
@@ -365,6 +365,9 @@ function createPreview(
 
       webviewPanel.webview.onDidReceiveMessage(
         (message) => {
+          // output a message to the console
+          console.warn('liascript-preview-web: received message ->', message)
+
           switch (message.cmd) {
             case 'ready': {
               console.warn('ready ... ')
@@ -389,6 +392,7 @@ function createPreview(
                   origin: message.param.src,
                 },
               })
+
               break
             }
             case 'eval': {
@@ -515,8 +519,10 @@ function setHtmlContent(extensionUri: vscode.Uri, webview: vscode.Webview) {
         <title>LiaScript - Preview</title>
 
         <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
-        <meta http-equiv="Cross-Origin-Embedder-Policy" content="credentialless" />
-
+        <meta http-equiv="Access-Control-Allow-Origin" content="*" />
+        <meta http-equiv="Cross-Origin-Opener-Policy" content="cross-origin">
+        <!-- Set Content Security Policy to allow resources from trusted sources -->
+        <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval' blob:; img-src * https://www.hackerspace-ffm.de data: blob:; frame-src * https://www.youtube-nocookie.com blob:; script-src * 'unsafe-inline' 'unsafe-eval' blob:; style-src * 'unsafe-inline' blob:;">
         <script>
         const vscode = acquireVsCodeApi();
 
@@ -534,6 +540,7 @@ function setHtmlContent(extensionUri: vscode.Uri, webview: vscode.Webview) {
     }
 
     window.addEventListener("message", (event) => {
+      console.warn("XXXXXXXXXXXXXXXXXXx received message =>", event.data)
       switch (event.data.cmd) {
         case "jit":
           sendToLia("jit", event.data.param)
@@ -701,10 +708,35 @@ function setHtmlContent(extensionUri: vscode.Uri, webview: vscode.Webview) {
           }
 
           window.LIA.fetchError = (tag, src) => {
+            console.warn("XXXXXXXXXXXXXXfetch error", tag, src)
             if (blob[src]) {
               window.injectHandler({tag, src})
             } else {
-              parent.postMessage({cmd: 'media.load', param: {tag, src}}, "*")
+              if ( src.startsWith('http://') || src.startsWith('https://')) {
+                const xhr = new XMLHttpRequest();
+                xhr.open('GET', src, true);
+                xhr.responseType = 'blob';
+                
+                console.log('XXXXXXXXXXXXXXx Image fetching:', src);
+                xhr.onload = () => {
+                    if (xhr.status === 200) {
+                      const data = xhr.response;
+                      window.injectHandler({tag, src, data})
+                    } else {
+                        console.error('Error fetching image:', xhr.statusText);
+                    }
+                };
+
+                xhr.onerror = () => {
+                    console.error('Network error occurred.');
+                };
+
+                xhr.withCredentials = false;
+
+                xhr.send();
+              } else {
+                parent.postMessage({cmd: 'media.load', param: {tag, src}}, "*")
+              }
             }
           }
         \`)
@@ -719,10 +751,12 @@ function setHtmlContent(extensionUri: vscode.Uri, webview: vscode.Webview) {
     <iframe
       id="lia"
       sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock allow-downloads"
-      allow="clipboard-read; clipboard-write;"
+      allow="clipboard-read; clipboard-write; cross-origin-isolated; autoplay; fullscreen; geolocation; microphone; midi; vr;"
       class="webview ready"
-      src="${webview.asWebviewUri(liascriptPath)}?vscode-coi=3"
-      style="width: 100%; height: 100%; border: 0px">
+      src="${webview.asWebviewUri(
+        liascriptPath
+      )}?vscode-coi=3&extensionId=vscode.markdown-language-features&platform=browser&vscode-resource-base-authority=vscode-resource.vscode-cdn.net"
+      style="width: 100%; height: 100%; border: 0px; pointer-events: auto;">
     </iframe>
     </body>
     </html>`
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang="en"><head><title>Lia</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><script src="./index.c7a6ef7b.js"></script><script defer type="module" src="./index.7612a0f5.js"></script><script defer src="./index.7d9384fb.js" nomodule></script><script defer type="module" src="./index.cc7df34b.js"></script><script defer src="./index.b9ed5a40.js" nomodule></script><script defer type="module" src="./index.ab44ef94.js"></script><script defer src="./index.86dd56d4.js" nomodule></script><script defer type="module" src="./index.2aaafc1f.js"></script><script defer src="./index.dc0fa47d.js" nomodule></script><script defer type="module" src="./index.2238fc60.js"></script><script defer src="./index.fad28349.js" nomodule></script><script defer type="module" src="./index.40c93815.js"></script><script defer src="./index.b1f73fbe.js" nomodule></script><script defer type="module" src="./index.fd1f7137.js"></script><script defer src="./index.b432ef75.js" nomodule></script><script defer type="module" src="./index.aa26d311.js"></script><script defer src="./index.4ae92b65.js" nomodule></script><script defer type="module" src="./index.c5d89bdd.js"></script><script defer src="./index.66ebf531.js" nomodule></script><link rel="icon shortcut" sizes="192x192" href="./up_/up_/assets/logo_192.png"><meta name="mobile-web-app-capable" content="yes"><meta name="application-name" content="Lia"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title" content="LiaScript"><meta name="msapplication-TileImage" content="./up_/up_/assets/logo_192.png"><meta name="msapplication-TileColor" content="#0071c5"><meta name="msapplication-tap-highlight" content="no"><meta name="theme-color" content="#000000"><meta name="description" content="LiaScript is a service for running free and interactive online courses, build with its own Markup-language. So check out the following course ;-)"><link rel="apple-touch-icon" href="./logo.8a716d9b.png"><link rel="icon" href="./logo.8a716d9b.png" type="image/png"><style>.lds-dual-ring{width:150px;height:150px;display:inline-block}.lds-dual-ring:after{content:" ";width:128px;height:128px;border:5px solid #000;border-color:#000 #0000;border-radius:50%;margin:1px;animation:1.2s linear infinite lds-dual-ring;display:block}@keyframes lds-dual-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}</style><link rel="stylesheet" href="./index.8170c3eb.css"></head><body> <noscript> This page requires JavaScript to be enabled! </noscript> </body></html>
		<!DOCTYPE html><html lang="en"><head><title>Lia</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><script src="./index.c7a6ef7b.js"></script><script defer type="module" src="./index.7612a0f5.js"></script><script defer src="./index.7d9384fb.js" nomodule></script><script defer type="module" src="./index.cc7df34b.js"></script><script defer src="./index.b9ed5a40.js" nomodule></script><script defer type="module" src="./index.ab44ef94.js"></script><script defer src="./index.86dd56d4.js" nomodule></script><script defer type="module" src="./index.4ca86089.js"></script><script defer src="./index.ef4f64b2.js" nomodule></script><script defer type="module" src="./index.2238fc60.js"></script><script defer src="./index.fad28349.js" nomodule></script><script defer type="module" src="./index.40c93815.js"></script><script defer src="./index.b1f73fbe.js" nomodule></script><script defer type="module" src="./index.fd1f7137.js"></script><script defer src="./index.b432ef75.js" nomodule></script><script defer type="module" src="./index.aa26d311.js"></script><script defer src="./index.4ae92b65.js" nomodule></script><script defer type="module" src="./index.c5d89bdd.js"></script><script defer src="./index.66ebf531.js" nomodule></script><link rel="icon shortcut" sizes="192x192" href="./up_/up_/assets/logo_192.png"><meta name="mobile-web-app-capable" content="yes"><meta name="application-name" content="Lia"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title" content="LiaScript"><meta name="msapplication-TileImage" content="./up_/up_/assets/logo_192.png"><meta name="msapplication-TileColor" content="#0071c5"><meta name="msapplication-tap-highlight" content="no"><meta name="theme-color" content="#000000"><meta name="description" content="LiaScript is a service for running free and interactive online courses, build with its own Markup-language. So check out the following course ;-)"><link rel="apple-touch-icon" href="./logo.8a716d9b.png"><link rel="icon" href="./logo.8a716d9b.png" type="image/png"><style>.lds-dual-ring{width:150px;height:150px;display:inline-block}.lds-dual-ring:after{content:" ";width:128px;height:128px;border:5px solid #000;border-color:#000 #0000;border-radius:50%;margin:1px;animation:1.2s linear infinite lds-dual-ring;display:block}@keyframes lds-dual-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}</style><link rel="stylesheet" href="./index.8170c3eb.css"></head><body> <noscript> This page requires JavaScript to be enabled! </noscript> </body></html>