Skip to content

Commit b4f4f99

Browse files
Abinet18Abinet18
committed
fix xss errors
1 parent 9ef7a8a commit b4f4f99

File tree

1 file changed

+126
-35
lines changed
  • examples/web/examples/navigation

1 file changed

+126
-35
lines changed

‎examples/web/examples/navigation/index.js‎

Lines changed: 126 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -118,19 +118,42 @@ function goBack() {
118118
const contentDiv = document.getElementById('content') || document.body;
119119
const backIndicator = document.createElement('div');
120120
backIndicator.className = 'nav-result';
121-
backIndicator.innerHTML =
122-
`<div class="nav-result">
123-
<h4>⬅️ Back Navigation</h4>
124-
<p><strong>Method:</strong> history.back()</p>
125-
<p><strong>Current URL:</strong> <code>${location.href}</code></p>
126-
<p><strong>Expected Instrumentation:</strong></p>
127-
<ul>
128-
<li>✓ same_document: true</li>
129-
<li>✓ hash_change: depends on URL change</li>
130-
<li>✓ type: traverse</li>
131-
</ul>
132-
<p class="console-note">📊 Check console for navigation events!</p>
133-
</div>`;
121+
// Create elements safely to avoid XSS
122+
const resultDiv = document.createElement('div');
123+
resultDiv.className = 'nav-result';
124+
125+
const title = document.createElement('h4');
126+
title.textContent = '⬅️ Back Navigation';
127+
128+
const method = document.createElement('p');
129+
method.innerHTML = '<strong>Method:</strong> history.back()';
130+
131+
const urlPara = document.createElement('p');
132+
urlPara.innerHTML = '<strong>Current URL:</strong> <code></code>';
133+
urlPara.querySelector('code').textContent = location.href; // Safe text assignment
134+
135+
const expectedTitle = document.createElement('p');
136+
expectedTitle.innerHTML = '<strong>Expected Instrumentation:</strong>';
137+
138+
const list = document.createElement('ul');
139+
list.innerHTML = `
140+
<li>✓ same_document: true</li>
141+
<li>✓ hash_change: depends on URL change</li>
142+
<li>✓ type: traverse</li>
143+
`;
144+
145+
const consoleNote = document.createElement('p');
146+
consoleNote.className = 'console-note';
147+
consoleNote.textContent = '📊 Check console for navigation events!';
148+
149+
resultDiv.appendChild(title);
150+
resultDiv.appendChild(method);
151+
resultDiv.appendChild(urlPara);
152+
resultDiv.appendChild(expectedTitle);
153+
resultDiv.appendChild(list);
154+
resultDiv.appendChild(consoleNote);
155+
156+
backIndicator.appendChild(resultDiv);
134157
contentDiv.appendChild(backIndicator);
135158

136159
// Remove the indicator after 5 seconds
@@ -178,40 +201,108 @@ function testNavigationApiRoute(route, navigationType) {
178201

179202
// Update content after navigation
180203
setTimeout(() => {
181-
document.getElementById('nav-api-content').innerHTML =
182-
`<div class="nav-result">
183-
<h4>✅ ${navigationType} Completed</h4>
184-
<p><strong>Target:</strong> <code>${route}</code></p>
185-
<p><strong>Current URL:</strong> <code>${window.location.href}</code></p>
186-
<p><strong>Navigation API:</strong> Supported ✓</p>
187-
<button id="navApiHashBtn" style="display: none;">Nav API: Hash</button>
188-
<p class="console-note">📊 Check console for detailed navigation events and instrumentation data!</p>
189-
</div>`;
204+
const contentElement = document.getElementById('nav-api-content');
205+
206+
// Create elements safely to avoid XSS
207+
const resultDiv = document.createElement('div');
208+
resultDiv.className = 'nav-result';
209+
210+
const title = document.createElement('h4');
211+
title.textContent = `✅ ${navigationType} Completed`;
212+
213+
const targetPara = document.createElement('p');
214+
targetPara.innerHTML = '<strong>Target:</strong> <code></code>';
215+
targetPara.querySelector('code').textContent = route; // Safe text assignment
216+
217+
const urlPara = document.createElement('p');
218+
urlPara.innerHTML = '<strong>Current URL:</strong> <code></code>';
219+
urlPara.querySelector('code').textContent = window.location.href; // Safe text assignment
220+
221+
const apiPara = document.createElement('p');
222+
apiPara.innerHTML = '<strong>Navigation API:</strong> Supported ✓';
223+
224+
const button = document.createElement('button');
225+
button.id = 'navApiHashBtn';
226+
button.style.display = 'none';
227+
button.textContent = 'Nav API: Hash';
228+
229+
const consoleNote = document.createElement('p');
230+
consoleNote.className = 'console-note';
231+
consoleNote.textContent = '📊 Check console for detailed navigation events and instrumentation data!';
232+
233+
resultDiv.appendChild(title);
234+
resultDiv.appendChild(targetPara);
235+
resultDiv.appendChild(urlPara);
236+
resultDiv.appendChild(apiPara);
237+
resultDiv.appendChild(button);
238+
resultDiv.appendChild(consoleNote);
239+
240+
contentElement.innerHTML = ''; // Clear existing content
241+
contentElement.appendChild(resultDiv);
190242
}, 100);
191243

192244
} catch (error) {
193245
console.error(`❌ Navigation API error for ${navigationType}:`, error);
194246
// Fallback to history API
195247
const fallbackRoute = route.startsWith('#') ? route : `?fallback=${Date.now()}`;
196248
history.pushState({}, '', fallbackRoute);
197-
document.getElementById('nav-api-content').innerHTML =
198-
`<div class="nav-result error">
199-
<h4>⚠️ Navigation API Failed</h4>
200-
<p><strong>Fallback used:</strong> <code>${fallbackRoute}</code></p>
201-
<p><strong>Error:</strong> ${error.message}</p>
202-
</div>`;
249+
250+
// Create error content safely
251+
const contentElement = document.getElementById('nav-api-content');
252+
const errorDiv = document.createElement('div');
253+
errorDiv.className = 'nav-result error';
254+
255+
const title = document.createElement('h4');
256+
title.textContent = '⚠️ Navigation API Failed';
257+
258+
const fallbackPara = document.createElement('p');
259+
fallbackPara.innerHTML = '<strong>Fallback used:</strong> <code></code>';
260+
fallbackPara.querySelector('code').textContent = fallbackRoute;
261+
262+
const errorPara = document.createElement('p');
263+
errorPara.innerHTML = '<strong>Error:</strong> ';
264+
const errorSpan = document.createElement('span');
265+
errorSpan.textContent = error.message;
266+
errorPara.appendChild(errorSpan);
267+
268+
errorDiv.appendChild(title);
269+
errorDiv.appendChild(fallbackPara);
270+
errorDiv.appendChild(errorPara);
271+
272+
contentElement.innerHTML = '';
273+
contentElement.appendChild(errorDiv);
203274
}
204275
} else {
205276
// Fallback for browsers without Navigation API
206277
const fallbackRoute = route.startsWith('#') ? route : `?fallback=${Date.now()}`;
207278
history.pushState({}, '', fallbackRoute);
208-
document.getElementById('nav-api-content').innerHTML =
209-
`<div class="nav-result fallback">
210-
<h4>📱 Navigation API Not Available</h4>
211-
<p><strong>Fallback used:</strong> <code>${fallbackRoute}</code></p>
212-
<p><strong>Method:</strong> history.pushState()</p>
213-
<p class="console-note">📊 Check console for instrumentation data!</p>
214-
</div>`;
279+
280+
// Create fallback content safely
281+
const contentElement = document.getElementById('nav-api-content');
282+
const fallbackDiv = document.createElement('div');
283+
fallbackDiv.className = 'nav-result fallback';
284+
285+
const title = document.createElement('h4');
286+
title.textContent = '📱 Navigation API Not Available';
287+
288+
const fallbackPara = document.createElement('p');
289+
fallbackPara.innerHTML = '<strong>Fallback used:</strong> <code></code>';
290+
fallbackPara.querySelector('code').textContent = fallbackRoute;
291+
292+
const methodPara = document.createElement('p');
293+
methodPara.innerHTML = '<strong>Method:</strong> history.pushState()';
294+
295+
const consoleNote = document.createElement('p');
296+
consoleNote.className = 'console-note';
297+
consoleNote.textContent = '📊 Check console for instrumentation data!';
298+
299+
fallbackDiv.appendChild(title);
300+
fallbackDiv.appendChild(fallbackPara);
301+
fallbackDiv.appendChild(methodPara);
302+
fallbackDiv.appendChild(consoleNote);
303+
304+
contentElement.innerHTML = '';
305+
contentElement.appendChild(fallbackDiv);
215306
}
216307
}
217308

0 commit comments

Comments
 (0)