@mablhq/playwright-tools 2.49.1

package/resources/pdf-viewer/EmbeddedPdfHandler.js

@@ -0,0 +1 @@
+export const MABL_PROCESSED_PDF_ATTRIBUTE="__mabl-processed-pdf";export const MABL_PDF_DETECTOR_STYLE_ID="__mabl-pdf-detector";export const MABL_PDF_DETECTOR_ANIMATION_NAME="__mabl-trainer-object-embed-detector";const MABL_PDF_SRC_ATTRIBUTE="data-mabl-pdf-src";export const PDFEventType="animationstart";export class EmbeddedPdfHandler{constructor(e,t,n,r){this.PDFEmbeddedViewerBaseUrl=e,this.createElement=t||document.createElement,this.shouldHandle=n||(()=>!0),this.cMapUrl=r,this.handle=this.handle.bind(this),this.register=this.register.bind(this),this.updateElement=this.updateElement.bind(this),this.createViewerElement=this.createViewerElement.bind(this),this.checkUrlProtocol=this.checkUrlProtocol.bind(this)}register(){if(!document.doctype||!document.doctype.name||-1!==document.doctype.name.indexOf("html")){if(!document.getElementById("__mabl-pdf-detector")){let e=this.createElement.call(document,"style");if(e.innerHTML=`\n      @keyframes ${MABL_PDF_DETECTOR_ANIMATION_NAME} { from {} }\n      object, embed {\n        animation-delay: 0s !important;\n        animation-name: ${MABL_PDF_DETECTOR_ANIMATION_NAME} !important;\n        animation-play-state: running !important;\n      }`,e.id="__mabl-pdf-detector",this.pdfDetectorStyleElem=e,document.head)document.head.appendChild(e);else{if(!document.body)return;document.body.appendChild(e)}}window.addEventListener(PDFEventType,this.handle,!0)}}unregister(){window.removeEventListener(PDFEventType,this.handle,!0),this.pdfDetectorStyleElem&&this.pdfDetectorStyleElem.parentNode&&this.pdfDetectorStyleElem.parentNode.removeChild(this.pdfDetectorStyleElem)}handle(e){if(!this.canHandleEvent(e))return;const t=e.target;this.updateElement(t)}checkAnimationEvent(e){return e.animationName===MABL_PDF_DETECTOR_ANIMATION_NAME}checkElement(e){return"EMBED"===e.tagName||"OBJECT"===e.tagName}checkMimeType(e){let t=e.type,n=this.getPdfUrlFromElement(e);return t&&"application/pdf"===t.toLowerCase()||!t&&n&&/\.pdf($|[?#])/i.test(n)||!!e["__mabl-processed-pdf"]}checkUrlProtocol(e){if("about:blank"===e.src)return!1;const t=this.getPdfUrlFromElement(e);try{const e=new URL(t),n=["http:","https:","data:"];if(!n.includes(e?.protocol))return console.warn(`PDF Handler ignoring element with URL ${t} because protocol ${e?.protocol} does not match one of the allowed protocols ${n}`),!1;if("data:"===e?.protocol&&!/^data:application\/pdf[,;]/.test(e?.href??""))return console.warn(`PDF Handler ignoring element with URL ${t} because it does not use application/pdf MIME type`),!1}catch(e){return console.warn(`PDF Handler ignoring element with URL ${t}; error ${e} was thrown while converting to URL`),!1}return!0}canHandleEvent(e){const t=e.target;return this.shouldHandle(e)&&this.checkAnimationEvent(e)&&this.checkElement(t)&&this.checkMimeType(t)&&this.checkUrlProtocol(t)}updateElement(e){if("text/html"===e.type&&0===e.src.lastIndexOf(this.PDFEmbeddedViewerBaseUrl,0))return;let t=e.parentNode,n=e.nextSibling,r=this.createViewerElement(e);t&&(t.removeChild(e),t.insertBefore(r,n))}getPdfUrlFromElement(e){let t=e.src||e.data||e.getAttribute("mabl-pdf-url")||void 0;return"about:blank"===t&&(t=window.location.href),t}createViewerElement(e){let t=this.createElement.call(document,"iframe");const n=this.getPdfUrlFromElement(e);return e.offsetHeight&&e.offsetWidth?(t.height=e.offsetHeight,t.width=e.offsetWidth):e.height&&e.width&&(t.height=e.height,t.width=e.width),t.id="__mabl_pdf_viewer_"+this.idSanitize(this.getPdfFilenameFromUrl(n)),t.src=this.getEmbeddedViewerURL(n),t.setAttribute("__mabl-processed-pdf","true"),t.setAttribute("data-mabl-pdf-src",n),t}getEmbeddedViewerURL(e){var t=/^([^#]*)(#.*)?$/.exec(e);e=t[1],t=t[2]||"";var n=document.createElement("a");return n.href=document.baseURI,n.href=e,e=n.href,this.getViewerURL(e)+t}getPdfFilenameFromUrl(e){let t=new URL(e).pathname.split("/").slice(-1)[0]||"mablPdf";return e.startsWith("blob:")&&(t="blob_pdf"),t}getViewerURL(e){let t=this.getPdfFilenameFromUrl(e);return this.PDFEmbeddedViewerBaseUrl+"?file="+encodeURIComponent(e)+"&name="+t}idSanitize(e){return e&&e.replace(/[^a-zA-Z0-9.-]/g,"_")}}

package/resources/pdf-viewer/embeddedPdfDetection.js

@@ -0,0 +1,225 @@
+mablEmbeddedPdfDetector = () => {
+  const MABL_PDF_DETECTOR_ANIMATION_NAME =
+    '__mabl-trainer-object-embed-detector';
+  const MABL_PDF_DETECTOR_STYLE_ID = '__mabl-pdf-detector';
+  const PDFEventType = 'animationstart';
+  const MABL_PROCESSED_PDF_ATTRIBUTE = '__mabl-processed-pdf';
+  const MABL_EMBEDDED_PDF_DETECTED_FLAG = 'mabl-detected-embedded-pdf';
+  // must match the types defined in pageMessaging.ts
+  const MESSAGE_TYPE_EMBEDDED_PDF_DETECTED = 'EMBEDDED_PDF_DETECTED';
+  const MESSAGE_TYPE_EMBEDDED_PDF_MARKED = 'EMBEDDED_PDF_MARKED';
+
+  if (
+    document.doctype &&
+    document.doctype.name &&
+    document.doctype.name.indexOf('html') !== -1
+  ) {
+    window.addEventListener(PDFEventType, handle, true);
+
+    // Don't wait for animation to load existing embedded elements
+    Array.from(document.querySelectorAll('object, embed')).forEach(
+      (element) => {
+        handle({
+          target: element,
+          animationName: MABL_PDF_DETECTOR_ANIMATION_NAME,
+        });
+      },
+    );
+
+    if (!document.getElementById(MABL_PDF_DETECTOR_STYLE_ID)) {
+      const pdfDetectorStyleElem = document.createElement.call(
+        document,
+        'style',
+      );
+      pdfDetectorStyleElem.innerHTML = `
+    @keyframes ${MABL_PDF_DETECTOR_ANIMATION_NAME} { from {} }
+    object, embed {
+      animation-delay: 0s !important;
+      animation-name: ${MABL_PDF_DETECTOR_ANIMATION_NAME} !important;
+      animation-play-state: running !important;
+    }`;
+      pdfDetectorStyleElem.id = MABL_PDF_DETECTOR_STYLE_ID;
+      if (document.head) {
+        // the default PDF page in Chrome doesn't have a head, and the browser doesn't insert one
+        document.head.appendChild(pdfDetectorStyleElem);
+      } else if (document.body) {
+        document.body.appendChild(pdfDetectorStyleElem);
+      }
+    }
+  }
+
+  /**
+   * Returns the URL string of the element which should in some way be embedding a PDF.
+   * @param {HTMLElement} originalPdfElement The element embedding the PDF, should have embed tag, object tag,
+   * @returns {(string|undefined)} The URL which should host the PDF, or undefined if none was found
+   */
+  function getPdfUrlFromElement(originalPdfElement) {
+    return (
+      originalPdfElement.src ||
+      originalPdfElement.data || // embed has @src, object has @data
+      undefined
+    );
+  }
+
+  /**
+   * Checks that the URL embedding the PDF leads to a valid location and/or
+   * has a valid protocol
+   * @param {HTMLElement} element The element on the page whose URL to check
+   * @returns {boolean} Whether or not the element is valid
+   */
+  function checkUrlProtocol(element) {
+    if (element.src === 'about:blank') {
+      // this is likely the chrome viewer for a POST
+      // don't do anything, we might get a manual update later
+      // if the trainer finds a PDF
+      return false;
+    }
+    // Validate that the URL is an allowed protocol to prevent XSS, see IST-561
+    const pdfUrlString = getPdfUrlFromElement(element);
+    try {
+      const pdfUrl = new URL(pdfUrlString);
+      // data: is allowed to support embedding the PDF inline using a data URI scheme
+      const allowedProtocols = ['http:', 'https:', 'data:'];
+      if (!allowedProtocols.includes(pdfUrl?.protocol)) {
+        console.warn(
+          `PDF Handler ignoring element with URL ${pdfUrlString} because protocol ${pdfUrl?.protocol} does not match one of the allowed protocols ${allowedProtocols}`,
+        );
+        return false;
+      } else if (
+        pdfUrl?.protocol === 'data:' &&
+        !/^data:application\/pdf[,;]/.test(pdfUrl?.href ?? '') // starts with data:application/pdf and either , or ; separator
+      ) {
+        console.warn(
+          `PDF Handler ignoring element with URL ${pdfUrlString} because it does not use application/pdf MIME type`,
+        );
+        return false;
+      }
+    } catch (e) {
+      console.warn(
+        `PDF Handler ignoring element with URL ${pdfUrlString}; error ${e} was thrown while converting to URL`,
+      );
+      return false;
+    }
+    return true;
+  }
+
+  async function handle(event) {
+    const element = event.target;
+    if (
+      checkAnimationEvent(event) &&
+      checkElement(element) &&
+      checkMimeType(element) &&
+      !isMablMarked(element) &&
+      checkUrlProtocol(element)
+    ) {
+      const baseUri = document.baseURI;
+      const pdfElement = element;
+      const pdfUrl = pdfElement.src || pdfElement.data;
+      const pdfFileName = mablGetPdfFilenameFromUrl(pdfUrl);
+
+      const embeddedPdfMablId = createEmbeddedPdfMablId(pdfFileName);
+      // Mark the embedded PDF element so that we can find it to replace it later
+      pdfElement.setAttribute(
+        MABL_EMBEDDED_PDF_DETECTED_FLAG,
+        embeddedPdfMablId,
+      );
+
+      // Signal embedded PDF detection and pending download
+      // Wait for PDF event be acknowledged by PageFrameContextTracker before continuing
+      await window.dispatchMablEvent({
+        type: MESSAGE_TYPE_EMBEDDED_PDF_DETECTED,
+        baseUri,
+        pdfUrl,
+        pdfFileName,
+      });
+
+      mablDownloadEmbeddedPdf(pdfFileName, pdfUrl);
+
+      // Trigger replacement of the embedded PDF with an interactable version served by PDF server
+      window.dispatchMablEvent({
+        type: MESSAGE_TYPE_EMBEDDED_PDF_MARKED,
+        baseUri,
+        embeddedPdfMablId,
+        pdfFileName,
+      });
+    }
+  }
+
+  function checkAnimationEvent(event) {
+    return event.animationName === MABL_PDF_DETECTOR_ANIMATION_NAME;
+  }
+
+  function checkElement(element) {
+    return element.tagName === 'EMBED' || element.tagName === 'OBJECT';
+  }
+
+  function checkMimeType(element) {
+    const mimeType = element.type;
+    const path = getPdfUrlFromElement(element);
+    const isAPdf =
+      (mimeType && mimeType.toLowerCase() === 'application/pdf') || // mime type is PDF
+      (!mimeType && path && /\.pdf($|[?#])/i.test(path)) || // or if we don't have a mime type test the path up to query or hash
+      !!element[MABL_PROCESSED_PDF_ATTRIBUTE]; // it's an element we've already identified
+    return isAPdf;
+  }
+
+  function isMablMarked(element) {
+    const attrValue = element.getAttribute(MABL_EMBEDDED_PDF_DETECTED_FLAG);
+    if (attrValue === null || attrValue === undefined) {
+      return false;
+    }
+    return true;
+  }
+};
+
+const CHECK_INTERVAL_IN_MILLIS = 300;
+const CHECK_TIMEOUT_IN_MILLIS = 5000;
+let checkTimer;
+const checkStartTime = Date.now();
+const MABL_DEFAULT_PDF_NAME = 'mablPdf';
+
+function mablPdfIdSanitize(originalId) {
+  return originalId && originalId.replace(/[^a-zA-Z0-9.-]/g, '_');
+}
+
+function createEmbeddedPdfMablId(pdfFileName) {
+  return '__mabl_pdf_viewer_' + mablPdfIdSanitize(pdfFileName);
+}
+
+function documentHasDocType() {
+  return document.doctype && document.doctype.name;
+}
+
+function runEmbeddedPdfDetector() {
+  if (documentHasDocType()) {
+    mablEmbeddedPdfDetector();
+    checkTimer && clearInterval(checkTimer);
+  } else if (Date.now() - checkStartTime > CHECK_TIMEOUT_IN_MILLIS) {
+    checkTimer && clearInterval(checkTimer);
+  }
+}
+
+function mablGetPdfFilenameFromUrl(pdfUrl) {
+  const parsedUrl = new URL(pdfUrl);
+  const pdfFileName =
+    parsedUrl.pathname.split('/').slice(-1)[0] ?? MABL_DEFAULT_PDF_NAME;
+  return pdfUrl.startsWith('blob:') ? 'blob_pdf' : pdfFileName;
+}
+
+function mablDownloadEmbeddedPdf(fileName, pdfUrl) {
+  const aTag = document.createElement('a');
+  aTag.style.display = 'none';
+  document.body.appendChild(aTag);
+  aTag.href = pdfUrl;
+  aTag.setAttribute('download', fileName);
+  aTag.click();
+  document.body.removeChild(aTag);
+}
+
+if (!documentHasDocType()) {
+  // If this is executed too quickly, the DOCTYPE has not been loaded yet
+  // so wait a bit before checking again.
+  checkTimer = setInterval(runEmbeddedPdfDetector, CHECK_INTERVAL_IN_MILLIS);
+} else {
+  mablEmbeddedPdfDetector();
+}

package/resources/pdf-viewer/index.html

@@ -0,0 +1 @@
+<!doctype html><html><head><meta charset="utf-8"><title>mabl PDF viewer</title><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><script defer="defer" src="index.js"></script></head><body></body></html>