From 65e42ceee390ac84a128a3db6486ca87226f4b8a Mon Sep 17 00:00:00 2001 From: Ken Johnson Date: Tue, 9 Dec 2025 14:59:07 +0000 Subject: [PATCH 01/10] Remove Travis CI badge and improve dropdown selection handling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. Removed broken Travis CI build status badge from README header 2. Enhanced dropdown selection on messages page: - Added explicit JavaScript change event handler - Added CSS to ensure proper text color and background - Added blur/focus to force visual update after selection - Added console logging for debugging This should resolve the issue where selected recipient names weren't displaying properly in the dropdown after selection. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- README.md | 2 +- app/views/messages/index.html.erb | 23 +++++++++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index fdb1d12..30fbfeb 100755 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# RailsGoat [![Build Status](https://api.travis-ci.org/OWASP/railsgoat.png?branch=master)](https://travis-ci.org/OWASP/railsgoat) +# RailsGoat RailsGoat is a vulnerable version of the Ruby on Rails Framework from versions 3 to 6. It includes vulnerabilities from the OWASP Top 10, as well as some "extras" that the initial project contributors felt worthwhile to share. This project is designed to educate both developers, as well as security professionals. diff --git a/app/views/messages/index.html.erb b/app/views/messages/index.html.erb index a239679..1a83d46 100644 --- a/app/views/messages/index.html.erb +++ b/app/views/messages/index.html.erb @@ -158,6 +158,14 @@ $(document).on('turbolinks:load', function() { makeActive(); }); +// Explicitly handle dropdown selection to ensure display updates +$('#message_receiver_id').on('change', function() { + var selectedText = $(this).find('option:selected').text(); + console.log('Selected recipient:', selectedText); + // Force a visual update + $(this).blur().focus(); +}); + // Form submission with AJAX $("#submit_button").click(function(event) { event.preventDefault(); @@ -306,4 +314,19 @@ $("#submit_button").click(function(event) { justify-content: center; } } + + /* Ensure dropdown displays selected value properly */ + #message_receiver_id { + color: #212529; + background-color: #fff; + } + + #message_receiver_id option { + color: #212529; + } + + #message_receiver_id:focus { + border-color: var(--rg-success); + box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.1); + } From ffac25bae38cd3061020645e012dd4c3a8e7a804 Mon Sep 17 00:00:00 2001 From: Ken Johnson Date: Tue, 9 Dec 2025 15:04:36 +0000 Subject: [PATCH 02/10] Further improve dropdown selection display with enhanced CSS and debugging MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added enhanced CSS with !important rules and explicit appearance properties to ensure the dropdown properly displays the selected recipient name. Changes: - Added explicit appearance properties for proper browser rendering - Added !important to color and background-color rules - Added styling for option:checked state - Enhanced JavaScript debugging with value and color logging - Added hide/show to force visual re-render The console logs now show: - Selected recipient name - Selected value - Current color CSS property This should help diagnose and fix the visual display issue. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/views/messages/index.html.erb | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/app/views/messages/index.html.erb b/app/views/messages/index.html.erb index 1a83d46..ef262a7 100644 --- a/app/views/messages/index.html.erb +++ b/app/views/messages/index.html.erb @@ -158,12 +158,18 @@ $(document).on('turbolinks:load', function() { makeActive(); }); -// Explicitly handle dropdown selection to ensure display updates +// Debug and force dropdown to display selected value $('#message_receiver_id').on('change', function() { - var selectedText = $(this).find('option:selected').text(); + var $select = $(this); + var selectedText = $select.find('option:selected').text(); + var selectedValue = $select.val(); + console.log('Selected recipient:', selectedText); - // Force a visual update - $(this).blur().focus(); + console.log('Selected value:', selectedValue); + console.log('Current display:', $select.css('color')); + + // Force re-render by temporarily hiding and showing + $select.hide().show(0); }); // Form submission with AJAX @@ -317,12 +323,21 @@ $("#submit_button").click(function(event) { /* Ensure dropdown displays selected value properly */ #message_receiver_id { - color: #212529; - background-color: #fff; + color: #212529 !important; + background-color: #fff !important; + -webkit-appearance: menulist !important; + -moz-appearance: menulist !important; + appearance: menulist !important; } #message_receiver_id option { - color: #212529; + color: #212529 !important; + background-color: #fff !important; + } + + #message_receiver_id option:checked { + color: #fff !important; + background-color: var(--rg-success) !important; } #message_receiver_id:focus { From b4a95e54a9a8b77b1688788998e34a591e9b1a7b Mon Sep 17 00:00:00 2001 From: Ken Johnson Date: Tue, 9 Dec 2025 15:05:06 +0000 Subject: [PATCH 03/10] Add comprehensive debugging for dropdown selection issue MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added extensive console logging to diagnose why selected value isn't displaying in the dropdown: - Select element's full text content - Selected index position - Total options count - Option text at selected index - Explicitly setting 'selected' attribute on options This will help identify whether the issue is with: - Option selection not being applied - Visual rendering despite correct selection - Bootstrap form-select interference 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/views/messages/index.html.erb | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/app/views/messages/index.html.erb b/app/views/messages/index.html.erb index ef262a7..96de30f 100644 --- a/app/views/messages/index.html.erb +++ b/app/views/messages/index.html.erb @@ -167,8 +167,18 @@ $('#message_receiver_id').on('change', function() { console.log('Selected recipient:', selectedText); console.log('Selected value:', selectedValue); console.log('Current display:', $select.css('color')); + console.log('Select element text:', $select.text()); + console.log('Selected index:', this.selectedIndex); + console.log('Options count:', $select.find('option').length); - // Force re-render by temporarily hiding and showing + // Log the actual option that should be selected + console.log('Option at selectedIndex:', $select.find('option')[this.selectedIndex].text); + + // Try forcing the selected attribute + $select.find('option').removeAttr('selected'); + $select.find('option:selected').attr('selected', 'selected'); + + // Force re-render $select.hide().show(0); }); From 632f8ca08e190b756c44a7f3ed9952176d050f58 Mon Sep 17 00:00:00 2001 From: Ken Johnson Date: Tue, 9 Dec 2025 15:30:39 +0000 Subject: [PATCH 04/10] Add comprehensive CSS debugging and forced visibility properties MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added extensive CSS properties to force text visibility: - Explicit text-indent: 0 - Overflow: visible - Font-size and line-height - Proper padding - Red border for visual debugging Added comprehensive JavaScript logging of computed styles: - Font size, color, background - Text indent, overflow - Display, visibility, opacity - Width and height This will help identify which CSS property is hiding the selected text. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/views/messages/index.html.erb | 31 ++++++++++++++++++++++++++----- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/app/views/messages/index.html.erb b/app/views/messages/index.html.erb index 96de30f..a287fc6 100644 --- a/app/views/messages/index.html.erb +++ b/app/views/messages/index.html.erb @@ -164,16 +164,26 @@ $('#message_receiver_id').on('change', function() { var selectedText = $select.find('option:selected').text(); var selectedValue = $select.val(); + console.log('=== DROPDOWN DEBUG ==='); console.log('Selected recipient:', selectedText); console.log('Selected value:', selectedValue); - console.log('Current display:', $select.css('color')); - console.log('Select element text:', $select.text()); console.log('Selected index:', this.selectedIndex); console.log('Options count:', $select.find('option').length); - - // Log the actual option that should be selected console.log('Option at selectedIndex:', $select.find('option')[this.selectedIndex].text); + // Check computed styles that might hide text + var computedStyle = window.getComputedStyle(this); + console.log('Font size:', computedStyle.fontSize); + console.log('Color:', computedStyle.color); + console.log('Background:', computedStyle.backgroundColor); + console.log('Text indent:', computedStyle.textIndent); + console.log('Overflow:', computedStyle.overflow); + console.log('Display:', computedStyle.display); + console.log('Visibility:', computedStyle.visibility); + console.log('Opacity:', computedStyle.opacity); + console.log('Width:', computedStyle.width); + console.log('Height:', computedStyle.height); + // Try forcing the selected attribute $select.find('option').removeAttr('selected'); $select.find('option:selected').attr('selected', 'selected'); @@ -331,13 +341,19 @@ $("#submit_button").click(function(event) { } } - /* Ensure dropdown displays selected value properly */ + /* Force dropdown to display selected value */ #message_receiver_id { color: #212529 !important; background-color: #fff !important; -webkit-appearance: menulist !important; -moz-appearance: menulist !important; appearance: menulist !important; + text-indent: 0 !important; + text-overflow: clip !important; + overflow: visible !important; + font-size: 1rem !important; + line-height: 1.5 !important; + padding: 0.5rem 2.25rem 0.5rem 0.75rem !important; } #message_receiver_id option { @@ -354,4 +370,9 @@ $("#submit_button").click(function(event) { border-color: var(--rg-success); box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.1); } + + /* Debug: Add a colored border to see the element boundaries */ + #message_receiver_id { + border: 2px solid red !important; + } From a9335952a57915e14a7d7cb81e9bdcbe881cd416 Mon Sep 17 00:00:00 2001 From: Ken Johnson Date: Tue, 9 Dec 2025 15:33:25 +0000 Subject: [PATCH 05/10] Change dropdown from form-select to form-control class MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bootstrap 5's form-select class may have rendering issues. Switched to form-control which has simpler styling and should display the selected text properly. Also explicitly added ID attribute to ensure JavaScript targets the correct element. Added additional debugging for: - Font family - Transform - Position - Z-index - Padding - Inner text/HTML of selected option 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/views/messages/index.html.erb | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/app/views/messages/index.html.erb b/app/views/messages/index.html.erb index a287fc6..8a81339 100644 --- a/app/views/messages/index.html.erb +++ b/app/views/messages/index.html.erb @@ -109,7 +109,7 @@ <%= f.select(:receiver_id, options_from_collection_for_select(User.all, :id, :full_name), { prompt: "Select a recipient..." }, - { class: "form-select form-select-lg" }) %> + { class: "form-control form-control-lg", id: "message_receiver_id" }) %> Select message recipient @@ -174,6 +174,7 @@ $('#message_receiver_id').on('change', function() { // Check computed styles that might hide text var computedStyle = window.getComputedStyle(this); console.log('Font size:', computedStyle.fontSize); + console.log('Font family:', computedStyle.fontFamily); console.log('Color:', computedStyle.color); console.log('Background:', computedStyle.backgroundColor); console.log('Text indent:', computedStyle.textIndent); @@ -183,6 +184,15 @@ $('#message_receiver_id').on('change', function() { console.log('Opacity:', computedStyle.opacity); console.log('Width:', computedStyle.width); console.log('Height:', computedStyle.height); + console.log('Transform:', computedStyle.transform); + console.log('Position:', computedStyle.position); + console.log('Z-index:', computedStyle.zIndex); + console.log('Padding:', computedStyle.padding); + + // Check if there's actually content + console.log('Inner text:', this.options[this.selectedIndex].text); + console.log('Inner HTML:', this.options[this.selectedIndex].innerHTML); + console.log('Display value property:', this.value); // Try forcing the selected attribute $select.find('option').removeAttr('selected'); From 9bc03f67afd62bc107cb336cd04ea17c6d6d771b Mon Sep 17 00:00:00 2001 From: Ken Johnson Date: Tue, 9 Dec 2025 15:35:26 +0000 Subject: [PATCH 06/10] Remove all custom dropdown JavaScript and excessive CSS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The custom JavaScript was actually interfering with normal browser behavior. The hide().show() and attribute manipulation was causing the dropdown to reset visually after selection. Changes: - Removed all custom dropdown change event handlers - Removed all debugging console logs - Removed excessive !important CSS rules - Removed debug red border - Kept only the simple focus styling Now using native browser select behavior with Bootstrap form-control styling, which should work correctly out of the box. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/views/messages/index.html.erb | 75 +------------------------------ 1 file changed, 1 insertion(+), 74 deletions(-) diff --git a/app/views/messages/index.html.erb b/app/views/messages/index.html.erb index 8a81339..76c6876 100644 --- a/app/views/messages/index.html.erb +++ b/app/views/messages/index.html.erb @@ -158,50 +158,6 @@ $(document).on('turbolinks:load', function() { makeActive(); }); -// Debug and force dropdown to display selected value -$('#message_receiver_id').on('change', function() { - var $select = $(this); - var selectedText = $select.find('option:selected').text(); - var selectedValue = $select.val(); - - console.log('=== DROPDOWN DEBUG ==='); - console.log('Selected recipient:', selectedText); - console.log('Selected value:', selectedValue); - console.log('Selected index:', this.selectedIndex); - console.log('Options count:', $select.find('option').length); - console.log('Option at selectedIndex:', $select.find('option')[this.selectedIndex].text); - - // Check computed styles that might hide text - var computedStyle = window.getComputedStyle(this); - console.log('Font size:', computedStyle.fontSize); - console.log('Font family:', computedStyle.fontFamily); - console.log('Color:', computedStyle.color); - console.log('Background:', computedStyle.backgroundColor); - console.log('Text indent:', computedStyle.textIndent); - console.log('Overflow:', computedStyle.overflow); - console.log('Display:', computedStyle.display); - console.log('Visibility:', computedStyle.visibility); - console.log('Opacity:', computedStyle.opacity); - console.log('Width:', computedStyle.width); - console.log('Height:', computedStyle.height); - console.log('Transform:', computedStyle.transform); - console.log('Position:', computedStyle.position); - console.log('Z-index:', computedStyle.zIndex); - console.log('Padding:', computedStyle.padding); - - // Check if there's actually content - console.log('Inner text:', this.options[this.selectedIndex].text); - console.log('Inner HTML:', this.options[this.selectedIndex].innerHTML); - console.log('Display value property:', this.value); - - // Try forcing the selected attribute - $select.find('option').removeAttr('selected'); - $select.find('option:selected').attr('selected', 'selected'); - - // Force re-render - $select.hide().show(0); -}); - // Form submission with AJAX $("#submit_button").click(function(event) { event.preventDefault(); @@ -351,38 +307,9 @@ $("#submit_button").click(function(event) { } } - /* Force dropdown to display selected value */ - #message_receiver_id { - color: #212529 !important; - background-color: #fff !important; - -webkit-appearance: menulist !important; - -moz-appearance: menulist !important; - appearance: menulist !important; - text-indent: 0 !important; - text-overflow: clip !important; - overflow: visible !important; - font-size: 1rem !important; - line-height: 1.5 !important; - padding: 0.5rem 2.25rem 0.5rem 0.75rem !important; - } - - #message_receiver_id option { - color: #212529 !important; - background-color: #fff !important; - } - - #message_receiver_id option:checked { - color: #fff !important; - background-color: var(--rg-success) !important; - } - + /* Ensure dropdown has proper focus styling */ #message_receiver_id:focus { border-color: var(--rg-success); box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.1); } - - /* Debug: Add a colored border to see the element boundaries */ - #message_receiver_id { - border: 2px solid red !important; - } From 89cdf5f1d7db116351a48b559ba0907580fe87df Mon Sep 17 00:00:00 2001 From: Ken Johnson Date: Tue, 9 Dec 2025 16:01:00 +0000 Subject: [PATCH 07/10] Fix dropdown text being cut off at the bottom MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added CSS to ensure proper height and padding: - min-height: 48px (provides enough vertical space) - line-height: 1.5 (proper text spacing) - padding: 0.75rem (matches Bootstrap form-control-lg) This prevents the selected recipient name from being cut off at the bottom of the dropdown field. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/views/messages/index.html.erb | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/views/messages/index.html.erb b/app/views/messages/index.html.erb index 76c6876..bc47e78 100644 --- a/app/views/messages/index.html.erb +++ b/app/views/messages/index.html.erb @@ -307,6 +307,13 @@ $("#submit_button").click(function(event) { } } + /* Fix dropdown height and padding to prevent text cutoff */ + #message_receiver_id { + min-height: 48px; + line-height: 1.5; + padding: 0.75rem 0.75rem; + } + /* Ensure dropdown has proper focus styling */ #message_receiver_id:focus { border-color: var(--rg-success); From da1ce63e59496cd19e886601ed940f83532d3a05 Mon Sep 17 00:00:00 2001 From: Ken Johnson Date: Tue, 9 Dec 2025 16:47:54 +0000 Subject: [PATCH 08/10] Increase dropdown height and padding to fully prevent text cutoff MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Increased vertical spacing to ensure recipient names display fully: - min-height: 48px → 52px - line-height: 1.5 → 1.6 - padding: 0.75rem → 0.85rem - Added vertical-align: middle This provides more breathing room for text to prevent any cutoff at the bottom of the dropdown field. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/views/messages/index.html.erb | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/views/messages/index.html.erb b/app/views/messages/index.html.erb index bc47e78..f774b9b 100644 --- a/app/views/messages/index.html.erb +++ b/app/views/messages/index.html.erb @@ -309,9 +309,10 @@ $("#submit_button").click(function(event) { /* Fix dropdown height and padding to prevent text cutoff */ #message_receiver_id { - min-height: 48px; - line-height: 1.5; - padding: 0.75rem 0.75rem; + min-height: 52px; + line-height: 1.6; + padding: 0.85rem 0.75rem; + vertical-align: middle; } /* Ensure dropdown has proper focus styling */ From 5f8c24b2855be81ca91ab52c5cc96a45b771d943 Mon Sep 17 00:00:00 2001 From: Ken Johnson Date: Tue, 9 Dec 2025 16:49:51 +0000 Subject: [PATCH 09/10] Add !important rules to ensure dropdown height CSS applies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added !important to all dropdown height/padding CSS rules to ensure they override any conflicting Bootstrap or global styles: - min-height: 52px !important - line-height: 1.6 !important - padding: 0.85rem 0.75rem !important - vertical-align: middle !important - box-sizing: border-box !important This forces the styles to apply and prevent text cutoff. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/views/messages/index.html.erb | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/views/messages/index.html.erb b/app/views/messages/index.html.erb index f774b9b..5097c9b 100644 --- a/app/views/messages/index.html.erb +++ b/app/views/messages/index.html.erb @@ -309,10 +309,11 @@ $("#submit_button").click(function(event) { /* Fix dropdown height and padding to prevent text cutoff */ #message_receiver_id { - min-height: 52px; - line-height: 1.6; - padding: 0.85rem 0.75rem; - vertical-align: middle; + min-height: 52px !important; + line-height: 1.6 !important; + padding: 0.85rem 0.75rem !important; + vertical-align: middle !important; + box-sizing: border-box !important; } /* Ensure dropdown has proper focus styling */ From aefbe201d3d9b5b44defc2447a03c59588afec44 Mon Sep 17 00:00:00 2001 From: Ken Johnson Date: Tue, 9 Dec 2025 16:59:26 +0000 Subject: [PATCH 10/10] Fix dropdown text cutoff by reducing padding to optimal value MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reduced padding from 0.85rem to 0.5rem and adjusted line-height from 1.6 to 1.5 to prevent text from being cut off at the bottom of the dropdown selector. Also added option styling to ensure consistent spacing throughout the dropdown. The excessive padding was causing the text to be vertically centered in a way that cut off descenders. The new values provide clean text rendering without cutoff. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/views/messages/index.html.erb | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/app/views/messages/index.html.erb b/app/views/messages/index.html.erb index 5097c9b..4baff6e 100644 --- a/app/views/messages/index.html.erb +++ b/app/views/messages/index.html.erb @@ -309,13 +309,19 @@ $("#submit_button").click(function(event) { /* Fix dropdown height and padding to prevent text cutoff */ #message_receiver_id { - min-height: 52px !important; - line-height: 1.6 !important; - padding: 0.85rem 0.75rem !important; + min-height: 48px !important; + line-height: 1.5 !important; + padding: 0.5rem 0.75rem !important; vertical-align: middle !important; box-sizing: border-box !important; } + /* Ensure dropdown options have proper spacing too */ + #message_receiver_id option { + padding: 0.5rem 0.75rem !important; + line-height: 1.5 !important; + } + /* Ensure dropdown has proper focus styling */ #message_receiver_id:focus { border-color: var(--rg-success);