Fix CSP Error

Getting rid of inline onclick calls and registering the handler in the
primary script ensure securty (XSS).

app.py

@@ -461,17 +461,22 @@ def admin_upload():
         file_path = os.path.join(app.config["UPLOAD_FOLDER"], filename)
         file.save(file_path)
 
-        # Extract EXIF data
+        # Extract EXIF data with error handling
-        exif = None
+        exif = {}
         exifraw = None
-        with Image.open(file_path) as img:
+        width = height = 0
-            exifraw = img.info["exif"]
+        try:
-            width, height = img.size
+            with Image.open(file_path) as img:
-            exif = {
+                width, height = img.size
-                ExifTags.TAGS[k]: v
+                if hasattr(img, '_getexif') and img._getexif() is not None:
-                for k, v in img._getexif().items()
+                    exifraw = img.info.get("exif")
-                if k in ExifTags.TAGS
+                    exif = {
-            }
+                        ExifTags.TAGS[k]: v
+                        for k, v in img._getexif().items()
+                        if k in ExifTags.TAGS
+                    }
+        except Exception as e:
+            logger.warning(f"Error reading EXIF data for {filename}: {str(e)}")
 
         # Generate a unique key for the image
         unique_key = hashlib.sha256(
@@ -489,25 +494,25 @@ def admin_upload():
         # Generate thumbnails
         generate_thumbnails(filename)
 
-        # Get image dimensions
+        # Handle exposure time with error handling
-        with Image.open(file_path) as img:
+        try:
-            width, height = img.size
+            exposure_time = exif.get("ExposureTime", 0)
+            if isinstance(exposure_time, tuple):
+                exposure_fraction = f"{exposure_time[0]}/{exposure_time[1]}"
+            else:
+                exposure_fraction = f"1/{int(1/float(exposure_time))}" if exposure_time else "0"
+        except (TypeError, ZeroDivisionError):
+            exposure_fraction = "0"
 
-        exposure_time = exif["ExposureTime"]
+        # Create database entry with safe defaults
-        if isinstance(exposure_time, tuple):
-            exposure_fraction = f"{exposure_time[0]}/{exposure_time[1]}"
-        else:
-            exposure_fraction = f"1/{int(1/float(exposure_time))}"
-
-        # Create database entry
         db_session = DBSession()
         new_photo = Photo(
             input_filename=filename,
             thumbnail_filename=f"{os.path.splitext(filename)[0]}/256_{filename}",
             focal_length=str(
-                exif.get("FocalLengthIn35mmFilm", exif.get("FocalLength", ""))
+                exif.get("FocalLengthIn35mmFilm", exif.get("FocalLength", "0"))
             ),
-            aperture=str(exif.get("FNumber", "")),
+            aperture=str(exif.get("FNumber", "0")),
             shutter_speed=exposure_fraction,
             date_taken=datetime.strptime(
                 str(exif.get("DateTime", "1970:01:01 00:00:00")), "%Y:%m:%d %H:%M:%S"

templates/admin.html

@@ -203,8 +203,8 @@
                     <td class="editable" data-field="iso">{{ photo.iso }}</td>
                     <td>{{ photo.width }}x{{ photo.height }}</td>
                     <td>
-                        <button onclick="saveChanges(this)">Save</button>
+                        <button id="save-btn">Save</button>
-                        <button onclick="deletePhoto(this)" class="delete-btn">Delete</button>
+                        <button class="delete-btn" id="delete-btn">Delete</button>
                     </td>
                 </tr>
                 {% endfor %}
@@ -241,8 +241,11 @@
                             <input type="text" id="about.location" name="about.location" value="{{ config.about.location }}">
                         </div>
                         <div class="form-group">
-                            <label for="about.profile_image">Profile Image Path:</label>
+                            <label for="about.profile_image">Profile Image:</label>
-                            <input type="text" id="about.profile_image" name="about.profile_image" value="{{ config.about.profile_image }}">
+                            <div style="display: flex; align-items: center; gap: 1rem;">
+                                <img id="profile-preview" src="/static/profile.jpeg" alt="Profile" style="width: 100px; height: 100px; object-fit: cover; border-radius: 50%;">
+                                <input type="file" id="profile_image_upload" accept="image/jpeg,image/png" style="flex: 1;">
+                            </div>
                         </div>
                         <div class="form-group">
                             <label for="about.bio">Bio (Markdown):</label>
@@ -335,11 +338,38 @@
             }
         }
 
+        document.getElementById('delete-btn').addEventListener('click', deletePhoto);
+        document.getElementById('save-btn').addEventListener('click', saveChanges);
+
+        document.getElementById('profile_image_upload').addEventListener('change', async (e) => {
+            const file = e.target.files[0];
+            if (!file) return;
+
+            const formData = new FormData();
+            formData.append('profile_image', file);
+
+            try {
+                const response = await fetch('/admin/upload_profile', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                const result = await response.json();
+                if (result.success) {
+                    document.getElementById('profile-preview').src = '/static/profile.jpeg?' + new Date().getTime();
+                } else {
+                    alert('Error uploading profile image: ' + result.error);
+                }
+            } catch (error) {
+                alert('Error uploading profile image: ' + error);
+            }
+        });
+
         document.getElementById('configForm').addEventListener('submit', async (e) => {
             e.preventDefault();
             
             const formData = {};
-            const inputs = e.target.querySelectorAll('input, textarea');
+            const inputs = e.target.querySelectorAll('input:not([type="file"]), textarea');
             
             inputs.forEach(input => {
                 formData[input.name] = input.value;