Issue 1258 - Block ads in YouTube's HTML5 player on Safari

safari/include.youtube.js

Index: safari/include.youtube.js
===================================================================
--- a/safari/include.youtube.js
+++ b/safari/include.youtube.js
@@ -22,11 +22,13 @@
   if (!ext.backgroundPage.sendMessageSync({type: "get-domain-enabled-state"}).enabled)
     return;
 
+  var badArgumentsRegex = /^((.*_)?(ad|ads|afv|adsense)(_.*)?|(ad3|st)_module|prerolls|interstitial|infringe|iv_cta_url)$/;
+
   function rewriteFlashvars(flashvars)
   {
     var pairs = flashvars.split("&");
     for (var i = 0; i < pairs.length; i++)
-      if (/^((ad|afv|adsense)(_.*)?|(ad3|st)_module|prerolls|interstitial|infringe|iv_cta_url)=/.test(pairs[i]))
+      if (badArgumentsRegex.test(pairs[i].split("=")[0]))
         pairs.splice(i--, 1);
     return pairs.join("&");
   }
@@ -66,21 +68,94 @@
       player.parentNode.replaceChild(newPlayer, player);
   }
 
+  function runInPage(fn, arg)
+  {
+    var script = document.createElement("script");
+    script.type = "application/javascript";
+    script.async = false;
+    script.textContent = "(" + fn + ")(" + arg + ");";
+    document.documentElement.appendChild(script);
+    document.documentElement.removeChild(script);
+  }
+
   document.addEventListener("beforeload", function(event)
   {
     if ((event.target.localName == "object" || event.target.localName == "embed") && /:\/\/[^\/]*\.ytimg\.com\//.test(event.url))
       patchPlayer(event.target);
   }, true);
 
-  // if history.pushState is available, YouTube uses the history API
-  // when navigation from one video to another, and tells the flash
-  // player with JavaScript which video and which ads to show next,
-  // bypassing our flashvars rewrite code. So we disable
-  // history.pushState before YouTube's JavaScript runs.
-  var script = document.createElement("script");
-  script.type = "application/javascript";
-  script.async = false;
-  script.textContent = "History.prototype.pushState = undefined;";
-  document.documentElement.appendChild(script);
-  document.documentElement.removeChild(script);
+  runInPage(function(badArgumentsRegex)
+  {
+    // If history.pushState is available, YouTube uses the history API
+    // when navigation from one video to another, and tells the flash
+    // player with JavaScript which video and which ads to show next,
+    // bypassing our flashvars rewrite code. So we disable
+    // history.pushState before YouTube's JavaScript runs.
+    History.prototype.pushState = undefined;
+
+    // The HTML5 player is configured via ytplayer.config.args. We have
+    // to make sure that ad-related arguments are ignored as they are set.
+    var ytplayer = undefined;
+    Object.defineProperty(window, "ytplayer",
+    {
+      get: function()
+      {
+        return ytplayer;
+      },
+      set: function(rawYtplayer)
+      {
+        if (!rawYtplayer || typeof rawYtplayer != "object")
+        {
+          ytplayer = rawYtplayer;
+          return;
+        }
+
+        var config = undefined;
+        ytplayer = {
+          __proto__: rawYtplayer,
+          get config()

[Wladimir Palant, 2014/08/29 20:37:07]

Given that __proto__ is deprecated, I wonder whether this should be:

ytplayer = Object.create(rawYtplayer, {
  config: {
    enumerable: true,
    get: function() {...},
    set: function() {...}
  }
});

You will of course point out that this adds two lines of course so it's up to
you whether you want to do it :)

[Sebastian Noack, 2014/08/29 20:45:05]

We don't use Object.create() so far in this codebase. So I prefer to keep
consistent for now. However, we should replace {__proto__: ...} with
Object.create() all over the place at some point. Is there already an issue for
that?

[Sebastian Noack, 2014/08/30 11:03:14]

Done.

+          {
+            return config;
+          },
+          set config(rawConfig)
+          {
+            if (!rawConfig || typeof rawConfig != "object")
+            {
+              config = rawConfig;
+              return;
+            }
+
+            var args = undefined;
+            config = {
+              __proto__: rawConfig,
+              get args()
+              {
+                return args;
+              },
+              set args(rawArgs)
+              {
+                if (!rawArgs || typeof rawArgs != "object")
+                {
+                  args = rawArgs;
+                  return;
+                }
+
+                args = {};
+                for (var arg in rawArgs)
+                {
+                  if (!badArgumentsRegex.test(arg))
+                    args[arg] = rawArgs[arg];
+                }
+              }
+            };
+
+            config.args = rawConfig.args;
+          }
+        };
+
+        ytplayer.config = rawYtplayer.config;
+      },
+      configurable: true
+    });
+  }, badArgumentsRegex);
 })();