Skip to content
Permalink
Browse files Browse the repository at this point in the history
Merge pull request #146 from grafana/oscark/sanitize-nav-links
Sanitized nav bar links to remove angular interpolation
  • Loading branch information
dsotirakis committed Oct 22, 2021
2 parents e804e38 + 0b440d5 commit 31b78d5
Show file tree
Hide file tree
Showing 4 changed files with 12 additions and 12 deletions.
3 changes: 2 additions & 1 deletion packages/grafana-data/src/text/index.ts
@@ -1,11 +1,12 @@
export * from './string';
export * from './markdown';
export * from './text';
import { escapeHtml, hasAnsiCodes, sanitize, sanitizeUrl } from './sanitize';
import { escapeHtml, hasAnsiCodes, sanitize, sanitizeUrl, sanitizeAngularInterpolation } from './sanitize';

export const textUtil = {
escapeHtml,
hasAnsiCodes,
sanitize,
sanitizeUrl,
sanitizeAngularInterpolation,
};
4 changes: 4 additions & 0 deletions packages/grafana-data/src/text/sanitize.ts
Expand Up @@ -38,3 +38,7 @@ export function hasAnsiCodes(input: string): boolean {
export function escapeHtml(str: string): string {
return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

export function sanitizeAngularInterpolation(url: string): string {
return url.replace('{{', '%7B%7B').replace('}}', '%7D%7D');
}
6 changes: 0 additions & 6 deletions public/app/angular/AngularApp.ts
Expand Up @@ -103,12 +103,6 @@ export class AngularApp {
}

bootstrap() {
// Do not initalize angular when the path contains an interpolation directive
const { pathname } = window.location;
if (pathname && (pathname.includes('%7B%7B') || pathname.includes('{{'))) {
return;
}

const injector = angular.bootstrap(document, this.ngModuleDependencies);

monkeyPatchInjectorWithPreAssignedBindings(injector);
Expand Down
11 changes: 6 additions & 5 deletions public/app/core/components/NavBar/NavBarItem.tsx
@@ -1,6 +1,6 @@
import React, { ReactNode } from 'react';
import { css, cx } from '@emotion/css';
import { GrafanaTheme2, NavModelItem } from '@grafana/data';
import { GrafanaTheme2, NavModelItem, textUtil } from '@grafana/data';
import { Link, useTheme2 } from '@grafana/ui';
import NavBarDropdown from './NavBarDropdown';

Expand Down Expand Up @@ -34,13 +34,14 @@ const NavBarItem = ({
<span className={styles.icon}>{children}</span>
</button>
);
const sanitizedUrl = textUtil.sanitizeAngularInterpolation(url ?? '');

if (url) {
element =
!target && url.startsWith('/') ? (
!target && sanitizedUrl.startsWith('/') ? (
<Link
className={styles.element}
href={url}
href={sanitizedUrl}
target={target}
aria-label={label}
onClick={onClick}
Expand All @@ -49,7 +50,7 @@ const NavBarItem = ({
<span className={styles.icon}>{children}</span>
</Link>
) : (
<a href={url} target={target} className={styles.element} onClick={onClick} aria-label={label}>
<a href={sanitizedUrl} target={target} className={styles.element} onClick={onClick} aria-label={label}>
<span className={styles.icon}>{children}</span>
</a>
);
Expand All @@ -61,7 +62,7 @@ const NavBarItem = ({
<NavBarDropdown
headerTarget={target}
headerText={label}
headerUrl={url}
headerUrl={sanitizedUrl}
items={menuItems}
onHeaderClick={onClick}
reverseDirection={reverseMenuDirection}
Expand Down

0 comments on commit 31b78d5

Please sign in to comment.