clickjacker.js

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

  clickjacker.style.position = "absolute";
  clickjacker.style.cursor = "pointer";

  clickjacker.style.backgroundColor = "red";
  clickjacker.style.opacity = "0.5";

  element.parentNode.insertBefore(clickjacker, element.nextSibling);

  const position = () => {
    const elementRect = element.getBoundingClientRect();

    const leftDiff = element.offsetLeft - clickjacker.offsetLeft;
    const topDiff = element.offsetTop - clickjacker.offsetTop;

    Object.assign(clickjacker.style, {
      width: `${elementRect.width}px`,
      height: `${elementRect.height}px`,
      transform: `translate(${leftDiff}px, ${topDiff}px)`
    });
  };

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

  const positionDisposable = positionElement$.subscribe(position);

  const dispose = () => {
    positionDisposable.dispose();
    if (clickjacker) clickjacker.parentNode.removeChild(clickjacker);
  };

  return {
    clickjacker,
    dispose
  };
}