clickjacker.ts

function clickjackElement(doc: Document, element: HTMLElement, pollingInterval: number = 500) {
  const clickjacker = document.createElement("div");

  clickjacker.style.position = "absolute";

  const scrollParent = getScrollParent(element, false);

  const positionElement = () => {
    const elementRect = element.getBoundingClientRect();
    const shadowRootRect = (<any>doc).host.getBoundingClientRect();

    Object.assign(clickjacker.style, {
      left: `${elementRect.left - shadowRootRect.left + scrollParent.scrollLeft}px`,
      top: `${elementRect.top - shadowRootRect.top}px`,
      width: `${elementRect.width}px`,
      height: `${elementRect.height}px`
    });
  };

  const $positionElement =
    Rx.Observable.merge(
      Rx.Observable.just(true),
      Rx.Observable.fromEvent(window, "resize"),
      Rx.Observable.fromEvent(scrollParent, "scroll"),
      Rx.Observable.interval(pollingInterval)
    );

  (<any>doc).appendChild(clickjacker);

  return {
    clickjacker,
    disposable: $positionElement.subscribe(positionElement)
  };
}

function getScrollParent(element, includeHidden) {
  let style = window.getComputedStyle(element);
  const excludeStaticParent = style.position === "absolute";
  const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;

  if (style.position === "fixed") return document.body;

  for (let parent = element; (parent = parent.parentElement);) {
    style = getComputedStyle(parent);
    if (excludeStaticParent && style.position === "static") {
      continue;
    }
    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) {
      return parent;
    }
  }

  return document.body;
}