Add DoubleClickjack protection to frontend profile

Tetrakern · Jan 8, 2025 · 9679d7d · 9679d7d
1 parent 42ae3a0
commit 9679d7d
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 19 deletions.
diff --git a/includes/functions/_helpers-templates.php b/includes/functions/_helpers-templates.php
@@ -2786,7 +2786,7 @@ function fictioneer_render_skin_interface() {
 
     <template data-css-skin-target="template">
       <div class="custom-skin" data-css-skin-finder="skin-item">
-        <button type="button" class="custom-skin__toggle" data-action="click->css-skin#toggle">
+        <button type="button" class="custom-skin__toggle" data-action="click->css-skin#toggle" data-fictioneer-target="dcjProtected" disabled>
           <i class="fa-regular fa-circle off"></i>
           <i class="fa-solid fa-circle-dot on"></i>
         </button>
@@ -2797,7 +2797,7 @@ function fictioneer_render_skin_interface() {
           <span class="custom-skin__spacer"></span>
           <span class="custom-skin__author" data-css-skin-finder="author">&mdash;</span>
         </div>
-        <button type="button" class="custom-skin__delete" data-action="click->css-skin#delete"><i class="fa-solid fa-trash-can"></i></button>
+        <button type="button" class="custom-skin__delete" data-action="click->css-skin#delete" data-fictioneer-target="dcjProtected" disabled><i class="fa-solid fa-trash-can"></i></button>
       </div>
     </template>
 
@@ -2824,8 +2824,8 @@ function fictioneer_render_skin_interface() {
     </div>
 
     <div class="profile__actions custom-skin-actions">
-      <button type="button" class="button" data-action="click->css-skin#upload" data-disable-with="<?php esc_attr_e( "Uploading…", "fictioneer" ); ?>"><?php _e( "Sync Up", "fictioneer" ); ?></button>
-      <button type="button" class="button" data-action="click->css-skin#download" data-disable-with="<?php esc_attr_e( "Downloading…", "fictioneer" ); ?>"><?php _e( "Sync Down", "fictioneer" ); ?></button>
+      <button type="button" class="button" data-action="click->css-skin#upload" data-disable-with="<?php esc_attr_e( "Uploading…", "fictioneer" ); ?>" data-fictioneer-target="dcjProtected" disabled><?php _e( "Sync Up", "fictioneer" ); ?></button>
+      <button type="button" class="button" data-action="click->css-skin#download" data-disable-with="<?php esc_attr_e( "Downloading…", "fictioneer" ); ?>" data-fictioneer-target="dcjProtected" disabled><?php _e( "Sync Down", "fictioneer" ); ?></button>
       <div class="invisible custom-skin-action-status" data-css-skin-target="action-status-message"><span class="dashicons dashicons-saved"></span></div>
     </div>
 

diff --git a/js/application.min.js b/js/application.min.js
diff --git a/js/complete.min.js b/js/complete.min.js
diff --git a/partials/account/_danger-zone.php b/partials/account/_danger-zone.php
@@ -39,5 +39,5 @@
 <p class="profile__description"><?php _e( 'You can delete your account and associated user data with it. Submitted <em>content</em> such as comments and posts will remain under the “Deleted User” name unless you remove them <em>prior</em>. Be aware that once you delete your account, there is no going back.', 'fictioneer' ); ?></p>
 
 <div class="profile__actions">
-  <button id="button-delete-my-account" type="button" class="button _danger" data-nonce="<?php echo wp_create_nonce( "fictioneer_delete_account" ); ?>" data-id="<?php echo $current_user->ID; ?>" data-confirm="<?php echo $confirmation; ?>" data-warning="<?php echo esc_attr( $delete_account_prompt ); ?>"><?php _e( "Delete Account", "fictioneer" ); ?></button>
+  <button id="button-delete-my-account" type="button" class="button _danger" data-nonce="<?php echo wp_create_nonce( "fictioneer_delete_account" ); ?>" data-id="<?php echo $current_user->ID; ?>" data-confirm="<?php echo $confirmation; ?>" data-warning="<?php echo esc_attr( $delete_account_prompt ); ?>" data-fictioneer-target="dcjProtected" disabled><?php _e( "Delete Account", "fictioneer" ); ?></button>
 </div>
diff --git a/partials/account/_data.php b/partials/account/_data.php
@@ -130,7 +130,7 @@
               ?>
             </div>
           </div>
-          <button class="card__delete button-clear-comments" data-nonce="<?php echo wp_create_nonce( "fictioneer_clear_comments" ); ?>" data-confirm="<?php echo $confirmation; ?>" data-warning="<?php echo esc_attr( $delete_comments_prompt ); ?>"><i class="fa-solid fa-trash-can"></i></button>
+          <button class="card__delete button-clear-comments" data-nonce="<?php echo wp_create_nonce( "fictioneer_clear_comments" ); ?>" data-confirm="<?php echo $confirmation; ?>" data-warning="<?php echo esc_attr( $delete_comments_prompt ); ?>" data-fictioneer-target="dcjProtected" disabled><i class="fa-solid fa-trash-can"></i></button>
         </div>
       </li>
     <?php endif; ?>
@@ -152,7 +152,7 @@
               ?>
             </div>
           </div>
-          <button class="card__delete button-clear-comment-subscriptions" data-nonce="<?php echo wp_create_nonce( "fictioneer_clear_comment_subscriptions" ); ?>" data-confirm="<?php echo $confirmation; ?>" data-warning="<?php echo esc_attr( $delete_comment_subscriptions_prompt ); ?>"><i class="fa-solid fa-trash-can"></i></button>
+          <button class="card__delete button-clear-comment-subscriptions" data-nonce="<?php echo wp_create_nonce( "fictioneer_clear_comment_subscriptions" ); ?>" data-confirm="<?php echo $confirmation; ?>" data-warning="<?php echo esc_attr( $delete_comment_subscriptions_prompt ); ?>" data-fictioneer-target="dcjProtected" disabled><i class="fa-solid fa-trash-can"></i></button>
         </div>
       </li>
     <?php endif; ?>
@@ -183,7 +183,7 @@
             </div>
           </div>
           <?php if ( $follows_count > 0 ) : ?>
-            <button class="card__delete button-clear-follows" data-nonce="<?php echo wp_create_nonce( "fictioneer_clear_follows" ); ?>" data-confirm="<?php echo $confirmation; ?>" data-warning="<?php echo esc_attr( $delete_follows_prompt ); ?>"><i class="fa-solid fa-trash-can"></i></button>
+            <button class="card__delete button-clear-follows" data-nonce="<?php echo wp_create_nonce( "fictioneer_clear_follows" ); ?>" data-confirm="<?php echo $confirmation; ?>" data-warning="<?php echo esc_attr( $delete_follows_prompt ); ?>" data-fictioneer-target="dcjProtected" disabled><i class="fa-solid fa-trash-can"></i></button>
           <?php endif; ?>
         </div>
       </li>
@@ -215,7 +215,7 @@
             </div>
           </div>
           <?php if ( $reminders_count > 0 ) : ?>
-            <button class="card__delete button-clear-reminders" data-nonce="<?php echo wp_create_nonce( "fictioneer_clear_reminders" ); ?>" data-confirm="<?php echo $confirmation; ?>" data-warning="<?php echo esc_attr( $delete_reminders_prompt ); ?>"><i class="fa-solid fa-trash-can"></i></button>
+            <button class="card__delete button-clear-reminders" data-nonce="<?php echo wp_create_nonce( "fictioneer_clear_reminders" ); ?>" data-confirm="<?php echo $confirmation; ?>" data-warning="<?php echo esc_attr( $delete_reminders_prompt ); ?>" data-fictioneer-target="dcjProtected" disabled><i class="fa-solid fa-trash-can"></i></button>
           <?php endif; ?>
         </div>
       </li>
@@ -252,7 +252,7 @@
             </div>
           </div>
           <?php if ( $stories_count > 0 || $chapters_count > 0 ) : ?>
-            <button class="card__delete button-clear-checkmarks" data-nonce="<?php echo wp_create_nonce( "fictioneer_clear_checkmarks" ); ?>" data-confirm="<?php echo $confirmation; ?>" data-warning="<?php echo esc_attr( $delete_checkmarks_prompt ); ?>"><i class="fa-solid fa-trash-can"></i></button>
+            <button class="card__delete button-clear-checkmarks" data-nonce="<?php echo wp_create_nonce( "fictioneer_clear_checkmarks" ); ?>" data-confirm="<?php echo $confirmation; ?>" data-warning="<?php echo esc_attr( $delete_checkmarks_prompt ); ?>" data-fictioneer-target="dcjProtected" disabled><i class="fa-solid fa-trash-can"></i></button>
           <?php endif; ?>
         </div>
       </li>
@@ -275,7 +275,7 @@
               <?php _e( 'You have currently <strong>%s bookmark(s)</strong> set. Bookmarks are only processed in your browser.', 'fictioneer' ); ?>
             </div>
           </div>
-          <button class="card__delete button-clear-bookmarks" data-confirm="<?php echo $confirmation; ?>" data-warning="<?php echo esc_attr( $delete_bookmarks_prompt ); ?>"><i class="fa-solid fa-trash-can"></i></button>
+          <button class="card__delete button-clear-bookmarks" data-confirm="<?php echo $confirmation; ?>" data-warning="<?php echo esc_attr( $delete_bookmarks_prompt ); ?>" data-fictioneer-target="dcjProtected" disabled><i class="fa-solid fa-trash-can"></i></button>
         </div>
       </li>
     <?php endif; ?>

diff --git a/partials/account/_oauth.php b/partials/account/_oauth.php
@@ -111,6 +111,8 @@ class="profile__oauth-item-unset button-unset-oauth"
                 data-channel="<?php echo $provider[0]; ?>"
                 data-confirm="<?php echo $confirmation; ?>"
                 data-warning="<?php echo esc_attr( $unset_oauth_prompt ); ?>"
+                data-fictioneer-target="dcjProtected"
+                disabled
               ><?php fictioneer_icon( 'fa-xmark' ); ?></button>
             </div>
           <?php

diff --git a/partials/account/_profile.php b/partials/account/_profile.php
@@ -209,7 +209,7 @@ class="profile__input-field profile__email"
   <input name="user_id" type="hidden" value="<?php echo $current_user->ID; ?>">
 
   <div class="profile__actions">
-    <input name="submit" type="submit" value="<?php esc_attr_e( "Update Profile", "fictioneer" ); ?>" class="button">
+    <input name="submit" type="submit" value="<?php esc_attr_e( "Update Profile", "fictioneer" ); ?>" class="button" data-fictioneer-target="dcjProtected" disabled>
   </div>
 
 </form>
diff --git a/src/js/application.js b/src/js/application.js
@@ -128,7 +128,7 @@ window.FictioneerApp.Controllers = window.FictioneerApp.Controllers || {};
 
 application.register('fictioneer', class extends Stimulus.Controller {
   static get targets() {
-    return ["avatarWrapper", "modal", "mobileMenuToggle"]
+    return ["avatarWrapper", "modal", "mobileMenuToggle", "dcjProtected"]
   }
 
   static values = {
@@ -145,6 +145,7 @@ application.register('fictioneer', class extends Stimulus.Controller {
   userReady = false;
   lastModalToggle = null;
   currentModal = null;
+  dcjProtection = true;
 
   /**
    * Stimulus Controller initialize lifecycle callback.
@@ -172,6 +173,19 @@ application.register('fictioneer', class extends Stimulus.Controller {
       // Fire event
       document.dispatchEvent(event);
     }
+
+    if (this.hasDcjProtectedTarget) {
+      ['mousemove', 'touchstart', 'keydown'].forEach(event => {
+        window.addEventListener(event, this.liftProtection.bind(this), { once: true });
+      });
+    }
+  }
+
+  liftProtection() {
+    if (this.dcjProtection && this.hasDcjProtectedTarget) {
+      this.dcjProtectedTargets.forEach(element => element.disabled = false);
+      this.dcjProtection = false;
+    }
   }
 
   /**