Third party cookie test

webapp/titanembeds/blueprints/embed/embed.py

@@ -1,4 +1,4 @@
-from flask import Blueprint, render_template, abort, redirect, url_for, session, request
+from flask import Blueprint, render_template, abort, redirect, url_for, session, request, make_response
 from flask_babel import gettext
 from titanembeds.utils import check_guild_existance, guild_query_unauth_users_bool, guild_accepts_visitors, guild_unauthcaptcha_enabled, is_int, redisqueue, get_online_embed_user_keys
 from titanembeds.oauth import generate_guild_icon_url, generate_avatar_url
@@ -113,3 +113,22 @@ def login_discord():
 @embed.route("/noscript")
 def noscript():
     return render_template("noscript.html.j2")
+    
+@embed.route("/cookietest1")
+def cookietest1():
+    js = "window._3rd_party_test_step1_loaded();"
+    response = make_response(js, 200, {'Content-Type': 'application/javascript'})
+    response.set_cookie('third_party_c_t', "works", max_age=30)
+    return response
+
+@embed.route("/cookietest2")
+def cookietest2():
+    js = "window._3rd_party_test_step2_loaded("
+    if "third_party_c_t" in request.cookies and request.cookies["third_party_c_t"] == "works":
+        js = js + "true"
+    else:
+        js = js + "false"
+    js = js + ");"
+    response = make_response(js, 200, {'Content-Type': 'application/javascript'})
+    response.set_cookie('third_party_c_t', "", expires=0)
+    return response

webapp/titanembeds/static/css/embed.css

@@ -611,6 +611,27 @@ a {
   }
 }
 
+#third-party-cookies-notice {
+  color: #721c24;
+  background-color: #f8d7da;
+  border-color: #f5c6cb;
+  padding: 5px;
+  border-radius: 10px;
+}
+
+#third-party-cookies-notice h5 {
+  font-weight: 700;
+}
+
+#third-party-cookies-notice a {
+  color: #040505;
+  text-decoration: underline;
+}
+
+#third-party-cookies-notice p {
+  font-size: 12pt;
+}
+
 #nameplate {
   cursor: pointer;
   background: transparent;

webapp/titanembeds/static/js/embed.js

@@ -21,6 +21,7 @@
 /* global EmojiConvertor */
 /* global post_timeout */
 /* global is_peak */
+/* global cookie_test_s2_URL */
 
 (function () {
     const theme_options = ["DiscordDark", "FireWyvern", "IceWyvern", "MetroEdge", "BetterTitan"]; // All the avaliable theming names
@@ -2408,3 +2409,28 @@ function submit_unauthenticated_captcha() { // To be invoked when recaptcha is c
     $('#recaptchamodal').modal('close');
     $("#submit-unauthenticated-captcha-btn").click();
 }
+
+window._3rd_party_test_step1_loaded = function () {
+    // At this point, a third-party domain has now attempted to set a cookie (if all went to plan!)
+    var step2El = document.createElement('script');
+    // And load the second part of the test (reading the cookie)
+    step2El.setAttribute('src', cookie_test_s2_URL);
+    document.getElementById("third-party-cookies-notice").appendChild(step2El);
+};
+
+window._3rd_party_test_step2_loaded = function (cookieSuccess) {
+    if (!cookieSuccess) {
+        $("#third-party-cookies-notice").show().addClass("done");
+        $("#login-greeting-msg, #loginmodal-maincontent").hide();
+    } else {
+        $("#third-party-cookies-notice").hide().addClass("done");
+        $("#login-greeting-msg, #loginmodal-maincontent").show();
+    }
+};
+
+window.setTimeout(function(){
+    var noticeDiv = $("#third-party-cookies-notice");
+    if (!noticeDiv.hasClass("done")) {
+        window._3rd_party_test_step2_loaded(false);
+    }
+}, 7*1000);

webapp/titanembeds/templates/embed.html.j2

@@ -127,7 +127,11 @@
 
       <div id="loginmodal" class="modal">
         <div class="modal-content">
-          <h4>{{ login_greeting }}</h4>
+          <h4 id="login-greeting-msg">{{ login_greeting }}</h4>
+          <div id="third-party-cookies-notice" style="display: none;">
+            <h5>Heads up, third party cookies are disabled in your browser!</h5>
+            <p>Because third party cookies are disabled, login will be made unavailable. Please enable your cookies and refresh the page. Tutorials such as <a href="https://support.panopto.com/s/article/How-to-Enable-Third-Party-Cookies-in-Supported-Browsers" target="_blank">this one</a> show how you can enable cookies on your browser.</p>
+          </div>
           <div id="loginmodal-maincontent" class="row valign-wrap">
             <div id="modal_guildinfobox" class="col s3 center-align">
               {% if guild['icon'] %}
@@ -530,6 +534,7 @@
         const visitors_enabled = {% if visitors_enabled %}true{% else %}false{% endif %};
         const unauth_captcha_enabled = {% if unauth_captcha_enabled %}true{% else %}false{% endif %};
         const is_peak = {{ is_peak|tojson|safe }};
+        const cookie_test_s2_URL = {{ url_for("embed.cookietest2", _external=True)|tojson|safe }};
     </script>
 
     <script type="text/javascript" src="{{ url_for('static', filename='js/embed.js') }}"></script>
@@ -539,6 +544,9 @@
     <script type="text/javascript" src="{{ url_for('static', filename='js/site.af.sausage.js') }}"></script>
     {% endif %}
     
+    <!-- Third party cookie test -->
+    <script type="text/javascript" src="{{ url_for("embed.cookietest1", _external=True) }}"></script>
+    
     <!-- Electron fix -->
     <script>
       if (window.module) {