diff --git a/cps/static/js/libs/bar-ui.js b/cps/static/js/libs/bar-ui.js
index e0d4b85c..f55d66d9 100644
--- a/cps/static/js/libs/bar-ui.js
+++ b/cps/static/js/libs/bar-ui.js
@@ -177,6 +177,9 @@
 
         whileplaying: function () {
 
+          // get csrf_token
+          let csrf_token = $("input[name='csrf_token']").val();
+
 
           //This sends a bookmark update to calibreweb every 30 seconds.
           if (this.progressBuffer == undefined) {
@@ -187,7 +190,10 @@
 
             $.ajax(calibre.bookmarkUrl, {
               method: "post",
-              data: { bookmark: this.position }
+              data: {
+                csrf_token: csrf_token,
+                bookmark: this.position
+              }
             }).fail(function (xhr, status, error) {
               console.error(error);
             });
@@ -313,14 +319,14 @@
         },
 
         onstop: function () {
-          
+
           $.ajax(calibre.bookmarkUrl, {
             method: "post",
             data: { bookmark: this.position }
           }).fail(function (xhr, status, error) {
             console.error(error);
           });
-        
+
           utils.css.remove(dom.o, 'playing');
 
         },
diff --git a/cps/templates/listenmp3.html b/cps/templates/listenmp3.html
index 2067bf38..43c0b93d 100644
--- a/cps/templates/listenmp3.html
+++ b/cps/templates/listenmp3.html
@@ -114,6 +114,8 @@
 
 </div>
 
+<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+
 <script>
 soundManager.setup({
   useHTML5Audio: true,
@@ -137,6 +139,7 @@ window.calibre = {
         bookmarkUrl: "{{ url_for('web.set_bookmark', book_id=mp3file, book_format=audioformat.upper()) }}",
         bookmark: "{{ bookmark.bookmark_key if bookmark != None }}",
         useBookmarks: "{{ g.user.is_authenticated | tojson }}"
+
             };
 </script>
 </body>