subflag-rails 0.6.2 → 0.6.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4da7fbf4afd2e81121d78a29b650556e3c70ae35b80bee1f3edc484b25e67151
-  data.tar.gz: 2a8bf9240dfc0875fbb6bf7e3dde7ea608c606125aaeb00affbf84b1cf6e9851
+  metadata.gz: f82250e7b81df25f2937196fdb48473b88fbdf8be78b6ae7179f22cd3bc4c458
+  data.tar.gz: 8af66017baa6b4400ce4f8e6c1cff4d808bbb6ebe5957da072c4b94e46b2f88e
 SHA512:
-  metadata.gz: a9d2171cb2ef2a919701dfc5a4e2a89bd64f498bca92dc5a77779982c5357f427f8894bd368250c94c6ff26db2b67ccc4f9f9aa787c5bccd9a4b304946413c50
-  data.tar.gz: 9476c50e529d665d30f5bda1355f5a21c4009756124f3ddaf1efb5e16ccae668b572c0e30b310a438f8a6cf3a0c34040e1992304370d428e29a71e1ec027fe0c
+  metadata.gz: 9e8758f5bcc56db3f8bf6c5af89975ea348d171cc5812e05e4daaa0c0b975776ec49d5e7ea4935d469aa6e7fb99ac1887e2903147795f018508b5bd212d28d70
+  data.tar.gz: '087753e17e0234bab20f792ae92c120025d6aa780ab0dee3b42aec8aaea652db43f3e68a3175f7f640d87cba5f51c31f9ae6e0feba835984aae5d478859b67ca'

data/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.6.3] - 2026-01-22
+
+### Fixed
+
+- **Full CSP compliance for Admin UI**: Remove all inline event handlers
+  - Use event delegation pattern with `data-action` attributes
+  - Works with strict `script-src 'nonce-xxx'` policies (no `'unsafe-inline'` required)
+
 ## [0.6.2] - 2026-01-22
 
 ### Fixed

data/app/views/subflag/rails/flags/edit.html.erb

@@ -8,7 +8,7 @@
   <%= render "form", flag: @flag %>
 </div>
 
-<div class="card">
+<div class="card" id="targeting-card">
   <h2>Targeting Rules</h2>
   <p class="text-muted mb-10">Rules are evaluated in order. First match wins. If no rules match, the default value is used.</p>
 
@@ -16,12 +16,12 @@
     <!-- Rules rendered by JS -->
   </div>
 
-  <button type="button" class="btn mt-10" onclick="addRule()">+ Add Rule</button>
+  <button type="button" class="btn mt-10" data-action="add-rule">+ Add Rule</button>
 
   <input type="hidden" name="targeting_rules_json" id="targeting-rules-json" value="<%= @flag.targeting_rules.to_json %>">
 
   <div class="mt-10">
-    <button type="button" class="btn btn-primary" onclick="saveRules()">Save Rules</button>
+    <button type="button" class="btn btn-primary" data-action="save-rules">Save Rules</button>
   </div>
 </div>
 
@@ -86,6 +86,66 @@
       }
     }
     renderRules();
+    setupEventDelegation();
+  }
+
+  function setupEventDelegation() {
+    const container = document.getElementById("targeting-card");
+
+    // Handle clicks (buttons)
+    container.addEventListener("click", function(e) {
+      const target = e.target.closest("[data-action]");
+      if (!target) return;
+
+      const action = target.dataset.action;
+      const ruleIndex = parseInt(target.dataset.ruleIndex, 10);
+      const condIndex = parseInt(target.dataset.condIndex, 10);
+
+      switch (action) {
+        case "add-rule":
+          addRule();
+          break;
+        case "remove-rule":
+          removeRule(ruleIndex);
+          break;
+        case "add-condition":
+          addCondition(ruleIndex);
+          break;
+        case "remove-condition":
+          removeCondition(ruleIndex, condIndex);
+          break;
+        case "save-rules":
+          saveRules();
+          break;
+      }
+    });
+
+    // Handle input changes
+    container.addEventListener("change", function(e) {
+      const target = e.target;
+      const action = target.dataset.action;
+      if (!action) return;
+
+      const ruleIndex = parseInt(target.dataset.ruleIndex, 10);
+      const condIndex = parseInt(target.dataset.condIndex, 10);
+      const field = target.dataset.field;
+      const value = target.value;
+
+      switch (action) {
+        case "update-rule-value":
+          updateRuleValue(ruleIndex, value);
+          break;
+        case "update-rule-percentage":
+          updateRulePercentage(ruleIndex, value);
+          break;
+        case "update-logic":
+          updateLogic(ruleIndex, value);
+          break;
+        case "update-condition":
+          updateCondition(ruleIndex, condIndex, field, value);
+          break;
+      }
+    });
   }
 
   function renderRules() {
@@ -103,26 +163,26 @@
       <div class="rule" data-rule-index="${ruleIndex}">
         <div class="rule-header">
           <strong>Rule ${ruleIndex + 1}</strong>
-          <button type="button" class="remove-btn" onclick="removeRule(${ruleIndex})">&times;</button>
+          <button type="button" class="remove-btn" data-action="remove-rule" data-rule-index="${ruleIndex}">&times;</button>
         </div>
         <div class="rule-value">
           <label>Return value:</label>
-          <input type="text" value="${escapeHtml(rule.value || '')}" onchange="updateRuleValue(${ruleIndex}, this.value)" placeholder="value when matched">
+          <input type="text" value="${escapeHtml(rule.value || '')}" data-action="update-rule-value" data-rule-index="${ruleIndex}" placeholder="value when matched">
         </div>
         <div class="rule-percentage">
           <label>Percentage rollout:</label>
-          <input type="number" min="0" max="100" value="${percentage ?? ''}" onchange="updateRulePercentage(${ruleIndex}, this.value)" placeholder="">
+          <input type="number" min="0" max="100" value="${percentage ?? ''}" data-action="update-rule-percentage" data-rule-index="${ruleIndex}" placeholder="">
           <span>% of users</span>
           <small style="color: #666;">(leave empty to match all)</small>
         </div>
         <div class="rule-logic" ${!hasConditions && percentage ? 'style="opacity: 0.5;"' : ''}>
-          <label><input type="radio" name="logic-${ruleIndex}" value="AND" ${logicType === 'AND' ? 'checked' : ''} onchange="updateLogic(${ruleIndex}, 'AND')"> ALL match</label>
-          <label><input type="radio" name="logic-${ruleIndex}" value="OR" ${logicType === 'OR' ? 'checked' : ''} onchange="updateLogic(${ruleIndex}, 'OR')"> ANY match</label>
+          <label><input type="radio" name="logic-${ruleIndex}" value="AND" ${logicType === 'AND' ? 'checked' : ''} data-action="update-logic" data-rule-index="${ruleIndex}"> ALL match</label>
+          <label><input type="radio" name="logic-${ruleIndex}" value="OR" ${logicType === 'OR' ? 'checked' : ''} data-action="update-logic" data-rule-index="${ruleIndex}"> ANY match</label>
         </div>
         <div class="conditions" id="conditions-${ruleIndex}">
           ${conditions.map((c, cIndex) => renderCondition(c, ruleIndex, cIndex)).join("")}
         </div>
-        <button type="button" class="btn btn-sm" onclick="addCondition(${ruleIndex})">+ Add Condition</button>
+        <button type="button" class="btn btn-sm" data-action="add-condition" data-rule-index="${ruleIndex}">+ Add Condition</button>
         <small style="display: block; margin-top: 5px; color: #666;">${hasConditions && percentage ? 'User must match conditions AND be in percentage' : ''}</small>
       </div>
     `;
@@ -137,12 +197,12 @@
 
     return `
       <div class="condition">
-        <input type="text" placeholder="attribute" value="${escapeHtml(condition.attribute || '')}" onchange="updateCondition(${ruleIndex}, ${condIndex}, 'attribute', this.value)">
-        <select onchange="updateCondition(${ruleIndex}, ${condIndex}, 'operator', this.value)">
+        <input type="text" placeholder="attribute" value="${escapeHtml(condition.attribute || '')}" data-action="update-condition" data-rule-index="${ruleIndex}" data-cond-index="${condIndex}" data-field="attribute">
+        <select data-action="update-condition" data-rule-index="${ruleIndex}" data-cond-index="${condIndex}" data-field="operator">
           ${operatorOptions}
         </select>
-        <input type="text" placeholder="value" value="${escapeHtml(valueDisplay)}" onchange="updateCondition(${ruleIndex}, ${condIndex}, 'value', this.value)">
-        <button type="button" class="remove-btn" onclick="removeCondition(${ruleIndex}, ${condIndex})">&times;</button>
+        <input type="text" placeholder="value" value="${escapeHtml(valueDisplay)}" data-action="update-condition" data-rule-index="${ruleIndex}" data-cond-index="${condIndex}" data-field="value">
+        <button type="button" class="remove-btn" data-action="remove-condition" data-rule-index="${ruleIndex}" data-cond-index="${condIndex}">&times;</button>
       </div>
     `;
   }

data/lib/subflag/rails/version.rb

@@ -2,6 +2,6 @@
 
 module Subflag
   module Rails
-    VERSION = "0.6.2"
+    VERSION = "0.6.3"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: subflag-rails
 version: !ruby/object:Gem::Version
-  version: 0.6.2
+  version: 0.6.3
 platform: ruby
 authors:
 - Subflag