Skip to content

Security: Enable CSP in JS / fix Navigation demo #32852

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dmlvr merged 10 commits into from
Mar 11, 2026
Merged

Security: Enable CSP in JS / fix Navigation demo #32852

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
674ef7c
update chart demo for CSP testing
dmlvr Mar 10, 2026
1ca134c
update reactjsdemo
dmlvr Mar 10, 2026
1247c75
css optimicztion
dmlvr Mar 10, 2026
9f1cb72
refactoring document preparing
dmlvr Mar 10, 2026
d0f8043
fix css lint error
dmlvr Mar 11, 2026
cd3048d
fix lint error
dmlvr Mar 11, 2026
026002d
update class names
dmlvr Mar 11, 2026
3f21089
add new lines in the end of the files
dmlvr Mar 11, 2026
49d2919
generate ReactJs demo
dmlvr Mar 11, 2026
85d69e5
update all classes and ids to single style
dmlvr Mar 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 16 additions & 5 deletions apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
::ng-deep #chart-demo {
height: 460px;
}

::ng-deep #chart {
position: absolute;
top: 12px;
Expand All @@ -10,7 +6,7 @@
height: 347px;
}

::ng-deep .chart_environment {
::ng-deep .chart-environment {
width: 820px;
position: relative;
margin: 0 auto;
Expand All @@ -19,3 +15,18 @@
::ng-deep .controls-pane {
text-align: center;
}

::ng-deep .custom-markup-text {
fill: #fff;
font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
}

::ng-deep .custom-markup-text-title {
font-size: 36px;
font-weight: bold;
}

::ng-deep .custom-markup-text-subtitle {
font-size: 14px;
opacity: 0.8;
}
20 changes: 4 additions & 16 deletions apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="chart_environment">
<div id="custom_markup_container">
<div class="chart-environment">
<div id="custom-markup-container">
<svg version="1.1" width="820px" height="420px">
<path
d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0"
Expand All @@ -17,27 +17,15 @@
></path>
<text
transform="translate(30,89)"
style="
fill: #ffffff;
font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana,
sans-serif;
font-size: 36px;
font-weight: bold;
"
class="custom-markup-text custom-markup-text-title"
>
<tspan x="0" y="0">Export</tspan>
<tspan x="0" y="38">Custom</tspan>
<tspan x="0" y="76">Markup</tspan>
</text>
<text
transform="translate(32,199)"
style="
opacity: 0.8;
fill: #ffffff;
font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana,
sans-serif;
font-size: 14px;
"
class="custom-markup-text custom-markup-text-subtitle"
>
<tspan x="0" y="0">Export a chart with</tspan>
<tspan x="0" y="19.2">custom elements</tspan>
Expand Down
22 changes: 21 additions & 1 deletion apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,33 @@ export class AppComponent {
}

prepareMarkup() {
const sourceContainer = document.getElementById('custom-markup-container');
const sourceElements = sourceContainer.querySelectorAll('*');

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
svg.setAttribute('version', '1.1');
svg.setAttribute('width', '820px');
svg.setAttribute('height', '420px');
svg.innerHTML = document.getElementById('custom_markup_container').innerHTML;

const clonedContainer = sourceContainer.cloneNode(true) as HTMLElement;
const clonedElements = clonedContainer.querySelectorAll('*');

clonedElements.forEach((clonedEl, index) => {
const sourceEl = sourceElements[index] as HTMLElement;
if (!sourceEl) return;

const computed = window.getComputedStyle(sourceEl);
['fill', 'font-family', 'font-size', 'font-weight', 'opacity', 'stroke', 'stroke-width'].forEach((prop) => {
const value = computed.getPropertyValue(prop)?.trim();
if (value && value !== 'auto' && value !== 'normal' && value !== 'initial') {
(clonedEl as SVGElement).setAttribute(prop, value);
}
});
});

svg.innerHTML = clonedContainer.innerHTML;

const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
group.setAttribute('transform', 'translate(305,12)');
Expand Down
24 changes: 20 additions & 4 deletions apps/demos/Demos/Charts/ExportCustomMarkup/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,31 @@ import Form from './Form.tsx';

const barPadding = 0.3;

const prepareMarkup = (chartSVG: string, markup: string) => {
const prepareMarkup = (chartSVG: string, sourceContainer: HTMLElement) => {
const sourceElements = sourceContainer.querySelectorAll('*');

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
svg.setAttribute('version', '1.1');
svg.setAttribute('width', '820px');
svg.setAttribute('height', '420px');
svg.innerHTML = markup;
const clonedContainer = sourceContainer.cloneNode(true) as HTMLElement;
const clonedElements = clonedContainer.querySelectorAll('*');

clonedElements.forEach((clonedEl, index) => {
const sourceEl = sourceElements[index] as HTMLElement;
if (!sourceEl) return;

const computed = window.getComputedStyle(sourceEl);
['fill', 'font-family', 'font-size', 'font-weight', 'opacity', 'stroke', 'stroke-width'].forEach((prop) => {
const value = computed.getPropertyValue(prop)?.trim();
if (value && value !== 'auto' && value !== 'normal' && value !== 'initial') {
(clonedEl as SVGElement).setAttribute(prop, value);
}
});
});
svg.innerHTML = clonedContainer.innerHTML;
const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
group.setAttribute('transform', 'translate(305,12)');
group.innerHTML = chartSVG;
Expand All @@ -40,7 +56,7 @@ function App() {
const onClick = useCallback(() => {
exportFromMarkup(
prepareMarkup(chartRef.current?.instance().svg() ?? '',
childRef.current?.innerHTML ?? ''), {
childRef.current ?? document.createElement('div')), {
width: 820,
height: 420,
margin: 0,
Expand Down Expand Up @@ -68,7 +84,7 @@ function App() {

return (
<div id="chart-demo">
<div className="chart_environment">
<div className="chart-environment">
<Form ref={childRef} />
<Chart
ref={chartRef}
Expand Down
14 changes: 3 additions & 11 deletions apps/demos/Demos/Charts/ExportCustomMarkup/React/Form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,18 @@
import React from 'react';

const fontFamily = "'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif";

const Form = React.forwardRef<HTMLDivElement>((_, ref) => (
<div id="custom_markup_container" ref={ref}>
<div id="custom-markup-container" ref={ref}>
<svg width="820px" height="420px">
<path opacity="1" d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0" stroke="#999999" strokeWidth="1"
strokeLinecap="butt" fill="white" strokeLinejoin="miter"></path>
<path d="M 13 407 L 128 407 L 232 39 L 13 39" fill="#6D39C3"></path>
<path d="M 46 381 L 161 381 L 265 13 L 46 13" opacity="0.5" fill="#6D39C3"></path>
<text transform="translate(30,89)"
style={{
fill: '#FFFFFF', fontFamily, fontSize: 36, fontWeight: 'bold',
}}>
<text transform="translate(30,89)" className="custom-markup-text custom-markup-text-title">
<tspan x="0" y="0">Export </tspan>
<tspan x="0" y="38">Custom</tspan>
<tspan x="0" y="76">Markup</tspan>
</text>
<text transform="translate(32,199)"
style={{
opacity: 0.8, fill: '#FFFFFF', fontFamily, fontSize: 14,
}}>
<text transform="translate(32,199)" className="custom-markup-text custom-markup-text-subtitle">
<tspan x="0" y="0">Export a chart with</tspan>
<tspan x="0" y="19.2">custom elements</tspan>
</text>
Expand Down
17 changes: 16 additions & 1 deletion apps/demos/Demos/Charts/ExportCustomMarkup/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
height: 347px;
}

.chart_environment {
.chart-environment {
width: 820px;
position: relative;
margin: 0 auto;
Expand All @@ -19,3 +19,18 @@
.controls-pane {
text-align: center;
}

.custom-markup-text {
fill: #fff;
font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
}

.custom-markup-text-title {
font-size: 36px;
font-weight: bold;
}

.custom-markup-text-subtitle {
font-size: 14px;
opacity: 0.8;
}
33 changes: 29 additions & 4 deletions apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,36 @@ import { dataSource } from './data.js';
import Form from './Form.js';

const barPadding = 0.3;
const prepareMarkup = (chartSVG, markup) => {
const prepareMarkup = (chartSVG, sourceContainer) => {
const sourceElements = sourceContainer.querySelectorAll('*');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
svg.setAttribute('version', '1.1');
svg.setAttribute('width', '820px');
svg.setAttribute('height', '420px');
svg.innerHTML = markup;
const clonedContainer = sourceContainer.cloneNode(true);
const clonedElements = clonedContainer.querySelectorAll('*');
clonedElements.forEach((clonedEl, index) => {
const sourceEl = sourceElements[index];
if (!sourceEl) return;
const computed = window.getComputedStyle(sourceEl);
[
'fill',
'font-family',
'font-size',
'font-weight',
'opacity',
'stroke',
'stroke-width',
].forEach((prop) => {
const value = computed.getPropertyValue(prop)?.trim();
if (value && value !== 'auto' && value !== 'normal' && value !== 'initial') {
clonedEl.setAttribute(prop, value);
}
});
});
svg.innerHTML = clonedContainer.innerHTML;
const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
group.setAttribute('transform', 'translate(305,12)');
group.innerHTML = chartSVG;
Expand All @@ -33,7 +55,10 @@ function App() {
const chartRef = useRef(null);
const onClick = useCallback(() => {
exportFromMarkup(
prepareMarkup(chartRef.current?.instance().svg() ?? '', childRef.current?.innerHTML ?? ''),
prepareMarkup(
chartRef.current?.instance().svg() ?? '',
childRef.current ?? document.createElement('div'),
),
{
width: 820,
height: 420,
Expand All @@ -55,7 +80,7 @@ function App() {
}, []);
return (
<div id="chart-demo">
<div className="chart_environment">
<div className="chart-environment">
<Form ref={childRef} />
<Chart
ref={chartRef}
Expand Down
17 changes: 3 additions & 14 deletions apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/Form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React from 'react';

const fontFamily = "'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif";
const Form = React.forwardRef((_, ref) => (
<div
id="custom_markup_container"
id="custom-markup-container"
ref={ref}
>
<svg
Expand All @@ -30,12 +29,7 @@ const Form = React.forwardRef((_, ref) => (
></path>
<text
transform="translate(30,89)"
style={{
fill: '#FFFFFF',
fontFamily,
fontSize: 36,
fontWeight: 'bold',
}}
className="custom-markup-text custom-markup-text-title"
>
<tspan
x="0"
Expand All @@ -58,12 +52,7 @@ const Form = React.forwardRef((_, ref) => (
</text>
<text
transform="translate(32,199)"
style={{
opacity: 0.8,
fill: '#FFFFFF',
fontFamily,
fontSize: 14,
}}
className="custom-markup-text custom-markup-text-subtitle"
>
<tspan
x="0"
Expand Down
17 changes: 16 additions & 1 deletion apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
height: 347px;
}

.chart_environment {
.chart-environment {
width: 820px;
position: relative;
margin: 0 auto;
Expand All @@ -19,3 +19,18 @@
.controls-pane {
text-align: center;
}

.custom-markup-text {
fill: #fff;
font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
}

.custom-markup-text-title {
font-size: 36px;
font-weight: bold;
}

.custom-markup-text-subtitle {
font-size: 14px;
opacity: 0.8;
}
24 changes: 18 additions & 6 deletions apps/demos/Demos/Charts/ExportCustomMarkup/Vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div id="chart-demo">
<div class="chart_environment">
<div class="chart-environment">
<Form ref="form"/>
<DxChart
id="chart"
Expand Down Expand Up @@ -75,20 +75,32 @@ import Form from './Form.vue';
const form = ref();
const chart = ref();

const prepareMarkup = (chartSVG: string, markup: string): SVGElement => {
const prepareMarkup = (chartSVG: string, sourceContainer: HTMLElement): SVGElement => {
const sourceElements = sourceContainer.querySelectorAll('*');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
svg.setAttribute('version', '1.1');
svg.setAttribute('width', '820px');
svg.setAttribute('height', '420px');
svg.innerHTML = markup;

const clonedContainer = sourceContainer.cloneNode(true) as HTMLElement;
const clonedElements = clonedContainer.querySelectorAll('*');
clonedElements.forEach((clonedEl, index) => {
const sourceEl = sourceElements[index] as HTMLElement;
if (!sourceEl) return;
const computed = window.getComputedStyle(sourceEl);
['fill', 'font-family', 'font-size', 'font-weight', 'opacity', 'stroke', 'stroke-width'].forEach((prop) => {
const value = computed.getPropertyValue(prop)?.trim();
if (value && value !== 'auto' && value !== 'normal' && value !== 'initial') {
(clonedEl as SVGElement).setAttribute(prop, value);
}
});
});
svg.innerHTML = clonedContainer.innerHTML;
const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
group.setAttribute('transform', 'translate(305,12)');
group.innerHTML = chartSVG;
svg.appendChild(group);

return svg;
};

Expand Down Expand Up @@ -127,7 +139,7 @@ function onClick(): void {
height: 347px;
}

.chart_environment {
.chart-environment {
width: 820px;
position: relative;
margin: 0 auto;
Expand Down
Loading
Loading