Migrate to a good Content Security Policy (#1023)

So attacks such as XSS (see [0]) will no longer be of an issue.

[0]: https://github.com/omarroth/invidious/issues/1022

assets/css/embed.css

@@ -0,0 +1,10 @@
+#player {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  min-width: 100%;
+  min-height: 100%;
+  width: auto;
+  height: auto;
+  z-index: -100;
+}

assets/js/community.js

@@ -1,3 +1,5 @@
+var community_data = JSON.parse(document.getElementById('community_data').innerHTML);
+
 String.prototype.supplant = function (o) {
     return this.replace(/{([^{}]*)}/g, function (a, b) {
         var r = o[b];

assets/js/embed.js

@@ -1,3 +1,5 @@
+var video_data = JSON.parse(document.getElementById('video_data').innerHTML);
+
 function get_playlist(plid, retries) {
     if (retries == undefined) retries = 5;
 

assets/js/global.js

@@ -0,0 +1,3 @@
+// Disable Web Workers. Fixes Video.js CSP violation (created by `new Worker(objURL)`):
+// Refused to create a worker from 'blob:http://host/id' because it violates the following Content Security Policy directive: "worker-src 'self'".
+window.Worker = undefined;

assets/js/handlers.js

@@ -0,0 +1,141 @@
+'use strict';
+
+(function() {
+    var n2a = function(n) { return Array.prototype.slice.call(n); };
+
+    var video_player = document.getElementById('player');
+    if (video_player) {
+        video_player.onmouseenter = function() { video_player['data-title'] = video_player['title']; video_player['title'] = ''; };
+        video_player.onmouseleave = function() { video_player['title'] = video_player['data-title']; video_player['data-title'] = ''; };
+        video_player.oncontextmenu = function() { video_player['title'] = video_player['data-title']; };
+    }
+
+    // For dynamically inserted elements
+    document.addEventListener('click', function(e) {
+        if (!e || !e.target) { return; }
+        e = e.target;
+        var handler_name = e.getAttribute('data-onclick');
+        switch (handler_name) {
+        case 'jump_to_time':
+            var time = e.getAttribute('data-jump-time');
+            player.currentTime(time);
+            break;
+        case 'get_youtube_replies':
+            var load_more = e.getAttribute('data-load-more') !== null;
+            get_youtube_replies(e, load_more);
+            break;
+        default:
+            break;
+        }
+    });
+
+    n2a(document.querySelectorAll('[data-mouse="switch_classes"]')).forEach(function(e) {
+        var classes = e.getAttribute('data-switch-classes').split(',');
+        var ec = classes[0];
+        var lc = classes[1];
+        var onoff = function(on, off) {
+            var cs = e.getAttribute('class');
+            cs = cs.split(off).join(on);
+            e.setAttribute('class', cs);
+        };
+        e.onmouseenter = function() { onoff(ec, lc); };
+        e.onmouseleave = function() { onoff(lc, ec); };
+    });
+
+    n2a(document.querySelectorAll('[data-onsubmit="return_false"]')).forEach(function(e) {
+        e.onsubmit = function() { return false; };
+    });
+
+    n2a(document.querySelectorAll('[data-onclick="toggle_parent"]')).forEach(function(e) {
+        e.onclick = function() { toggle_parent(e); };
+    });
+    n2a(document.querySelectorAll('[data-onclick="mark_watched"]')).forEach(function(e) {
+        e.onclick = function() { mark_watched(e); };
+    });
+    n2a(document.querySelectorAll('[data-onclick="mark_unwatched"]')).forEach(function(e) {
+        e.onclick = function() { mark_unwatched(e); };
+    });
+    n2a(document.querySelectorAll('[data-onclick="add_playlist_item"]')).forEach(function(e) {
+        e.onclick = function() { add_playlist_item(e); };
+    });
+    n2a(document.querySelectorAll('[data-onclick="remove_playlist_item"]')).forEach(function(e) {
+        e.onclick = function() { remove_playlist_item(e); };
+    });
+    n2a(document.querySelectorAll('[data-onclick="revoke_token"]')).forEach(function(e) {
+        e.onclick = function() { revoke_token(e); };
+    });
+    n2a(document.querySelectorAll('[data-onclick="remove_subscription"]')).forEach(function(e) {
+        e.onclick = function() { remove_subscription(e); };
+    });
+    n2a(document.querySelectorAll('[data-onclick="notification_requestPermission"]')).forEach(function(e) {
+        e.onclick = function() { Notification.requestPermission(); };
+    });
+
+    n2a(document.querySelectorAll('[data-onrange="update_volume_value"]')).forEach(function(e) {
+        var cb = function() { update_volume_value(e); }
+        e.oninput = cb;
+        e.onchange = cb;
+    });
+
+    function update_volume_value(element) {
+        document.getElementById('volume-value').innerText = element.value;
+    }
+
+    function revoke_token(target) {
+        var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
+        row.style.display = 'none';
+        var count = document.getElementById('count');
+        count.innerText = count.innerText - 1;
+
+        var referer = window.encodeURIComponent(document.location.href);
+        var url = '/token_ajax?action_revoke_token=1&redirect=false' +
+            '&referer=' + referer +
+            '&session=' + target.getAttribute('data-session');
+        var xhr = new XMLHttpRequest();
+        xhr.responseType = 'json';
+        xhr.timeout = 10000;
+        xhr.open('POST', url, true);
+        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4) {
+                if (xhr.status != 200) {
+                    count.innerText = parseInt(count.innerText) + 1;
+                    row.style.display = '';
+                }
+            }
+        }
+
+        var csrf_token = target.parentNode.querySelector('input[name="csrf_token"]').value;
+        xhr.send('csrf_token=' + csrf_token);
+    }
+
+    function remove_subscription(target) {
+        var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
+        row.style.display = 'none';
+        var count = document.getElementById('count');
+        count.innerText = count.innerText - 1;
+
+        var referer = window.encodeURIComponent(document.location.href);
+        var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
+            '&referer=' + referer +
+            '&c=' + target.getAttribute('data-ucid');
+        var xhr = new XMLHttpRequest();
+        xhr.responseType = 'json';
+        xhr.timeout = 10000;
+        xhr.open('POST', url, true);
+        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4) {
+                if (xhr.status != 200) {
+                    count.innerText = parseInt(count.innerText) + 1;
+                    row.style.display = '';
+                }
+            }
+        }
+
+        var csrf_token = target.parentNode.querySelector('input[name="csrf_token"]').value;
+        xhr.send('csrf_token=' + csrf_token);
+    }
+})();

assets/js/notifications.js

@@ -1,3 +1,5 @@
+var notification_data = JSON.parse(document.getElementById('notification_data').innerHTML);
+
 var notifications, delivered;
 
 function get_subscriptions(callback, retries) {

assets/js/player.js

@@ -1,3 +1,6 @@
+var player_data = JSON.parse(document.getElementById('player_data').innerHTML);
+var video_data = JSON.parse(document.getElementById('video_data').innerHTML);
+
 var options = {
     preload: 'auto',
     liveui: true,

assets/js/playlist_widget.js

@@ -1,3 +1,5 @@
+var playlist_data = JSON.parse(document.getElementById('playlist_data').innerHTML);
+
 function add_playlist_item(target) {
     var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
     tile.style.display = 'none';

assets/js/subscribe_widget.js

@@ -1,3 +1,5 @@
+var subscribe_data = JSON.parse(document.getElementById('subscribe_data').innerHTML);
+
 var subscribe_button = document.getElementById('subscribe');
 subscribe_button.parentNode['action'] = 'javascript:void(0)';
 

assets/js/watch.js

@@ -1,3 +1,5 @@
+var video_data = JSON.parse(document.getElementById('video_data').innerHTML);
+
 String.prototype.supplant = function (o) {
     return this.replace(/{([^{}]*)}/g, function (a, b) {
         var r = o[b];

assets/js/watched_widget.js

@@ -1,3 +1,5 @@
+var watched_data = JSON.parse(document.getElementById('watched_data').innerHTML);
+
 function mark_watched(target) {
     var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
     tile.style.display = 'none';

src/invidious.cr

@@ -248,10 +248,20 @@ spawn do
 end
 
 before_all do |env|
-  host_url = make_host_url(config, Kemal.config)
+  begin
+    preferences = Preferences.from_json(env.request.cookies["PREFS"]?.try &.value || "{}")
+  rescue
+    preferences = Preferences.from_json("{}")
+  end
+
   env.response.headers["X-XSS-Protection"] = "1; mode=block"
   env.response.headers["X-Content-Type-Options"] = "nosniff"
-  env.response.headers["Content-Security-Policy"] = "default-src blob: data: 'self' #{host_url} 'unsafe-inline' 'unsafe-eval'; media-src blob: 'self' #{host_url} https://*.googlevideo.com:443"
+  extra_media_csp = ""
+  if CONFIG.disabled?("local") || !preferences.local
+    extra_media_csp += " https://*.googlevideo.com:443"
+  end
+  # TODO: Remove style-src's 'unsafe-inline', requires to remove all inline styles (<style> [..] </style>, style=" [..] ")
+  env.response.headers["Content-Security-Policy"] = "default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; media-src 'self' blob:#{extra_media_csp}"
   env.response.headers["Referrer-Policy"] = "same-origin"
 
   if (Kemal.config.ssl || config.https_only) && config.hsts
@@ -269,12 +279,6 @@ before_all do |env|
             "/latest_version",
           }.any? { |r| env.request.resource.starts_with? r }
 
-  begin
-    preferences = Preferences.from_json(env.request.cookies["PREFS"]?.try &.value || "{}")
-  rescue
-    preferences = Preferences.from_json("{}")
-  end
-
   if env.request.cookies.has_key? "SID"
     sid = env.request.cookies["SID"].value
 

src/invidious/comments.cr

@@ -294,7 +294,7 @@ def template_youtube_comments(comments, locale, thin_mode)
           <div class="pure-u-23-24">
             <p>
               <a href="javascript:void(0)" data-continuation="#{child["replies"]["continuation"]}"
-                onclick="get_youtube_replies(this)">#{translate(locale, "View `x` replies", number_with_separator(child["replies"]["replyCount"]))}</a>
+                data-onclick="get_youtube_replies">#{translate(locale, "View `x` replies", number_with_separator(child["replies"]["replyCount"]))}</a>
             </p>
           </div>
         </div>
@@ -413,7 +413,7 @@ def template_youtube_comments(comments, locale, thin_mode)
         <div class="pure-u-1">
           <p>
             <a href="javascript:void(0)" data-continuation="#{comments["continuation"]}"
-              onclick="get_youtube_replies(this, true)">#{translate(locale, "Load more")}</a>
+              data-onclick="get_youtube_replies" data-load-more>#{translate(locale, "Load more")}</a>
           </p>
         </div>
       </div>
@@ -451,7 +451,7 @@ def template_reddit_comments(root, locale)
 
         html << <<-END_HTML
         <p>
-          <a href="javascript:void(0)" onclick="toggle_parent(this)">[ - ]</a>
+          <a href="javascript:void(0)" data-onclick="toggle_parent">[ - ]</a>
           <b><a href="https://www.reddit.com/user/#{child.author}">#{child.author}</a></b>
           #{translate(locale, "`x` points", number_with_separator(child.score))}
           <span title="#{child.created_utc.to_s(translate(locale, "%a %B %-d %T %Y UTC"))}">#{translate(locale, "`x` ago", recode_date(child.created_utc, locale))}</span>
@@ -556,7 +556,7 @@ def content_to_comment_html(content)
         video_id = watch_endpoint["videoId"].as_s
 
         if length_seconds
-          text = %(<a href="javascript:void(0)" onclick="player.currentTime(#{length_seconds})">#{text}</a>)
+          text = %(<a href="javascript:void(0)" data-onclick="jump_to_time" data-jump-time="#{length_seconds}">#{text}</a>)
         else
           text = %(<a href="/watch?v=#{video_id}">#{text}</a>)
         end

src/invidious/views/add_playlist_items.ecr

@@ -20,9 +20,9 @@
     <div class="pure-u-1 pure-u-lg-1-5"></div>
 </div>
 
-<script>
+<script id="playlist_data" type="application/json">
-var playlist_data = {
+{
-    csrf_token: '<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>',
+    "csrf_token": "<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>"
 }
 </script>
 <script src="/js/playlist_widget.js"></script>

src/invidious/views/community.ecr

@@ -71,14 +71,14 @@
     </div>
 <% end %>
 
-<script>
+<script id="community_data" type="application/json">
-var community_data = {
+{
-    ucid: '<%= channel.ucid %>',
+    "ucid": "<%= channel.ucid %>",
-    youtube_comments_text: '<%= HTML.escape(translate(locale, "View YouTube comments")) %>',
+    "youtube_comments_text": "<%= HTML.escape(translate(locale, "View YouTube comments")) %>",
-    comments_text: '<%= HTML.escape(translate(locale, "View `x` comments", "{commentCount}")) %>',
+    "comments_text": "<%= HTML.escape(translate(locale, "View `x` comments", "{commentCount}")) %>",
-    hide_replies_text: '<%= HTML.escape(translate(locale, "Hide replies")) %>',
+    "hide_replies_text": "<%= HTML.escape(translate(locale, "Hide replies")) %>",
-    show_replies_text: '<%= HTML.escape(translate(locale, "Show replies")) %>',
+    "show_replies_text": "<%= HTML.escape(translate(locale, "Show replies")) %>",
-    preferences: <%= env.get("preferences").as(Preferences).to_json %>,
+    "preferences": <%= env.get("preferences").as(Preferences).to_json %>
 }
 </script>
 <script src="/js/community.js?v=<%= ASSET_COMMIT %>"></script>

src/invidious/views/components/item.ecr

@@ -57,10 +57,10 @@
                     <div class="thumbnail">
                         <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
                         <% if plid = env.get?("remove_playlist_items") %>
-                            <form onsubmit="return false" action="/playlist_ajax?action_remove_video=1&set_video_id=<%= item.index %>&playlist_id=<%= plid %>&referer=<%= env.get("current_page") %>" method="post">
+                            <form data-onsubmit="return_false" action="/playlist_ajax?action_remove_video=1&set_video_id=<%= item.index %>&playlist_id=<%= plid %>&referer=<%= env.get("current_page") %>" method="post">
                                 <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
                                 <p class="watched">
-                                    <a onclick="remove_playlist_item(this)" data-index="<%= item.index %>" data-plid="<%= plid %>" href="javascript:void(0)">
+                                    <a data-onclick="remove_playlist_item" data-index="<%= item.index %>" data-plid="<%= plid %>" href="javascript:void(0)">
                                         <button type="submit" style="all:unset">
                                             <i class="icon ion-md-trash"></i>
                                         </button>
@@ -103,13 +103,12 @@
                     <div class="thumbnail">
                         <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
                         <% if env.get? "show_watched" %>
-                            <form onsubmit="return false" action="/watch_ajax?action_mark_watched=1&id=<%= item.id %>&referer=<%= env.get("current_page") %>" method="post">
+                            <form data-onsubmit="return_false" action="/watch_ajax?action_mark_watched=1&id=<%= item.id %>&referer=<%= env.get("current_page") %>" method="post">
                                 <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
                                 <p class="watched">
-                                    <a onclick="mark_watched(this)" data-id="<%= item.id %>" href="javascript:void(0)">
+                                    <a data-onclick="mark_watched" data-id="<%= item.id %>" href="javascript:void(0)">
                                         <button type="submit" style="all:unset">
-                                            <i onmouseenter='this.setAttribute("class", "icon ion-ios-eye-off")'
+                                            <i data-mouse="switch_classes" data-switch-classes="ion-ios-eye-off,ion-ios-eye"
-                                                onmouseleave='this.setAttribute("class", "icon ion-ios-eye")'
                                                 class="icon ion-ios-eye">
                                             </i>
                                         </button>
@@ -117,10 +116,10 @@
                                 </p>
                             </form>
                         <% elsif plid = env.get? "add_playlist_items" %>
-                            <form onsubmit="return false" action="/playlist_ajax?action_add_video=1&video_id=<%= item.id %>&playlist_id=<%= plid %>&referer=<%= env.get("current_page") %>" method="post">
+                            <form data-onsubmit="return_false" action="/playlist_ajax?action_add_video=1&video_id=<%= item.id %>&playlist_id=<%= plid %>&referer=<%= env.get("current_page") %>" method="post">
                                 <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
                                 <p class="watched">
-                                    <a onclick="add_playlist_item(this)" data-id="<%= item.id %>" data-plid="<%= plid %>" href="javascript:void(0)">
+                                    <a data-onclick="add_playlist_item" data-id="<%= item.id %>" data-plid="<%= plid %>" href="javascript:void(0)">
                                         <button type="submit" style="all:unset">
                                             <i class="icon ion-md-add"></i>
                                         </button>

src/invidious/views/components/player.ecr

@@ -1,8 +1,5 @@
 <video style="outline:none;width:100%;background-color:#000" playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>"
-    id="player" class="video-js player-style-<%= params.player_style %>"
+    id="player" class="on-video_player video-js player-style-<%= params.player_style %>"
-    onmouseenter='this["data-title"]=this["title"];this["title"]=""'
-    onmouseleave='this["title"]=this["data-title"];this["data-title"]=""'
-    oncontextmenu='this["title"]=this["data-title"]'
     <% if params.autoplay %>autoplay<% end %>
     <% if params.video_loop %>loop<% end %>
     <% if params.controls %>controls<% end %>>
@@ -39,12 +36,12 @@
     <% end %>
 </video>
 
-<script>
+<script id="player_data" type="application/json">
-var player_data = {
+{
-    aspect_ratio: '<%= aspect_ratio %>',
+    "aspect_ratio": "<%= aspect_ratio %>",
-    title: "<%= video.title.dump_unquoted %>",
+    "title": "<%= video.title.dump_unquoted %>",
-    description: "<%= HTML.escape(video.short_description) %>",
+    "description": "<%= HTML.escape(video.short_description) %>",
-    thumbnail: "<%= thumbnail %>"
+    "thumbnail": "<%= thumbnail %>"
 }
 </script>
 <script src="/js/player.js?v=<%= ASSET_COMMIT %>"></script>

src/invidious/views/components/player_sources.ecr

@@ -3,6 +3,7 @@
 <link rel="stylesheet" href="/css/videojs.markers.min.css?v=<%= ASSET_COMMIT %>">
 <link rel="stylesheet" href="/css/videojs-share.css?v=<%= ASSET_COMMIT %>">
 <link rel="stylesheet" href="/css/videojs-vtt-thumbnails.css?v=<%= ASSET_COMMIT %>">
+<script src="/js/global.js?v=<%= ASSET_COMMIT %>"></script>
 <script src="/js/video.min.js?v=<%= ASSET_COMMIT %>"></script>
 <script src="/js/videojs-contrib-quality-levels.min.js?v=<%= ASSET_COMMIT %>"></script>
 <script src="/js/videojs-http-source-selector.min.js?v=<%= ASSET_COMMIT %>"></script>

src/invidious/views/components/subscribe_widget.ecr

@@ -19,14 +19,14 @@
         </p>
     <% end %>
 
-    <script>
+    <script id="subscribe_data" type="application/json">
-    var subscribe_data = {
+    {
-        ucid: '<%= ucid %>',
+        "ucid": "<%= ucid %>",
-        author: '<%= HTML.escape(author) %>',
+        "author": "<%= HTML.escape(author) %>",
-        sub_count_text: '<%= HTML.escape(sub_count_text) %>',
+        "sub_count_text": "<%= HTML.escape(sub_count_text) %>",
-        csrf_token: '<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>',
+        "csrf_token": "<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>",
-        subscribe_text: '<%= HTML.escape(translate(locale, "Subscribe")) %>',
+        "subscribe_text": "<%= HTML.escape(translate(locale, "Subscribe")) %>",
-        unsubscribe_text: '<%= HTML.escape(translate(locale, "Unsubscribe")) %>'
+        "unsubscribe_text": "<%= HTML.escape(translate(locale, "Unsubscribe")) %>"
     }
     </script>
     <script src="/js/subscribe_widget.js?v=<%= ASSET_COMMIT %>"></script>

src/invidious/views/embed.ecr

@@ -10,32 +10,21 @@
     <script src="/js/videojs-overlay.min.js?v=<%= ASSET_COMMIT %>"></script>
     <link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>">
     <link rel="stylesheet" href="/css/darktheme.css?v=<%= ASSET_COMMIT %>">
+    <link rel="stylesheet" href="/css/embed.css?v=<%= ASSET_COMMIT %>">
     <title><%= HTML.escape(video.title) %> - Invidious</title>
-    <style>
-    #player {
-        position: fixed;
-        right: 0;
-        bottom: 0;
-        min-width: 100%;
-        min-height: 100%;
-        width: auto;
-        height: auto;
-        z-index: -100;
-    }
-    </style>
 </head>
 
 <body>
-<script>
+<script id="video_data" type="application/json">
-var video_data = {
+{
-    id: '<%= video.id %>',
+    "id": "<%= video.id %>",
-    index: '<%= continuation %>',
+    "index": "<%= continuation %>",
-    plid: '<%= plid %>',
+    "plid": "<%= plid %>",
-    length_seconds: '<%= video.length_seconds.to_f %>',
+    "length_seconds": "<%= video.length_seconds.to_f %>",
-    video_series: <%= video_series.to_json %>,
+    "video_series": <%= video_series.to_json %>,
-    params: <%= params.to_json %>,
+    "params": <%= params.to_json %>,
-    preferences: <%= preferences.to_json %>,
+    "preferences": <%= preferences.to_json %>,
-    premiere_timestamp: <%= video.premiere_timestamp.try &.to_unix || "null" %>
+    "premiere_timestamp": <%= video.premiere_timestamp.try &.to_unix || "null" %>
 }
 </script>
 

src/invidious/views/history.ecr

@@ -18,9 +18,9 @@
     </div>
 </div>
 
-<script>
+<script id="watched_data" type="application/json">
-var watched_data = {
+{
-    csrf_token: '<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>',
+    "csrf_token": "<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>"
 }
 </script>
 <script src="/js/watched_widget.js"></script>
@@ -34,10 +34,10 @@ var watched_data = {
                             <% if !env.get("preferences").as(Preferences).thin_mode %>
                                 <div class="thumbnail">
                                     <img class="thumbnail" src="/vi/<%= item %>/mqdefault.jpg"/>
-                                    <form onsubmit="return false" action="/watch_ajax?action_mark_unwatched=1&id=<%= item %>&referer=<%= env.get("current_page") %>" method="post">
+                                    <form data-onsubmit="return_false" action="/watch_ajax?action_mark_unwatched=1&id=<%= item %>&referer=<%= env.get("current_page") %>" method="post">
                                         <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
                                         <p class="watched">
-                                            <a onclick="mark_unwatched(this)" data-id="<%= item %>" href="javascript:void(0)">
+                                            <a data-onclick="mark_unwatched" data-id="<%= item %>" href="javascript:void(0)">
                                                 <button type="submit" style="all:unset">
                                                     <i class="icon ion-md-trash"></i>
                                                 </button>

src/invidious/views/playlist.ecr

@@ -69,9 +69,9 @@
 </div>
 
 <% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %>
-<script>
+<script id="playlist_data" type="application/json">
-var playlist_data = {
+{
-    csrf_token: '<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>',
+    "csrf_token": "<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>"
 }
 </script>
 <script src="/js/playlist_widget.js"></script>

src/invidious/views/preferences.ecr

@@ -2,12 +2,6 @@
 <title><%= translate(locale, "Preferences") %> - Invidious</title>
 <% end %>
 
-<script>
-function update_value(element) {
-    document.getElementById('volume-value').innerText = element.value;
-}
-</script>
-
 <div class="h-box">
     <form class="pure-form pure-form-aligned" action="/preferences?referer=<%= URI.encode_www_form(referer) %>" method="post">
         <fieldset>
@@ -65,7 +59,7 @@ function update_value(element) {
 
             <div class="pure-control-group">
                 <label for="volume"><%= translate(locale, "Player volume: ") %></label>
-                <input name="volume" id="volume" oninput="update_value(this);" type="range" min="0" max="100" step="5" value="<%= preferences.volume %>">
+                <input name="volume" id="volume" data-onrange="update_volume_value" type="range" min="0" max="100" step="5" value="<%= preferences.volume %>">
                 <span class="pure-form-message-inline" id="volume-value"><%= preferences.volume %></span>
             </div>
 
@@ -205,7 +199,7 @@ function update_value(element) {
                 <% # Web notifications are only supported over HTTPS %>
                 <% if Kemal.config.ssl || config.https_only %>
                     <div class="pure-control-group">
-                        <a href="#" onclick="Notification.requestPermission()"><%= translate(locale, "Enable web notifications") %></a>
+                        <a href="#" data-onclick="notification_requestPermission"><%= translate(locale, "Enable web notifications") %></a>
                     </div>
                 <% end %>
             <% end %>

src/invidious/views/subscription_manager.ecr

@@ -37,9 +37,9 @@
             <div class="pure-u-2-5"></div>
             <div class="pure-u-1-5" style="text-align:right">
                 <h3 style="padding-right:0.5em">
-                    <form onsubmit="return false" action="/subscription_ajax?action_remove_subscriptions=1&c=<%= channel.id %>&referer=<%= env.get("current_page") %>" method="post">
+                    <form data-onsubmit="return_false" action="/subscription_ajax?action_remove_subscriptions=1&c=<%= channel.id %>&referer=<%= env.get("current_page") %>" method="post">
                         <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
-                        <a onclick="remove_subscription(this)" data-ucid="<%= channel.id %>" href="#">
+                        <a data-onclick="remove_subscription" data-ucid="<%= channel.id %>" href="#">
                             <input style="all:unset" type="submit" value="<%= translate(locale, "unsubscribe") %>">
                         </a>
                     </form>
@@ -52,32 +52,3 @@
         <% end %>
     </div>
 <% end %>
-
-<script>
-function remove_subscription(target) {
-    var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
-    row.style.display = 'none';
-    var count = document.getElementById('count');
-    count.innerText = count.innerText - 1;
-
-    var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
-        '&referer=<%= env.get("current_page") %>' +
-        '&c=' + target.getAttribute('data-ucid');
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('POST', url, true);
-    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
-    xhr.onreadystatechange = function() {
-        if (xhr.readyState == 4) {
-            if (xhr.status != 200) {
-                count.innerText = parseInt(count.innerText) + 1;
-                row.style.display = '';
-            }
-        }
-    }
-
-    xhr.send('csrf_token=<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>');
-}
-</script>

src/invidious/views/subscriptions.ecr

@@ -45,9 +45,9 @@
     <hr>
 </div>
 
-<script>
+<script id="watched_data" type="application/json">
-var watched_data = {
+{
-    csrf_token: '<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>',
+    "csrf_token": "<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>"
 }
 </script>
 <script src="/js/watched_widget.js"></script>

src/invidious/views/template.ecr

@@ -147,13 +147,14 @@
         </div>
         <div class="pure-u-1 pure-u-md-2-24"></div>
     </div>
+    <script src="/js/handlers.js?v=<%= ASSET_COMMIT %>"></script>
     <script src="/js/themes.js?v=<%= ASSET_COMMIT %>"></script>
     <% if env.get? "user" %>
         <script src="/js/sse.js?v=<%= ASSET_COMMIT %>"></script>
-        <script>
+        <script id="notification_data" type="application/json">
-            var notification_data = {
+            {
-                upload_text: '<%= HTML.escape(translate(locale, "`x` uploaded a video")) %>',
+                "upload_text": "<%= HTML.escape(translate(locale, "`x` uploaded a video")) %>",
-                live_upload_text: '<%= HTML.escape(translate(locale, "`x` is live")) %>',
+                "live_upload_text": "<%= HTML.escape(translate(locale, "`x` is live")) %>"
             }
         </script>
         <script src="/js/notifications.js?v=<%= ASSET_COMMIT %>"></script>

src/invidious/views/token_manager.ecr

@@ -29,9 +29,9 @@
         </div>
         <div class="pure-u-1-5" style="text-align:right">
             <h3 style="padding-right:0.5em">
-                <form onsubmit="return false" action="/token_ajax?action_revoke_token=1&session=<%= token[:session] %>&referer=<%= env.get("current_page") %>" method="post">
+                <form data-onsubmit="return_false" action="/token_ajax?action_revoke_token=1&session=<%= token[:session] %>&referer=<%= env.get("current_page") %>" method="post">
                     <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
-                    <a onclick="revoke_token(this)" data-session="<%= token[:session] %>" href="#">
+                    <a data-onclick="revoke_token" data-session="<%= token[:session] %>" href="#">
                         <input style="all:unset" type="submit" value="<%= translate(locale, "revoke") %>">
                     </a>
                 </form>
@@ -44,32 +44,3 @@
     <% end %>
 </div>
 <% end %>
-
-<script>
-function revoke_token(target) {
-    var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
-    row.style.display = 'none';
-    var count = document.getElementById('count');
-    count.innerText = count.innerText - 1;
-
-    var url = '/token_ajax?action_revoke_token=1&redirect=false' +
-        '&referer=<%= env.get("current_page") %>' +
-        '&session=' + target.getAttribute('data-session');
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('POST', url, true);
-    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
-    xhr.onreadystatechange = function() {
-        if (xhr.readyState == 4) {
-            if (xhr.status != 200) {
-                count.innerText = parseInt(count.innerText) + 1;
-                row.style.display = '';
-            }
-        }
-    }
-
-    xhr.send('csrf_token=<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>');
-}
-</script>

src/invidious/views/watch.ecr

@@ -26,23 +26,23 @@
 <title><%= HTML.escape(video.title) %> - Invidious</title>
 <% end %>
 
-<script>
+<script id="video_data" type="application/json">
-var video_data = {
+{
-    id: '<%= video.id %>',
+    "id": "<%= video.id %>",
-    index: '<%= continuation %>',
+    "index": "<%= continuation %>",
-    plid: '<%= plid %>',
+    "plid": "<%= plid %>",
-    length_seconds: <%= video.length_seconds.to_f %>,
+    "length_seconds": <%= video.length_seconds.to_f %>,
-    play_next: <%= !rvs.empty? && !plid && params.continue %>,
+    "play_next": <%= !rvs.empty? && !plid && params.continue %>,
-    next_video: '<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>',
+    "next_video": "<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>",
-    youtube_comments_text: '<%= HTML.escape(translate(locale, "View YouTube comments")) %>',
+    "youtube_comments_text": "<%= HTML.escape(translate(locale, "View YouTube comments")) %>",
-    reddit_comments_text: '<%= HTML.escape(translate(locale, "View Reddit comments")) %>',
+    "reddit_comments_text": "<%= HTML.escape(translate(locale, "View Reddit comments")) %>",
-    reddit_permalink_text: '<%= HTML.escape(translate(locale, "View more comments on Reddit")) %>',
+    "reddit_permalink_text": "<%= HTML.escape(translate(locale, "View more comments on Reddit")) %>",
-    comments_text: '<%= HTML.escape(translate(locale, "View `x` comments", "{commentCount}")) %>',
+    "comments_text": "<%= HTML.escape(translate(locale, "View `x` comments", "{commentCount}")) %>",
-    hide_replies_text: '<%= HTML.escape(translate(locale, "Hide replies")) %>',
+    "hide_replies_text": "<%= HTML.escape(translate(locale, "Hide replies")) %>",
-    show_replies_text: '<%= HTML.escape(translate(locale, "Show replies")) %>',
+    "show_replies_text": "<%= HTML.escape(translate(locale, "Show replies")) %>",
-    params: <%= params.to_json %>,
+    "params": <%= params.to_json %>,
-    preferences: <%= preferences.to_json %>,
+    "preferences": <%= preferences.to_json %>,
-    premiere_timestamp: <%= video.premiere_timestamp.try &.to_unix || "null" %>
+    "premiere_timestamp": <%= video.premiere_timestamp.try &.to_unix || "null" %>
 }
 </script>