changed brand, support sdom, support cross domain iframes

INSTALL.md

@@ -1,4 +1,4 @@
-# Probely - Recorder login/sequence browser extension
+# Snyk API&Web - Recorder login/sequence browser extension
 
 ## How to test
 
@@ -33,7 +33,7 @@ Follow the steps below to install and test the extension in dev mode
 ### Step 4:
 
 - Click on the chrome extensions icon [1]
-- Pin the "**Probely Recorder**" extension [2]
+- Pin the "**Snyk API&Web Recorder**" extension [2]
 
 ![](./readme_assets/03-pin_extension-notes.png '...')
 

README.md

@@ -1,20 +1,20 @@
-# Probely login/sequence recorder
+# Snyk API&Web login/sequence recorder
 
 ## Installation
 
-[Install Probely's plugin from the Chrome web store](https://chrome.google.com/webstore/detail/probely-recorder/hldkejmiceccmcfgicnfbgminlidgkph)
+[Install Snyk API&Web's plugin from the Chrome web store](https://chrome.google.com/webstore/detail/probely-recorder/hldkejmiceccmcfgicnfbgminlidgkph)
 
 ## About
 
-You can use Probely Sequence Recorder to save and export a login or navigation sequence to be replayed during scans.
+You can use Snyk API&Web Sequence Recorder to save and export a login or navigation sequence to be replayed during scans.
 
 To record a sequence, you need to:
 
-- Download Probely's plugin by clicking on "[Add to Chrome](https://chrome.google.com/webstore/detail/probely-recorder/hldkejmiceccmcfgicnfbgminlidgkph)".
-- Click on Probely's icon in the address bar to open up the plugin, type your target URL and "Start recording".
+- Download Snyk API&Web's plugin by clicking on "[Add to Chrome](https://chrome.google.com/webstore/detail/probely-recorder/hldkejmiceccmcfgicnfbgminlidgkph)".
+- Click on Snyk API&Web's icon in the address bar to open up the plugin, type your target URL and "Start recording".
 - Access your target and make sure to perform every step necessary for the sequence to work as intended.
 - Copy or download the recorded sequence.
-- Paste or upload the sequence to your target settings on Probely.
+- Paste or upload the sequence to your target settings on Snyk API&Web.
 
 Once those steps are completed, you can start a scan!
 

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "probely-record-sequence",
-  "version": "0.0.4",
-  "description": "Probely Record login/sequence",
+  "name": "snyk-api-and-web-record-sequence",
+  "version": "0.0.8",
+  "description": "Snyk API & Web Record login/sequence",
   "license": "MIT",
   "scripts": {
     "build": "node utils/build.js",

src/manifest-chrome.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "name": "Probely Sequence Recorder",
+  "name": "Snyk API & Web Sequence Recorder",
   "action": {
     "default_popup": "popup.html",
     "default_icon": {
@@ -26,7 +26,9 @@
       "css": [
         "content.styles.css"
       ],
-      "run_at": "document_start"
+      "run_at": "document_start",
+      "all_frames": true,
+      "match_about_blank": true
     }
   ],
   "web_accessible_resources": [

src/manifest-firefox.json

@@ -1,6 +1,6 @@
 {
-  "name": "Probely Sequence Recorder",
-  "version": "0.0.4",
+  "name": "Snyk API & Web Sequence Recorder",
+  "version": "0.0.8",
   "browser_specific_settings": {
     "gecko": {
       "id": "sequence-recorder@probely.com",
@@ -32,7 +32,9 @@
       "css": [
         "content.styles.css"
       ],
-      "run_at": "document_start"
+      "run_at": "document_start",
+      "all_frames": true,
+      "match_about_blank": true
     }
   ],
   "web_accessible_resources": [

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "name": "Probely Sequence Recorder",
+  "name": "Snyk API & Web Sequence Recorder",
   "action": {
     "default_popup": "popup.html",
     "default_icon": {
@@ -26,7 +26,9 @@
       "css": [
         "content.styles.css"
       ],
-      "run_at": "document_start"
+      "run_at": "document_start",
+      "all_frames": true,
+      "match_about_blank": true
     }
   ],
   "web_accessible_resources": [

src/pages/Content/index.js

@@ -33,36 +33,101 @@ import getCustomSelector from './modules/getCustomSelector';
 
   if (chrome) {
     chrome.storage.sync.get(['isRecording'], (data) => {
-      // console.log('IS CONTENT STRING RECORDING ???? => ', data);
+      // console.log('IS CONTENT SCRIPT RECORDING ???? => ', data);
       if (!data.isRecording) {
         return;
       }
 
       let mutationDetected = false;
       let stoMutation = null;
 
+      // wait for messages from iframes in the top frame
+      if (window === window.top) {
+        window.addEventListener('message', (evMsg) => {
+          if (
+            evMsg.data &&
+            evMsg.data.source &&
+            evMsg.data.source === 'event-from-iframe'
+          ) {
+            const obj = { ...evMsg.data.obj };
+            const aFrames = document.querySelectorAll('iframe, frame');
+            for (const frame of aFrames) {
+              if (frame.contentWindow === evMsg.source) {
+                let frameSelector = null;
+                try {
+                  frameSelector = getCustomSelector(frame);
+                } catch (ex) {
+                  // ignore
+                }
+                if (!frameSelector) {
+                  try {
+                    frameSelector = getNodeSelector(frame, {
+                      root: window.document,
+                      idName: (name) => {
+                        return !/^[0-9]+.*/i.test(name);
+                      },
+                      className: (name) => {
+                        return (
+                          !name.includes('focus') &&
+                          !name.includes('highlight') &&
+                          !/^[0-9]+.*/i.test(name)
+                        );
+                      },
+                      // seedMinLength: 3,
+                      // optimizedMinLength: 3,
+                    });
+                  } catch (ex) {
+                    // ignore
+                  }
+                }
+                if (frameSelector && obj.event) {
+                  obj.event.frame = frameSelector;
+                  chrome.runtime.sendMessage(obj);
+                }
+                break;
+              }
+            }
+          }
+        });
+      }
+
       function eventInterceptopMainHandler(ev) {
         if (ev && ev.type === 'mouseover' && !mutationDetected) {
           return;
         }
         interceptEvents(ev, window.document, null, (obj) => {
-          chrome.runtime.sendMessage(obj);
+          if (window !== window.top) {
+            // If the event is inside a frame, send it to the top
+            window.parent.postMessage(
+              {
+                source: 'event-from-iframe',
+                obj: { ...obj },
+              },
+              '*'
+            );
+          } else {
+            // if in the top frame, send to background
+            chrome.runtime.sendMessage(obj);
+          }
         });
       }
       if (data.isRecording) {
         isRecording = true;
         originalTitle = document.title;
         changePageTitle();
-        chrome.runtime.sendMessage({
-          messageType: 'events',
-          event: {
-            type: 'goto',
-            timestamp: new Date().getTime(),
-            windowWidth: window.innerWidth,
-            windowHeight: window.innerHeight,
-            url: window.location.href,
-          },
-        });
+        if (window === window.top) {
+          // save "goto" only on top frames
+          chrome.runtime.sendMessage({
+            messageType: 'events',
+            event: {
+              type: 'goto',
+              timestamp: new Date().getTime(),
+              windowWidth: window.innerWidth,
+              windowHeight: window.innerHeight,
+              url: window.location.href,
+            },
+          });
+        }
         // Leaving this, maybe I need in the future
         // window.addEventListener('load', (ev) => {
         //   addMutationObserver(document);
@@ -95,103 +160,6 @@ import getCustomSelector from './modules/getCustomSelector';
         // document.addEventListener('paste', eventInterceptopMainHandler, true);
       }
 
-      function addEventsToIframe(ifr, force) {
-        let ifrSelector = null;
-        try {
-          ifrSelector = getCustomSelector(ifr, window.document);
-        } catch (ex) {
-          // ignore
-        }
-        if (!ifrSelector) {
-          ifrSelector = getNodeSelector(ifr, {
-            root: window.document,
-            seedMinLength: 3,
-            optimizedMinLength: 3,
-          });
-        }
-        function eventInterceptopFrameHandler(ev) {
-          interceptEvents(
-            ev,
-            ifr.contentWindow.document,
-            ifrSelector,
-            (obj) => {
-              chrome.runtime.sendMessage(obj);
-            }
-          );
-        }
-        const iframeAddEventsCollector = () => {
-          try {
-            if (data.isRecording) {
-              // Leaving this here, maybe Ill need it in the future
-              // ifr.contentWindow.addEventListener('load', (ev) => {
-              //   addMutationObserver(ifr.contentWindow.document);
-              // });
-              if (ifr.contentWindow.____probely_sequence_recorder) {
-                return;
-              }
-              ifr.contentWindow.____probely_sequence_recorder = true;
-
-              ifr.contentWindow.document.addEventListener(
-                'click',
-                eventInterceptopFrameHandler,
-                true
-              );
-              ifr.contentWindow.document.addEventListener(
-                'mouseover',
-                eventInterceptopFrameHandler,
-                true
-              );
-              ifr.contentWindow.document.addEventListener(
-                'dblclick',
-                eventInterceptopFrameHandler,
-                true
-              );
-              ifr.contentWindow.document.addEventListener(
-                'contextmenu',
-                eventInterceptopFrameHandler,
-                true
-              );
-              ifr.contentWindow.document.addEventListener(
-                'keydown',
-                eventInterceptopFrameHandler,
-                true
-              );
-              ifr.contentWindow.document.addEventListener(
-                'blur',
-                eventInterceptopFrameHandler,
-                true
-              );
-              ifr.contentWindow.document.addEventListener(
-                'change',
-                eventInterceptopFrameHandler,
-                true
-              );
-            }
-          } catch (ex) {
-            // ignore - doesn't have access
-          }
-        };
-        if (force) {
-          iframeAddEventsCollector();
-        } else {
-          ifr.addEventListener('load', iframeAddEventsCollector);
-        }
-      }
-
-      const aIfrs = document.querySelectorAll('iframe, frame');
-      aIfrs.forEach((ifr) => {
-        addEventsToIframe(ifr);
-        setTimeout(() => {
-          try {
-            if (!ifr.contentWindow.____probely_sequence_recorder) {
-              addEventsToIframe(ifr, true);
-            }
-          } catch (ex) {
-            // ignore
-          }
-        }, 2000);
-      });
-
       const mutationConfig = {
         attributes: false,
         childList: true,
@@ -207,44 +175,11 @@ import getCustomSelector from './modules/getCustomSelector';
           // keep "mutationDetected" enabled within 200ms
           mutationDetected = false;
         }, 200);
-        for (const mutation of mutationsList) {
-          for (let i = 0; i < mutation.addedNodes.length; i++) {
-            const mutationNode = mutation.addedNodes[i];
-            if (
-              mutationNode &&
-              mutationNode.nodeType === 1 &&
-              mutationNode.querySelectorAll
-            ) {
-              let aIfrsMut = [];
-              if (
-                mutationNode &&
-                mutationNode.nodeName &&
-                ['iframe', 'frame'].indexOf(
-                  mutationNode.nodeName.toLowerCase()
-                ) > -1
-              ) {
-                aIfrsMut = [mutationNode];
-              } else {
-                aIfrsMut = mutationNode.querySelectorAll('iframe, frame');
-              }
-              aIfrsMut.forEach((ifr) => {
-                addEventsToIframe(ifr);
-                setTimeout(() => {
-                  try {
-                    if (!ifr.contentWindow.____probely_sequence_recorder) {
-                      addEventsToIframe(ifr, true);
-                    }
-                  } catch (ex) {
-                    // ignore
-                  }
-                }, 2000);
-              });
-            }
-          }
-        }
       };
       const observer = new MutationObserver(onMutationCallback);
-      observer.observe(document.body, mutationConfig);
+      if (document.body) {
+        observer.observe(document.body, mutationConfig);
+      }
     });
   }
 })();