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
This commit is contained in:
leonklingele 2020-03-16 06:46:08 +09:00 committed by GitHub
parent f92027c44b
commit 70cbe91776
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 274 additions and 175 deletions

10
assets/css/embed.css Normal file
View file

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

View file

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

View file

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

3
assets/js/global.js Normal file
View file

@ -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;

141
assets/js/handlers.js Normal file
View file

@ -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);
}
})();

View file

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

View file

@ -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 = { var options = {
preload: 'auto', preload: 'auto',
liveui: true, liveui: true,

View file

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

File diff suppressed because one or more lines are too long

View file

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

View file

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

View file

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

View file

@ -248,10 +248,20 @@ spawn do
end end
before_all do |env| 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-XSS-Protection"] = "1; mode=block"
env.response.headers["X-Content-Type-Options"] = "nosniff" 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" env.response.headers["Referrer-Policy"] = "same-origin"
if (Kemal.config.ssl || config.https_only) && config.hsts if (Kemal.config.ssl || config.https_only) && config.hsts
@ -269,12 +279,6 @@ before_all do |env|
"/latest_version", "/latest_version",
}.any? { |r| env.request.resource.starts_with? r } }.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" if env.request.cookies.has_key? "SID"
sid = env.request.cookies["SID"].value sid = env.request.cookies["SID"].value

View file

@ -294,7 +294,7 @@ def template_youtube_comments(comments, locale, thin_mode)
<div class="pure-u-23-24"> <div class="pure-u-23-24">
<p> <p>
<a href="javascript:void(0)" data-continuation="#{child["replies"]["continuation"]}" <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> </p>
</div> </div>
</div> </div>
@ -413,7 +413,7 @@ def template_youtube_comments(comments, locale, thin_mode)
<div class="pure-u-1"> <div class="pure-u-1">
<p> <p>
<a href="javascript:void(0)" data-continuation="#{comments["continuation"]}" <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> </p>
</div> </div>
</div> </div>
@ -451,7 +451,7 @@ def template_reddit_comments(root, locale)
html << <<-END_HTML html << <<-END_HTML
<p> <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> <b><a href="https://www.reddit.com/user/#{child.author}">#{child.author}</a></b>
#{translate(locale, "`x` points", number_with_separator(child.score))} #{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> <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 video_id = watch_endpoint["videoId"].as_s
if length_seconds 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 else
text = %(<a href="/watch?v=#{video_id}">#{text}</a>) text = %(<a href="/watch?v=#{video_id}">#{text}</a>)
end end

View file

@ -20,9 +20,9 @@
<div class="pure-u-1 pure-u-lg-1-5"></div> <div class="pure-u-1 pure-u-lg-1-5"></div>
</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>
<script src="/js/playlist_widget.js"></script> <script src="/js/playlist_widget.js"></script>

View file

@ -71,14 +71,14 @@
</div> </div>
<% end %> <% 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>
<script src="/js/community.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/community.js?v=<%= ASSET_COMMIT %>"></script>

View file

@ -57,10 +57,10 @@
<div class="thumbnail"> <div class="thumbnail">
<img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/> <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
<% if plid = env.get?("remove_playlist_items") %> <% 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) || "") %>"> <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
<p class="watched"> <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"> <button type="submit" style="all:unset">
<i class="icon ion-md-trash"></i> <i class="icon ion-md-trash"></i>
</button> </button>
@ -103,13 +103,12 @@
<div class="thumbnail"> <div class="thumbnail">
<img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/> <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
<% if env.get? "show_watched" %> <% 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) || "") %>"> <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
<p class="watched"> <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"> <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"> class="icon ion-ios-eye">
</i> </i>
</button> </button>
@ -117,10 +116,10 @@
</p> </p>
</form> </form>
<% elsif plid = env.get? "add_playlist_items" %> <% 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) || "") %>"> <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
<p class="watched"> <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"> <button type="submit" style="all:unset">
<i class="icon ion-md-add"></i> <i class="icon ion-md-add"></i>
</button> </button>

View file

@ -1,8 +1,5 @@
<video style="outline:none;width:100%;background-color:#000" playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>" <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.autoplay %>autoplay<% end %>
<% if params.video_loop %>loop<% end %> <% if params.video_loop %>loop<% end %>
<% if params.controls %>controls<% end %>> <% if params.controls %>controls<% end %>>
@ -39,12 +36,12 @@
<% end %> <% end %>
</video> </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>
<script src="/js/player.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/player.js?v=<%= ASSET_COMMIT %>"></script>

View file

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

View file

@ -19,14 +19,14 @@
</p> </p>
<% end %> <% 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>
<script src="/js/subscribe_widget.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/subscribe_widget.js?v=<%= ASSET_COMMIT %>"></script>

View file

@ -10,32 +10,21 @@
<script src="/js/videojs-overlay.min.js?v=<%= ASSET_COMMIT %>"></script> <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/default.css?v=<%= ASSET_COMMIT %>">
<link rel="stylesheet" href="/css/darktheme.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> <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> </head>
<body> <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> </script>

View file

@ -18,9 +18,9 @@
</div> </div>
</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>
<script src="/js/watched_widget.js"></script> <script src="/js/watched_widget.js"></script>
@ -34,10 +34,10 @@ var watched_data = {
<% if !env.get("preferences").as(Preferences).thin_mode %> <% if !env.get("preferences").as(Preferences).thin_mode %>
<div class="thumbnail"> <div class="thumbnail">
<img class="thumbnail" src="/vi/<%= item %>/mqdefault.jpg"/> <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) || "") %>"> <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
<p class="watched"> <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"> <button type="submit" style="all:unset">
<i class="icon ion-md-trash"></i> <i class="icon ion-md-trash"></i>
</button> </button>

View file

@ -69,9 +69,9 @@
</div> </div>
<% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %> <% 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>
<script src="/js/playlist_widget.js"></script> <script src="/js/playlist_widget.js"></script>

View file

@ -2,12 +2,6 @@
<title><%= translate(locale, "Preferences") %> - Invidious</title> <title><%= translate(locale, "Preferences") %> - Invidious</title>
<% end %> <% end %>
<script>
function update_value(element) {
document.getElementById('volume-value').innerText = element.value;
}
</script>
<div class="h-box"> <div class="h-box">
<form class="pure-form pure-form-aligned" action="/preferences?referer=<%= URI.encode_www_form(referer) %>" method="post"> <form class="pure-form pure-form-aligned" action="/preferences?referer=<%= URI.encode_www_form(referer) %>" method="post">
<fieldset> <fieldset>
@ -65,7 +59,7 @@ function update_value(element) {
<div class="pure-control-group"> <div class="pure-control-group">
<label for="volume"><%= translate(locale, "Player volume: ") %></label> <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> <span class="pure-form-message-inline" id="volume-value"><%= preferences.volume %></span>
</div> </div>
@ -205,7 +199,7 @@ function update_value(element) {
<% # Web notifications are only supported over HTTPS %> <% # Web notifications are only supported over HTTPS %>
<% if Kemal.config.ssl || config.https_only %> <% if Kemal.config.ssl || config.https_only %>
<div class="pure-control-group"> <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> </div>
<% end %> <% end %>
<% end %> <% end %>

View file

@ -37,9 +37,9 @@
<div class="pure-u-2-5"></div> <div class="pure-u-2-5"></div>
<div class="pure-u-1-5" style="text-align:right"> <div class="pure-u-1-5" style="text-align:right">
<h3 style="padding-right:0.5em"> <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) || "") %>"> <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") %>"> <input style="all:unset" type="submit" value="<%= translate(locale, "unsubscribe") %>">
</a> </a>
</form> </form>
@ -52,32 +52,3 @@
<% end %> <% end %>
</div> </div>
<% end %> <% 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>

View file

@ -45,9 +45,9 @@
<hr> <hr>
</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>
<script src="/js/watched_widget.js"></script> <script src="/js/watched_widget.js"></script>

View file

@ -147,13 +147,14 @@
</div> </div>
<div class="pure-u-1 pure-u-md-2-24"></div> <div class="pure-u-1 pure-u-md-2-24"></div>
</div> </div>
<script src="/js/handlers.js?v=<%= ASSET_COMMIT %>"></script>
<script src="/js/themes.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/themes.js?v=<%= ASSET_COMMIT %>"></script>
<% if env.get? "user" %> <% if env.get? "user" %>
<script src="/js/sse.js?v=<%= ASSET_COMMIT %>"></script> <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>
<script src="/js/notifications.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/notifications.js?v=<%= ASSET_COMMIT %>"></script>

View file

@ -29,9 +29,9 @@
</div> </div>
<div class="pure-u-1-5" style="text-align:right"> <div class="pure-u-1-5" style="text-align:right">
<h3 style="padding-right:0.5em"> <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) || "") %>"> <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") %>"> <input style="all:unset" type="submit" value="<%= translate(locale, "revoke") %>">
</a> </a>
</form> </form>
@ -44,32 +44,3 @@
<% end %> <% end %>
</div> </div>
<% end %> <% 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>

View file

@ -26,23 +26,23 @@
<title><%= HTML.escape(video.title) %> - Invidious</title> <title><%= HTML.escape(video.title) %> - Invidious</title>
<% end %> <% 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> </script>