fix: address url trust issues by github security scans

phcode-dev · Jan 5, 2024 · c532975 · c532975
1 parent 8c60c8e
commit c532975
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 22 deletions.
diff --git a/src/LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js b/src/LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js
@@ -49,15 +49,15 @@
     let sentTitle, sentFavIconURL;
 
     function convertImgToBase64(url, callback) {
-        var canvas = document.createElement('CANVAS');
-        var ctx = canvas.getContext('2d');
-        var img = new Image();
+        let canvas = document.createElement('CANVAS');
+        const ctx = canvas.getContext('2d');
+        const img = new Image();
         img.crossOrigin = 'Anonymous';
         img.onload = function() {
             canvas.height = img.height;
             canvas.width = img.width;
             ctx.drawImage(img, 0, 0);
-            var dataURL = canvas.toDataURL();
+            const dataURL = canvas.toDataURL();
             callback(dataURL);
             canvas = null;
         };

diff --git a/src/extensions/default/Phoenix-live-preview/StaticServer.js b/src/extensions/default/Phoenix-live-preview/StaticServer.js
@@ -79,17 +79,14 @@ define(function (require, exports, module) {
             }, pageLoaderID);
             return;
         case EVENT_GET_CONTENT:
-            const requestPath = message.path,
-                requestID = message.requestID,
-                url = message.url;
-            getContent(requestPath, url)
+            getContent(message.path,  message.url)
                 .then(response =>{
                     // response has the following attributes set
                     // response.contents: <text or arrayBuffer content>,
                     // response.path
                     // headers: {'Content-Type': 'text/html'} // optional headers
                     response.type = 'REQUEST_RESPONSE';
-                    response.requestID = requestID;
+                    response.requestID = message.requestID;
                     _sendToLivePreviewServerTabs(response, pageLoaderID);
                 })
                 .catch(console.error);
@@ -478,7 +475,6 @@ define(function (require, exports, module) {
             let timeDiff = endTime - livePreviewTabs.get(tab).lastSeen; // in ms
             if(timeDiff > TAB_HEARTBEAT_TIMEOUT){
                 livePreviewTabs.delete(tab);
-                // todo fix the image load and after five secs live preview off bug
                 exports.trigger('BROWSER_CLOSE', { data: { message: {clientID: tab}}});
             }
         }

diff --git a/src/live-preview-loader.html b/src/live-preview-loader.html
@@ -99,6 +99,18 @@
             'https://create.phcode.dev': true
         };
 
+        function isTrustedURL(url) {
+            if(!url){
+                return false;
+            }
+            for(let trustedUrl of Object.keys(TRUSTED_ORIGINS)){
+                if(url.startsWith(trustedUrl)){
+                    return true;
+                }
+            }
+            return false;
+        }
+
         const pageLoaderID = crypto.randomUUID();
         let securityAlertAcknowledged = false;
         let previewURL;
@@ -121,23 +133,25 @@
             navigatorChannel.onmessage = (event) => {
                 _debugLog("Live Preview loader channel: Browser received event from Phoenix: ", JSON.stringify(event.data));
                 const type = event.data.type;
+                const dialog = document.getElementById('outer-container');
                 switch (type) {
                     case "REDIRECT_PAGE":
-                        const url = event.data.url;
-                        previewURL = url;
+                        previewURL = event.data.url;
                         if(!securityAlertAcknowledged){
                             return;
                         }
-                        _debugLog("Loading page: ", url);
-                        document.getElementById("previewFrame").src = url;
+                        _debugLog("Loading page: ", previewURL);
+                        if(isTrustedURL(previewURL)){
+                            document.getElementById("previewFrame").src = previewURL;
+                        }
                         return;
                     case "UPDATE_TITLE_ICON":
                         // The live preview frame will send us its title and favicon for us to set the window
                         // title and favicon. If it is that message, then, set it up
-                        const title = event.data.title;
-                        const faviconBase64 = event.data.faviconBase64;
-                        title && (document.title = title);
-                        if(faviconBase64){
+                        if(event.data.title || event.data.title === '') {
+                            document.title = event.data.title;
+                        }
+                        if(event.data.faviconBase64){
                             // Update the favicon
                             let link = document.querySelector("link[rel~='icon']");
                             if (!link) {
@@ -150,10 +164,11 @@
                         return;
                     case "PROJECT_SWITCH":
                         currentProjectRoot = event.data.projectRoot;
-                        const dialog = document.getElementById('outer-container');
                         if(trustedProjects[currentProjectRoot] && dialog){
                             dialog.style.display = 'none';
-                            document.getElementById('previewFrame').src = decodeURIComponent(previewURL);
+                            if(isTrustedURL(previewURL)){
+                                document.getElementById('previewFrame').src = decodeURIComponent(previewURL);
+                            }
                             securityAlertAcknowledged = true;
                             return;
                         }
@@ -203,7 +218,9 @@
             document.getElementById('okButton').addEventListener('click', function() {
                 const dialog = document.getElementById('outer-container');
                 dialog.style.display = 'none';
-                document.getElementById('previewFrame').src = decodeURIComponent(previewURL);
+                if(isTrustedURL(previewURL)) {
+                    document.getElementById('previewFrame').src = decodeURIComponent(previewURL);
+                }
                 securityAlertAcknowledged = true;
                 trustedProjects[currentProjectRoot] = true;
             });
@@ -226,7 +243,9 @@
             setupNavigationWatcher(phoenixInstanceID);
             let livepreviewServerIframe = document.getElementById("live-preview-server-iframe");
             let serverURL = `${decodeURIComponent(virtualServerURL)}?parentOrigin=${location.origin}`;
-            livepreviewServerIframe.setAttribute("src", serverURL);
+            if(isTrustedURL(serverURL)) {
+                livepreviewServerIframe.setAttribute("src", serverURL);
+            }
 
             okMessage && (document.getElementById('okButton').textContent = decodeURIComponent(okMessage));
             localiseMessage && (document.getElementById('dialog-message').textContent = decodeURIComponent(localiseMessage));