Add a scriptlet to change element.src/element.setAttribute

[AdamWr]

Sometimes websites are checking if some scripts/images are loaded (by using onload/onerror). If script/image is blocked then website displays alert about adblock or do not display content.

For example:

Code

(() => {
  var createScript = document.createElement("script");
  createScript.type = "text/javascript";
  createScript.async = !0;
  createScript.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
  // createScript.setAttribute("src", "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js");

  createScript.onload = () => {
    let video = '<iframe width="560" height="315" src="https://www.youtube.com/embed/Fy2rtb95QhY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
    let createDiv = document.createElement("div");
    document.body.appendChild(createDiv);
    createDiv.innerHTML = video;
  };

  createScript.onerror = () => {
    alert("adblock");
  };

  document.body.appendChild(createScript);
})();

It can be checked on example.org, if you run above code in console and pagead2.googlesyndication.com/pagead/js/adsbygoogle.js is blocked, then alert adblock will be displayed, otherwise video player will be loaded.
It can be easily fixed by $redirect rule, but sometimes users have DNS filtering enabled and we have to use $replace rules.
Or, if I'm not wrong, it could be also useful in case of extension for Safari/iOS, as it doesn't support redirect rules.

So, maybe we could add a scriptlet which could replace src to empty function/image, by using data: (though it can be blocked by CSP on some websites, so maybe there is a better solution).

For example, for Element.prototype.setAttribute:

Code

// reg is a value of src which should be replacde by empty function/image
function wrapSetAttribute(reg) {
  var regex = new RegExp(reg);

  const setAttributeWrapper = (target, thisArg, args) => {
    if (args[0] && args[0] === 'src' && args[1] && typeof args[1] === 'string' && regex.test(args[1])) {
      console.log(`${args[0]}: ${args[1]}`);
	/* if script */
      if (thisArg instanceof HTMLScriptElement) {
        return Reflect.apply(target, thisArg, [args[0], 'data:text/javascript;base64,KCk9Pnt9']); /* "KCk9Pnt9" = "()=>{}" */
      } /* if image */
      else if (thisArg instanceof HTMLImageElement) {
        return Reflect.apply(target, thisArg, [args[0], 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==']);
      } else {
        return Reflect.apply(target, thisArg, args);
      }
    } else {
      return Reflect.apply(target, thisArg, args);
    }
  };

  const setAttributeHandler = {
    apply: setAttributeWrapper
  };
  Element.prototype.setAttribute = new Proxy(Element.prototype.setAttribute, setAttributeHandler);
}
// wrapSetAttribute("adsbygoogle");

And for HTMLScriptElement.prototype.src/HTMLImageElement.prototype.src, something like:

Code

// reg is a value of src which should be replaced by empty function/image
// type - "script" for "HTMLScriptElement"; "image" for "HTMLImageElement"
function wrapSRC(reg, type) {
  var regex = new RegExp(reg);
  var tag = type;

  if (!type) {
    return;
  }

  if (type === "script") {
    tag = HTMLScriptElement;
  }

  if (type === "image") {
    tag = HTMLImageElement;
  }

  Object.defineProperty(tag.prototype, "src", {
    enumerable: true,
    configurable: true,
    get: function () {
      if (!this.getAttribute("src")) {
        return "";
      } else {
        return this.getAttribute("src");
      }
    },
    set: function (src) {
      if (typeof src === "string" && (this instanceof HTMLScriptElement || this instanceof HTMLImageElement)) {
        console.log(`src: ${src}`);

        if (regex.test(src)) {
          if (type === "script") {
            this.setAttribute("src", "data:text/javascript;base64,KCk9Pnt9");
          }

          if (type === "image") {
            this.setAttribute("src", "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==");
          }
        } else {
          this.setAttribute("src", src);
        }
      } else if (src instanceof TrustedScriptURL) {
        /* it's needed for websites using Trusted Types, for example https://www.google.com/imghp
        https://w3c.github.io/webappsec-trusted-types/dist/spec/ */
        const dp = trustedTypes.createPolicy("default", {
          createHTML: function createHTML(arg) {
            return arg;
          },
          createScript: function createScript(arg) {
            return arg;
          },
          createScriptURL: function createScriptURL(arg) {
            return arg;
          }
        });
        this.setAttribute("src", dp.createScriptURL(src.toString()));
      } else {
        try {
          this.setAttribute("src", src.toString());
        } catch (e) {
          console.log(e);
        }
      }
    }
  });
}
// wrapSRC("adsbygoogle", "image");
// wrapSRC("adsbygoogle", "script");

I'm not sure if it's a good idea and if it's done correctly, but maybe it will be helpful to create a scriptlet for this.

[slavaleleka]

so it's going to be new prevent-element-src-loading scriptlet

Prevents element source loading silently

example.org#%#//scriptlet('prevent-element-src-loading', tagName, match)

- tagName — required, case-insensitive target element tagName which `src` (property or attribute) resource loading will be prevented without it's onload breaking; possible values:
    - script
    - img
    - iframe
- match — required, string or regular expression for matching the element's URL;

example.org#%#//scriptlet('prevent-element-src-loading', 'script', 'adsbygoogle')