Skip to content

Commit

Permalink
[fix]innerhtml escapeHTML
Browse files Browse the repository at this point in the history
  • Loading branch information
luoxiao-supermap committed Nov 8, 2024
1 parent efa4648 commit 16a12e4
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 26 deletions.
23 changes: 23 additions & 0 deletions src/common/_utils/util.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,28 @@ import omit from 'omit.js';
import tinyColor from 'tinycolor2';
import { min, max as statisticsMax, mean, sum, mode, median, variance, standardDeviation } from 'simple-statistics';

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;
}

export function getDateTime(timeType) {
return geti18n().d(new Date(), timeType.replace(/\+/g, '_'));
}
Expand Down Expand Up @@ -245,3 +267,4 @@ export function numberEqual(num1, num2, precision = 10E-6) {
}

export const statisticFunctions = { min, max: statisticsMax, mean, sum, mode, median, variance, standardDeviation, count: fieldValues => fieldValues.length };

4 changes: 2 additions & 2 deletions src/mapboxgl/search/Search.vue
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ import SmIcon from 'vue-iclient/src/common/icon/Icon.vue';
import SmInput from 'vue-iclient/src/common/input/Input.vue';
import Message from 'vue-iclient/src/common/message/Message.js';
import TablePopup from 'vue-iclient/src/common/table-popup/TablePopup.vue';
import { setPopupArrowStyle } from 'vue-iclient/src/common/_utils/util';
import { setPopupArrowStyle, escapeHTML } from 'vue-iclient/src/common/_utils/util';
import isEqual from 'lodash.isequal';
export default {
Expand Down Expand Up @@ -307,7 +307,7 @@ export default {
emitEvent && this.$emit('clear-search-result');
},
searchResultListClicked(data, event) {
const searchKey = event.target.innerHTML;
const searchKey = escapeHTML`${event.target.innerHTML}`;
this.isSuggestion = false;
this.viewModel.getFeatureInfo(searchKey, data);
},
Expand Down
32 changes: 13 additions & 19 deletions src/mapboxgl/tdt/search/TdtSearchViewModel.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
import bbox from '@turf/bbox';
import transformScale from '@turf/transform-scale';
import { geti18n } from 'vue-iclient/src/common/_lang/index';
import { escapeHTML } from 'vue-iclient/src/common/_utils/util';

export default class TdtSearchViewModel extends mapboxgl.Evented {
constructor(options) {
Expand Down Expand Up @@ -126,25 +127,18 @@ export default class TdtSearchViewModel extends mapboxgl.Evented {
`;
const content = document.createElement('div');
content.className = 'content';
content.innerHTML = `
${
from === 'Point'
? `<div>
<div class="phone">${geti18n().t('tdtSearch.phone')}${data.phone || geti18n().t('tdtSearch.noData')}</div>
<div class="address">${geti18n().t('tdtSearch.address')}${data.address ||
geti18n().t('tdtSearch.noData')}</div>
</div>`
: ''
}
${
from === 'LineString'
? `<div>
<div class="address">${geti18n().t('tdtSearch.transport')}${data.address ||
geti18n().t('tdtSearch.noData')}</div>
</div>`
: ''
}
`;
const pointHtml = escapeHTML`<div>
<div class="phone">${geti18n().t('tdtSearch.phone')}${data.phone || geti18n().t('tdtSearch.noData')}</div>
<div class="address">${geti18n().t('tdtSearch.address')}${
data.address || geti18n().t('tdtSearch.noData')
}</div>
</div>`;
const lineHtml = escapeHTML`<div>
<div class="address">${geti18n().t('tdtSearch.transport')}${
data.address || geti18n().t('tdtSearch.noData')
}</div>
</div>`;
content.innerHTML = from === 'Point' ? pointHtml : from === 'LineString' ? lineHtml : '';
const group = document.createElement('div');
group.className = 'operate-group';
const startItem = document.createElement('div');
Expand Down
7 changes: 4 additions & 3 deletions src/mapboxgl/web-map/layer/animate-marker/marker/Marker.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { FeatureCollection, Feature } from 'geojson';
import { getColorWithOpacity } from 'vue-iclient/src/common/_utils/util';
// @ts-ignore
import { getColorWithOpacity, escapeHTML } from 'vue-iclient/src/common/_utils/util';

interface markerOptions {
width?: number;
Expand Down Expand Up @@ -40,7 +41,7 @@ export default abstract class Marker {
for (let i = 0; i < name.length; i++) {
const properties = this.features.features[i] && this.features.features[i].properties;
if (properties && properties[textField]) {
name[i].innerHTML = properties[textField];
name[i].innerHTML = escapeHTML`${properties[textField]}`;
} else {
name[i].innerHTML = '';
}
Expand Down Expand Up @@ -82,7 +83,7 @@ export default abstract class Marker {
this.options.textFontSize && (nameContainer.style.fontSize = this.options.textFontSize + 'px');
const nameSpan = document.createElement('span');
nameSpan.className = `sm-component-animate-marker__${className} sm-component-animate-marker__name`;
nameSpan.innerHTML = name || '';
nameSpan.innerHTML = escapeHTML`${name}` || '';
nameContainer.appendChild(nameSpan);
return nameContainer;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { FeatureCollection } from 'geojson';
// @ts-ignore
import { escapeHTML } from 'vue-iclient/src/common/_utils/util';
import Marker from './Marker';

interface markerOptions {
Expand Down Expand Up @@ -47,7 +49,7 @@ export default class RotatingTextBorderMarker extends Marker {
for (let i = 0; i < name.length; i++) {
let properties = this.features.features[i] && this.features.features[i].properties;
if (properties && properties[textField]) {
name[i].innerHTML = properties[textField];
name[i].innerHTML = escapeHTML`${properties[textField]}`;
} else {
name[i].innerHTML = '';
}
Expand Down Expand Up @@ -92,7 +94,7 @@ export default class RotatingTextBorderMarker extends Marker {
}
let span = document.createElement('span');
span.className = 'sm-component-animate-marker__text';
span.innerHTML = name || '';
span.innerHTML = escapeHTML`${name}` || '';
border.appendChild(span);
if (this.options.colors && this.options.colors.length && this.options.colors.length > 0) {
markerContainer.style.setProperty('--border-color', this.options.colors[0]);
Expand Down

0 comments on commit 16a12e4

Please sign in to comment.