Work around new Twitch embedding restriction. They could have looked …

…at the referrer too, to be honest. See #42.
stefansundin · Jul 6, 2020 · 35e9711 · 35e9711
1 parent 54690f6
commit 35e9711
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 3 deletions.
diff --git a/app.rb b/app.rb
@@ -47,6 +47,12 @@
   send_file File.join(settings.views, "countdown.html")
 end
 
+get "/twitch-embed.html" do
+  content_type :html
+  SecureHeaders.use_secure_headers_override(request, :twitch_embed)
+  send_file File.join(settings.views, "twitch-embed.html")
+end
+
 # This route is useful together with this bookmarklet:
 # javascript:location='https://rssbox.herokuapp.com/go?q='+encodeURIComponent(location.href);
 get "/go" do

diff --git a/config/initializers/05-string.rb b/config/initializers/05-string.rb
@@ -162,7 +162,7 @@ def embed_html(request=nil)
       # https://www.twitch.tv/gamesdonequick
       # https://www.twitch.tv/gamesdonequick/video/76877760 (legacy url)
       # https://www.twitch.tv/gamesdonequick/v/76877760 (legacy url)
-      url = "https://player.twitch.tv/?"
+      url = "#{request.root_url}/twitch-embed.html?"
       url += vod_id ? "video=#{vod_id}" : "channel=#{channel_name}"
       url += "&time=#{t}" if t
       <<~EOF

diff --git a/config/initializers/10-secure_headers.rb b/config/initializers/10-secure_headers.rb
@@ -84,3 +84,15 @@
     script_src: %w('unsafe-inline'),
   })
 end
+
+SecureHeaders::Configuration.override(:twitch_embed) do |config|
+  config.x_frame_options = SecureHeaders::OPT_OUT
+  config.csp.merge!({
+    # "meta" values. these will shape the header, but the values are not included in the header.
+    report_only: false,
+    preserve_schemes: true,
+    # directive values: these values will directly translate into source directives
+    default_src: %w('none'),
+    frame_src: %w(https://player.twitch.tv),
+  })
+end
diff --git a/views/twitch-embed.html b/views/twitch-embed.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+iframe {
+  min-height: 378px;
+}
+</style>
+</head>
+<body>
+
+<noscript>Please enable JavaScript.</noscript>
+
+<script>
+let qs = window.location.search;
+qs += `&parent=${window.location.hostname}`;
+if (document.referrer != "") {
+  const referrer = new URL(document.referrer);
+  qs += `&parent=${referrer.hostname}`;
+}
+
+const iframe = document.createElement("iframe");
+iframe.width = "100%";
+iframe.height = "100%";
+iframe.frameBorder = "0";
+iframe.scrolling = "no";
+iframe.allowFullscreen = true;
+iframe.src = `https://player.twitch.tv/${qs}`;
+document.body.appendChild(iframe);
+</script>
+</body>
+</html>
diff --git a/views/twitch.atom.erb b/views/twitch.atom.erb
@@ -17,10 +17,10 @@
     <author><name><%= video["user_name"].esc %></name></author>
     <content type="html">
 <%= <<~EOF.esc
-  <iframe width="620" height="378" src="https://player.twitch.tv/?video=#{video["id"]}" frameborder="0" scrolling="no" allowfullscreen referrerpolicy="no-referrer"></iframe>
+  <iframe width="620" height="378" src="#{request.root_url}/twitch-embed.html?video=#{video["id"]}" frameborder="0" scrolling="no" allowfullscreen referrerpolicy="no-referrer"></iframe>
 
   <p>
-    <a href="https://player.twitch.tv/?video=#{video["id"]}" rel="noreferrer">Open embed</a> |
+    <a href="https://player.twitch.tv/?parent=twitch.tv&video=#{video["id"]}" rel="noreferrer">Open embed</a> |
     <a href="#{request.root_url}/twitch/watch?url=#{video["id"]}&open">Open in VLC</a> |
     <a href="#{request.root_url}/twitch/watch?url=#{video["id"]}">Open in external program</a> |
     <a href="#{request.root_url}/twitch/download?url=#{video["id"]}">Download video</a>