fix(material-experimental/mdc-slider): make small fixes needed to imp… (

#22684) * fix(material-experimental/mdc-slider): make small fixes needed to implement the gmat mdc slider internally * change imports of @material/base to @material/base/types * explicitly check attributes when calling setAttribute to prevent xss * fixup! fix(material-experimental/mdc-slider): make small fixes needed to implement the gmat mdc slider internally * fixup! fix(material-experimental/mdc-slider): make small fixes needed to implement the gmat mdc slider internally * fixup! fix(material-experimental/mdc-slider): make small fixes needed to implement the gmat mdc slider internally
angular · May 18, 2021 · aaf9ad2 · aaf9ad2
1 parent 481f71f
commit aaf9ad2
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 3 deletions.
diff --git a/rollup-globals.bzl b/rollup-globals.bzl
@@ -40,6 +40,9 @@ ROLLUP_GLOBALS = {
     "@material/animation": "mdc.animation",
     "@material/auto-init": "mdc.autoInit",
     "@material/base": "mdc.base",
+    # This UMD module name would not match with anything that MDC provides, but we just
+    # add this to make the linter happy. This module resolves to a type-only file anyways.
+    "@material/base/types": "mdc.base.types",
     "@material/checkbox": "mdc.checkbox",
     "@material/circular-progress": "mdc.circularProgress",
     "@material/chips": "mdc.chips",

diff --git a/src/material-experimental/mdc-slider/global-change-and-input-listener.ts b/src/material-experimental/mdc-slider/global-change-and-input-listener.ts
@@ -8,7 +8,7 @@
 
 import {DOCUMENT} from '@angular/common';
 import {Inject, Injectable, NgZone, OnDestroy} from '@angular/core';
-import {SpecificEventListener} from '@material/base';
+import {SpecificEventListener} from '@material/base/types';
 import {fromEvent, Observable, Subject, Subscription} from 'rxjs';
 import {finalize, share, takeUntil} from 'rxjs/operators';
 

diff --git a/src/material-experimental/mdc-slider/slider.ts b/src/material-experimental/mdc-slider/slider.ts
@@ -51,7 +51,7 @@ import {
   RippleRef,
   RippleState,
 } from '@angular/material/core';
-import {SpecificEventListener, EventType} from '@material/base';
+import {SpecificEventListener, EventType} from '@material/base/types';
 import {MDCSliderAdapter, MDCSliderFoundation, Thumb, TickMark} from '@material/slider';
 import {Subscription} from 'rxjs';
 import {GlobalChangeAndInputListener} from './global-change-and-input-listener';
@@ -977,7 +977,34 @@ class SliderAdapter implements MDCSliderAdapter {
     return this._delegate._getInputElement(thumbPosition).getAttribute(attribute);
   }
   setInputAttribute = (attribute: string, value: string, thumbPosition: Thumb): void => {
-    this._delegate._getInputElement(thumbPosition).setAttribute(attribute, value);
+    const input = this._delegate._getInputElement(thumbPosition);
+
+    // TODO(wagnermaciel): remove this check once this component is
+    // added to the internal allowlist for calling setAttribute.
+
+    // Explicitly check the attribute we are setting to prevent xss.
+    switch (attribute) {
+      case 'aria-valuetext':
+        input.setAttribute('aria-valuetext', value);
+        break;
+      case 'disabled':
+        input.setAttribute('disabled', value);
+        break;
+      case 'min':
+        input.setAttribute('min', value);
+        break;
+      case 'max':
+        input.setAttribute('max', value);
+        break;
+      case 'value':
+        input.setAttribute('value', value);
+        break;
+      case 'step':
+        input.setAttribute('step', value);
+        break;
+      default:
+        throw Error(`Tried to set invalid attribute ${attribute} on the mdc-slider.`);
+    }
   }
   removeInputAttribute = (attribute: string, thumbPosition: Thumb): void => {
     this._delegate._getInputElement(thumbPosition).removeAttribute(attribute);