Merge branch 'all-in-one-chat-as-iframe.ag' into release_6.57

Author: svfcode

js/apbct-public-bundle_ext-protection.min.js

@@ -375,8 +375,10 @@ function apbctReplaceInputsValuesFromOtherForm(formSource, formTarget) {
         });
     });
 }
+
 // clear protected iframes list
-apbctLocalStorage.set('apbct_iframes_protected', []);
+ctProtectOutsideFunctionalClearLocalStorage();
+
 window.addEventListener('load', function() {
     if ( ! +ctPublic.settings__forms__check_external ) {
         return;
@@ -386,120 +388,141 @@ window.addEventListener('load', function() {
         ctProtectExternal();
         catchDynamicRenderedForm();
         catchNextendSocialLoginForm();
-        ctProtectOutsideIframe();
+        ctProtectOutsideFunctionalOnTagsType('div');
+        ctProtectOutsideFunctionalOnTagsType('iframe');
     }, 2000);
 
     ctProtectKlaviyoForm();
 });
 
-/**
- * Protect klaviyo forms
- */
-function ctProtectKlaviyoForm() {
-    if (!document.querySelector('link[rel="dns-prefetch"][href="//static.klaviyo.com"]')) {
-        return;
-    }
-
-    let i = setInterval(() => {
-        const klaviyoForms = document.querySelectorAll('form.klaviyo-form');
-        if (klaviyoForms.length) {
-            clearInterval(i);
-            klaviyoForms.forEach((form, index) => {
-                apbctProcessExternalFormKlaviyo(form, index, document);
-            });
-        }
-    }, 500);
-}
+let ctProtectOutsideFunctionalCheckPerformed;
 
 /**
- * Protect klaviyo forms
- * @param {HTMLElement} form
- * @param {int} iterator
- * @param {HTMLElement} documentObject
+ * Protect outside functional. Tags div and iframe supported.
+ * @param {string} tagType
  */
-function apbctProcessExternalFormKlaviyo(form, iterator, documentObject) {
-    const btn = form.querySelector('button[type="button"].needsclick');
-    if (!btn) {
-        return;
+function ctProtectOutsideFunctionalOnTagsType(tagType) {
+    let entityTagsAny = document.querySelectorAll(tagType);
+    if (entityTagsAny.length > 0) {
+        entityTagsAny.forEach(function(entity) {
+            let protectedType = ctProtectOutsideFunctionalIsTagIntegrated(entity);
+            if (false !== protectedType) {
+                let lsStorageName = 'apbct_outside_functional_protected_tags__' + protectedType;
+                let lsUniqueName = entity.id !== '' ? entity.id : false;
+                lsUniqueName = false === lsUniqueName && entity.className !== '' ? entity.className : lsUniqueName;
+                // todo we can not protect any entity that has no id and class :(
+                // pass if is already protected
+                if (
+                    false === lsUniqueName ||
+                    (
+                        false !== apbctLocalStorage.get(lsStorageName) &&
+                        apbctLocalStorage.get(lsStorageName).length > 0 &&
+                        apbctLocalStorage.get(lsStorageName)[0].indexOf(lsUniqueName) !== -1
+                    )
+                ) {
+                    return;
+                }
+                ctProtectOutsideFunctionalHandler(entity, lsStorageName, lsUniqueName);
+            }
+        });
     }
-    btn.disabled = true;
-
-    const forceAction = document.createElement('input');
-    forceAction.name = 'action';
-    forceAction.value = 'cleantalk_force_ajax_check';
-    forceAction.type = 'hidden';
-    form.appendChild(forceAction);
-
-    let cover = document.createElement('div');
-    cover.id = 'apbct-klaviyo-cover';
-    cover.style.width = '100%';
-    cover.style.height = '100%';
-    cover.style.background = 'black';
-    cover.style.opacity = 0;
-    cover.style.position = 'absolute';
-    cover.style.top = 0;
-    cover.style.cursor = 'pointer';
-    cover.onclick = function(e) {
-        sendAjaxCheckingFormData(form);
-    };
-    btn.parentNode.style.position = 'relative';
-    btn.parentNode.appendChild(cover);
 }
 
 /**
- * Protect forms placed in iframe with outside src
+ * Check if the entity must be protected
+ *
+ * @param {HTMLElement} entity
+ * @return {string|false}
  */
-function ctProtectOutsideIframe() {
-    let iframes = document.querySelectorAll('iframe');
-    if (iframes.length > 0) {
-        iframes.forEach(function(iframe) {
-            if (iframe.src.indexOf('form.typeform.com') !== -1 ||
-                iframe.src.indexOf('forms.zohopublic.com') !== -1 ||
-                iframe.src.indexOf('link.surepathconnect.com') !== -1 ||
-                iframe.src.indexOf('hello.dubsado.com') !== -1 ||
-                iframe.classList.contains('hs-form-iframe') ||
-                ( iframe.src.indexOf('facebook.com') !== -1 && iframe.src.indexOf('plugins/comments.php') !== -1) ||
-                iframe.id.indexOf('chatway_widget_app') !== -1
+function ctProtectOutsideFunctionalIsTagIntegrated(entity) {
+    if (entity.tagName !== undefined) {
+        if (entity.tagName === 'IFRAME') {
+            if (entity.src.indexOf('form.typeform.com') !== -1 ||
+                entity.src.indexOf('forms.zohopublic.com') !== -1 ||
+                entity.src.indexOf('link.surepathconnect.com') !== -1 ||
+                entity.src.indexOf('hello.dubsado.com') !== -1 ||
+                entity.classList.contains('hs-form-iframe') ||
+                ( entity.src.indexOf('facebook.com') !== -1 && entity.src.indexOf('plugins/comments.php') !== -1) ||
+                entity.id.indexOf('chatway_widget_app') !== -1
             ) {
-                // pass if is already protected
-                if (false !== apbctLocalStorage.get('apbct_iframes_protected') &&
-                    apbctLocalStorage.get('apbct_iframes_protected').length > 0 &&
-                    typeof iframe.id !== 'undefined' &&
-                    apbctLocalStorage.get('apbct_iframes_protected').indexOf[iframe.id] !== -1
-                ) {
-                    return;
-                }
-                ctProtectOutsideIframeHandler(iframe);
+                return entity.tagName;
             }
-        });
+        }
+        if (entity.tagName === 'DIV') {
+            if (
+                entity.className.indexOf('Window__Content-sc') !== -1 || // all in one chat widget
+                entity.className.indexOf('WidgetBackground__Content-sc') !== -1 // all in one contact form widget
+            ) {
+                return entity.tagName;
+            }
+        }
     }
+    return false;
 }
 
-let ctProtectOutsideIframeCheck;
 /**
  * Protect forms placed in iframe with outside src handler
- * @param {HTMLElement} iframe
+ *
+ * @param {HTMLElement} entity
+ * @param {string} lsStorageName
+ * @param {string|false} lsUniqueName
  */
-function ctProtectOutsideIframeHandler(iframe) {
+function ctProtectOutsideFunctionalHandler(entity, lsStorageName, lsUniqueName) {
     let originParentPosition = null;
-    let iframeParent = null;
+    let entityParent = null;
 
-    if (iframe.parentNode !== undefined) {
-        iframeParent = iframe.parentNode;
+    if (entity.parentNode !== undefined) {
+        entityParent = entity.parentNode;
     } else {
         return;
     }
 
+    if (
+        entityParent.style !== undefined &&
+        entityParent.style !== null &&
+        entityParent.style.position !== undefined
+    ) {
+        entityParent.style.position = originParentPosition;
+    } else {
+        entityParent.style.position = 'relative';
+    }
+    entityParent.appendChild(ctProtectOutsideFunctionalGenerateCover());
+    let entitiesProtected = apbctLocalStorage.get(lsStorageName);
+    if (false === entitiesProtected) {
+        entitiesProtected = [];
+    }
+    if (lsUniqueName) {
+        entitiesProtected.push(lsUniqueName);
+        apbctLocalStorage.set(lsStorageName, entitiesProtected);
+    }
+}
+
+/**
+ * Clear local storage for OutsideFunctional protection
+ *
+ */
+function ctProtectOutsideFunctionalClearLocalStorage() {
+    apbctLocalStorage.set('apbct_outside_functional_protected_tags__DIV', []);
+    apbctLocalStorage.set('apbct_outside_functional_protected_tags__IFRAME', []);
+}
+
+/**
+ * Generate cover for outside functional protection
+ *
+ * @return {HTMLElement} cover
+ */
+function ctProtectOutsideFunctionalGenerateCover() {
     let cover = document.createElement('div');
     cover.style.width = '100%';
     cover.style.height = '100%';
     cover.style.background = 'black';
     cover.style.opacity = 0;
     cover.style.position = 'absolute';
     cover.style.top = 0;
+    cover.style.zIndex = 9999;
     cover.setAttribute('name', 'apbct_cover');
     cover.onclick = function(e) {
-        if (ctProtectOutsideIframeCheck === undefined) {
+        if (ctProtectOutsideFunctionalCheckPerformed === undefined) {
             let currentDiv = e.currentTarget;
             currentDiv.style.opacity = 0.5;
             let preloader = document.createElement('div');
@@ -529,22 +552,22 @@ function ctProtectOutsideIframeHandler(iframe) {
                 {
                     async: false,
                     callback: function(result) {
-                        ctProtectOutsideIframeCheck = true;
+                        ctProtectOutsideFunctionalCheckPerformed = true;
                         let callbackError = false;
                         if (
                             typeof result !== 'object' ||
                             !result.hasOwnProperty('apbct') ||
                             !result.apbct.hasOwnProperty('blocked')
                         ) {
-                            console.warn('APBCT outside iframe check error, skip check.');
+                            console.warn('APBCT outside functional check error, skip check.');
                             callbackError = true;
                         }
                         const comment = result.apbct.comment !== undefined ?
                             result.apbct.comment :
                             'Blocked by CleanTalk Anti-Spam';
                         if (result.apbct.blocked === false || callbackError) {
-                            document.querySelectorAll('div.apbct-iframe-preloader').forEach(function(el) {
-                                el.parentNode.remove();
+                            document.querySelectorAll('div[name="apbct_cover"]').forEach(function(el) {
+                                el.remove();
                             });
                         } else {
                             document.querySelectorAll('.apbct-iframe-preloader-text').forEach((el) => {
@@ -559,24 +582,61 @@ function ctProtectOutsideIframeHandler(iframe) {
             );
         }
     };
-    if (
-        iframeParent.style !== undefined &&
-        iframeParent.style !== null &&
-        iframeParent.style.position !== undefined
-    ) {
-        iframeParent.style.position = originParentPosition;
-    } else {
-        iframeParent.style.position = 'relative';
-    }
-    iframeParent.appendChild(cover);
-    let iframes = apbctLocalStorage.get('apbct_iframes_protected');
-    if (false === iframes) {
-        iframes = [];
+    return cover;
+}
+
+/**
+ * Protect klaviyo forms
+ */
+function ctProtectKlaviyoForm() {
+    if (!document.querySelector('link[rel="dns-prefetch"][href="//static.klaviyo.com"]')) {
+        return;
     }
-    if (typeof iframe.id !== 'undefined') {
-        iframes.push(iframe.id);
-        apbctLocalStorage.set('apbct_iframes_protected', iframes);
+
+    let i = setInterval(() => {
+        const klaviyoForms = document.querySelectorAll('form.klaviyo-form');
+        if (klaviyoForms.length) {
+            clearInterval(i);
+            klaviyoForms.forEach((form, index) => {
+                apbctProcessExternalFormKlaviyo(form, index, document);
+            });
+        }
+    }, 500);
+}
+
+/**
+ * Protect klaviyo forms
+ * @param {HTMLElement} form
+ * @param {int} iterator
+ * @param {HTMLElement} documentObject
+ */
+function apbctProcessExternalFormKlaviyo(form, iterator, documentObject) {
+    const btn = form.querySelector('button[type="button"].needsclick');
+    if (!btn) {
+        return;
     }
+    btn.disabled = true;
+
+    const forceAction = document.createElement('input');
+    forceAction.name = 'action';
+    forceAction.value = 'cleantalk_force_ajax_check';
+    forceAction.type = 'hidden';
+    form.appendChild(forceAction);
+
+    let cover = document.createElement('div');
+    cover.id = 'apbct-klaviyo-cover';
+    cover.style.width = '100%';
+    cover.style.height = '100%';
+    cover.style.background = 'black';
+    cover.style.opacity = 0;
+    cover.style.position = 'absolute';
+    cover.style.top = 0;
+    cover.style.cursor = 'pointer';
+    cover.onclick = function(e) {
+        sendAjaxCheckingFormData(form);
+    };
+    btn.parentNode.style.position = 'relative';
+    btn.parentNode.appendChild(cover);
 }
 
 /**