【fix】UT, 播放控件字符转义

AI-GEN: 70% Cursor

Author: luoxiao-supermap

src/mapboxgl/control/VideoPlayControl.js

@@ -10,25 +10,23 @@ const PAUSE_ICON =
   '<svg viewBox="0 0 24 24" class="sm-mapboxgl-play-svg sm-mapboxgl-play-svg--pause" aria-hidden="true"><path d="M6 5h4v14H6V5zm8 0h4v14h-4V5z"/></svg>';
 const DEFAULT_CONTENT = `<button type="button" class="sm-mapboxgl-play-btn">${PLAY_ICON}${PAUSE_ICON}</button>`;
 
-export function escapeHTML(strings) {
-  var result = '';
-  for (var i = 0; i < strings.length; i++) {
-    result += strings[i];
-    if (i + 1 < arguments.length) {
-      var value = arguments[i + 1] || '';
-      result += String(value).replace(/[&<>"'/]/g, function (s) {
-        return {
-          '&': '&amp;',
-          '<': '&lt;',
-          '>': '&gt;',
-          '"': '&quot;',
-          "'": '&apos;',
-          '/': '&#x2F;'
-        }[s];
-      });
-    }
-  }
-  return result;
+// 保留合法 HTML 结构，只移除危险内容。移除 script、iframe、onerror、onclick、javascript: 等危险标签和属性。
+function sanitizeHTML(html) {
+  var template = document.createElement('template');
+  template.innerHTML = String(html);
+  template.content.querySelectorAll('script, iframe, object, embed, style, link, meta').forEach(function (element) {
+    element.remove();
+  });
+  template.content.querySelectorAll('*').forEach(function (element) {
+    Array.from(element.attributes).forEach(function (attribute) {
+      var name = attribute.name.toLowerCase();
+      var value = attribute.value.trim().toLowerCase();
+      if (name.indexOf('on') === 0 || /^(javascript|vbscript|data):/.test(value)) {
+        element.removeAttribute(attribute.name);
+      }
+    });
+  });
+  return template.innerHTML;
 }
 
 /**
@@ -70,7 +68,7 @@ export class VideoPlayControl {
    * @returns {VideoPlayControl} this。
    */
   setHTML(html) {
-    this._content = escapeHTML`${String(html)}`;
+    this._content = sanitizeHTML(html);
     this._renderContent();
     return this;
   }

test/mapboxgl/control/VideoPlayControlLayerSpec.js

@@ -96,18 +96,17 @@ describe('mapboxgl_VideoPlayControl with VideoLayer', () => {
     expect(nextLayer.listeners.pause).toBeUndefined();
   });
 
-  it('renders escaped text from setHTML before and after onAdd', () => {
+  it('renders custom HTML from setHTML before and after onAdd', () => {
     var videoLayer = createVideoLayer(true);
     var control = new VideoPlayControl({ target: videoLayer });
 
     expect(control.setHTML('<i class="my-play"></i>')).toBe(control);
     control.onAdd({});
-    expect(control._container.textContent).toBe('<i class="my-play"></i>');
-    expect(control._container.querySelector('.sm-mapboxgl-play-btn')).toBeNull();
+    expect(control._container.querySelector('.my-play')).not.toBeNull();
     expect(control._button).toBeNull();
 
     control.setHTML('<b class="next"></b>');
-    expect(control._container.textContent).toBe('<b class="next"></b>');
+    expect(control._container.querySelector('.next')).not.toBeNull();
 
     control.onRemove();
   });
@@ -135,12 +134,15 @@ describe('mapboxgl_VideoPlayControl with VideoLayer', () => {
     control.onRemove();
   });
 
-  it('escapes markup passed to setHTML', () => {
+  it('filters dangerous markup passed to setHTML', () => {
     var control = new VideoPlayControl();
     control.onAdd({});
-    control.setHTML('<script>window.__xss = 1</script><img onerror="alert(1)">');
+    control.setHTML('<script>window.__xss = 1</script><img onerror="alert(1)" src="javascript:alert(1)"><b class="safe">safe</b>');
 
-    expect(control._container.textContent).toBe('<script>window.__xss = 1</script><img onerror="alert(1)">');
+    expect(control._container.querySelector('script')).toBeNull();
+    expect(control._container.querySelector('img').hasAttribute('onerror')).toBeFalse();
+    expect(control._container.querySelector('img').hasAttribute('src')).toBeFalse();
+    expect(control._container.querySelector('.safe')).not.toBeNull();
     expect(window.__xss).toBeUndefined();
 
     control.onRemove();
@@ -153,7 +155,7 @@ describe('mapboxgl_VideoPlayControl with VideoLayer', () => {
     control.onRemove();
     control.onAdd({});
 
-    expect(control._container.textContent).toBe('<i class="again"></i>');
+    expect(control._container.querySelector('.again')).not.toBeNull();
 
     control.onRemove();
   });

test/mapboxgl/mapping/VideoMapSpec.js

@@ -108,20 +108,20 @@ describe('mapboxgl_videoMap', () => {
       spyOn(videoMap.coordTransfer, 'toSpatialCoordinate').and.returnValue([13358338.895192828, 3503549.8435043753, 0]);
       var projectedPoint = { x: 10, y: 20 };
       spyOn(videoMap.map, 'project').and.returnValue(projectedPoint);
+      spyOn(videoMap.coordTransfer, 'toVideoCoordinate').and.returnValue({ data64F: [50, 50] });
       videoMap.map.fire('click', { lngLat: { lng: 120, lat: 30 }, point: { x: 10, y: 20 } });
       expect(clickEvent.lngLat.lng).toBeCloseTo(120, 6);
       expect(clickEvent.lngLat.lat).toBeCloseTo(30, 6);
-      expect(clickEvent.point).toBe(projectedPoint);
+      expect(clickEvent.point).toEqual(projectedPoint);
       expect(clickEvent.mapEvent.lngLat).toEqual({ lng: 120, lat: 30 });
       var container = {};
       spyOn(videoMap.map, 'getContainer').and.returnValue(container);
-      spyOn(videoMap.coordTransfer, 'toVideoCoordinate').and.returnValue({ data64F: [50, 50] });
       expect(videoMap.getContainer()).toBe(container);
-      expect(videoMap.project({ lng: 120, lat: 30 })).toBe(projectedPoint);
+      expect(videoMap.project({ lng: 120, lat: 30 })).toEqual(projectedPoint);
       expect(videoMap.map.project).toHaveBeenCalledWith(jasmine.objectContaining({ lng: 50, lat: 50 }));
       videoMap.map.project.calls.reset();
       videoMap.coordTransfer.toVideoCoordinate.calls.reset();
-      expect(videoMap.projectVideoMapCoordinate([60, 70])).toBe(projectedPoint);
+      expect(videoMap.projectVideoMapCoordinate([60, 70])).toEqual(projectedPoint);
       expect(videoMap.map.project).toHaveBeenCalledWith(jasmine.objectContaining({ lng: 60, lat: 70 }));
       expect(videoMap.coordTransfer.toVideoCoordinate).not.toHaveBeenCalled();
       expect(videoMap.transform).toBe(videoMap.map.transform);
@@ -156,6 +156,7 @@ describe('mapboxgl_videoMap', () => {
       spyOn(videoMap.coordTransfer, 'toSpatialCoordinate').and.callFake(function (pixel) {
         return [11587478 + pixel[0], 3570800 - pixel[1], 0];
       });
+      spyOn(videoMap.coordTransfer, 'toCameraCoordinate').and.returnValue([0, 0, 1]);
       var footprint = videoMap.getVideoBounds();
       expect(footprint.type).toBe('Feature');
       expect(footprint.geometry.type).toBe('Polygon');