Randomize form field ids to thwart browser memory and help with embedding iD (close #6444)

modules/ui/commit.js

@@ -11,7 +11,7 @@ import { uiChangesetEditor } from './changeset_editor';
 import { uiSectionChanges } from './sections/changes';
 import { uiCommitWarnings } from './commit_warnings';
 import { uiSectionRawTagEditor } from './sections/raw_tag_editor';
-import { utilArrayGroupBy, utilRebind } from '../util';
+import { utilArrayGroupBy, utilRebind, utilUniqueDomId } from '../util';
 import { utilDetect } from '../util/detect';
 
 
@@ -311,14 +311,16 @@ export function uiCommit(context) {
             .append('div')
             .attr('class', 'request-review');
 
+        var id = utilUniqueDomId('commit-input-request-review');
+
         var labelEnter = requestReviewEnter
             .append('label')
-            .attr('for', 'commit-input-request-review');
+            .attr('for', id);
 
         labelEnter
             .append('input')
             .attr('type', 'checkbox')
-            .attr('id', 'commit-input-request-review');
+            .attr('id', id);
 
         labelEnter
             .append('span')

modules/ui/field.js

@@ -10,7 +10,7 @@ import { geoExtent } from '../geo/extent';
 import { uiFieldHelp } from './field_help';
 import { uiFields } from './fields';
 import { uiTagReference } from './tag_reference';
-import { utilRebind } from '../util';
+import { utilRebind, utilUniqueDomId } from '../util';
 
 
 export function uiField(context, presetField, entityIDs, options) {
@@ -24,6 +24,7 @@ export function uiField(context, presetField, entityIDs, options) {
 
     var dispatch = d3_dispatch('change', 'revert');
     var field = Object.assign({}, presetField);   // shallow copy
+    field.domId = utilUniqueDomId('form-field-' + field.safeid);
     var _show = options.show;
     var _state = '';
     var _tags = {};
@@ -123,7 +124,7 @@ export function uiField(context, presetField, entityIDs, options) {
             var labelEnter = enter
                 .append('label')
                 .attr('class', 'field-label')
-                .attr('for', function(d) { return 'preset-input-' + d.safeid; });
+                .attr('for', function(d) { return d.domId; });
 
             var textEnter = labelEnter
                 .append('span')

modules/ui/fields/check.js

@@ -104,7 +104,7 @@ export function uiFieldCheck(field, context) {
             .append('input')
             .property('indeterminate', field.type !== 'defaultCheck')
             .attr('type', 'checkbox')
-            .attr('id', 'preset-input-' + field.safeid);
+            .attr('id', field.domId);
 
         enter
             .append('span')
@@ -114,7 +114,6 @@ export function uiFieldCheck(field, context) {
         if (field.type === 'onewayCheck') {
             enter
                 .append('a')
-                .attr('id', 'preset-input-' + field.safeid + '-reverser')
                 .attr('class', 'reverser button' + (reverserHidden() ? ' hide' : ''))
                 .attr('href', '#')
                 .append('span')

modules/ui/fields/combo.js

@@ -381,7 +381,7 @@ export function uiFieldCombo(field, context) {
         input = input.enter()
             .append('input')
             .attr('type', 'text')
-            .attr('id', 'preset-input-' + field.safeid)
+            .attr('id', field.domId)
             .attr('maxlength', context.maxCharsForTagValue())
             .call(utilNoAuto)
             .call(initCombo, selection)

modules/ui/fields/input.js

@@ -52,7 +52,7 @@ export function uiFieldText(field, context) {
         input = input.enter()
             .append('input')
             .attr('type', field.type === 'identifier' ? 'text' : field.type)
-            .attr('id', fieldID)
+            .attr('id', field.domId)
             .attr('maxlength', context.maxCharsForTagValue())
             .classed(field.type, true)
             .call(utilNoAuto)
@@ -71,7 +71,7 @@ export function uiFieldText(field, context) {
             var countryCode = extent && countryCoder.iso1A2Code(extent.center());
             var format = countryCode && _phoneFormats[countryCode.toLowerCase()];
             if (format) {
-                wrap.selectAll('#' + fieldID)
+                wrap.selectAll('#' + field.domId)
                     .attr('placeholder', format);
             }
 

modules/ui/fields/localized.js

@@ -167,7 +167,7 @@ export function uiFieldLocalized(field, context) {
         input = input.enter()
             .append('input')
             .attr('type', 'text')
-            .attr('id', 'preset-input-' + field.safeid)
+            .attr('id', field.domId)
             .attr('class', 'localized-main')
             .attr('maxlength', context.maxCharsForTagValue())
             .call(utilNoAuto)

modules/ui/fields/maxspeed.js

@@ -35,13 +35,13 @@ export function uiFieldMaxspeed(field, context) {
             .merge(wrap);
 
 
-        input = wrap.selectAll('#preset-input-' + field.safeid)
+        input = wrap.selectAll('#' + field.domId)
             .data([0]);
 
         input = input.enter()
             .append('input')
             .attr('type', 'text')
-            .attr('id', 'preset-input-' + field.safeid)
+            .attr('id', field.domId)
             .attr('maxlength', context.maxCharsForTagValue() - 4)
             .call(utilNoAuto)
             .call(speedCombo)

modules/ui/fields/textarea.js

@@ -29,7 +29,7 @@ export function uiFieldTextarea(field, context) {
 
         input = input.enter()
             .append('textarea')
-            .attr('id', 'preset-input-' + field.safeid)
+            .attr('id', field.domId)
             .attr('maxlength', context.maxCharsForTagValue())
             .call(utilNoAuto)
             .on('input', change(true))

modules/ui/fields/wikipedia.js

@@ -113,7 +113,7 @@ export function uiFieldWikipedia(field, context) {
       .append('input')
       .attr('type', 'text')
       .attr('class', 'wiki-title')
-      .attr('id', `preset-input-${field.safeid}`)
+      .attr('id', field.domId)
       .attr('maxlength', context.maxCharsForTagValue() - 4)
       .call(utilNoAuto)
       .call(titleCombo)

modules/util/index.js

@@ -47,4 +47,5 @@ export { utilTagDiff } from './util';
 export { utilTagText } from './util';
 export { utilTiler } from './tiler';
 export { utilTriggerEvent } from './trigger_event';
+export { utilUniqueDomId } from './util';
 export { utilWrap } from './util';

modules/util/util.js

@@ -514,3 +514,10 @@ export function utilHashcode(str) {
 export function utilSafeClassName(str) {
     return str.toLowerCase().replace(/[^a-z0-9]+/g, '_');
 }
+
+// Returns string based on `str` that is highly unlikely to collide with an id
+// used previously or that's present elsewhere in the document. Useful for preventing
+// browser-provided autofills or when embedding iD on pages with unknown elements.
+export function utilUniqueDomId(str) {
+    return 'ideditor-' + utilSafeClassName(str) + '-' + new Date().getTime().toString();
+}