feat: Add custom branding functionality with CSS and JSON configuration
- Introduced custom branding CSS styles in `custom-branding.css`. - Created example JSON configuration for custom branding in `custom-branding.example.json`. - Implemented branding configuration logic in `BrandingConfig.ts` to normalize and validate branding settings. - Developed CSS loader to manage loading and unloading of custom stylesheets in `BrandingCssLoader.ts`. - Added DOM rendering capabilities for branding elements in `BrandingDomRenderer.ts`. - Defined types and interfaces for branding elements and configurations in `BrandingTypes.ts`. - Included localization support for German in `de-de.js`. - Added unit tests for branding configuration, CSS loader, and DOM renderer. - Validated project structure and static assets with new validation scripts.
This commit is contained in:
Torsten Brendgen
@@ -0,0 +1,306 @@
|
||||
// tslint:disable:no-any max-line-length
|
||||
import {
|
||||
BrandingElementType,
|
||||
IBrandingElement,
|
||||
IBrandingNormalizationResult,
|
||||
ICssFile,
|
||||
ICustomBrandingApplicationCustomizerProperties,
|
||||
ICustomBrandingConfig
|
||||
} from './BrandingTypes';
|
||||
|
||||
export const BrandingSchemaVersion: number = 2;
|
||||
export const MaxBrandingDepth: number = 8;
|
||||
export const MaxBrandingElements: number = 200;
|
||||
export const MaxBrandingConfigurationLength: number = 100000;
|
||||
|
||||
const AllowedTags: string[] = ['div', 'span', 'p', 'a', 'button', 'img', 'h1', 'h2', 'h3', 'strong', 'em', 'nav', 'section'];
|
||||
const GlobalAttributes: string[] = ['id', 'class', 'title', 'role', 'aria-label', 'aria-hidden', 'aria-current', 'aria-live'];
|
||||
const AllowedStyles: string[] = [
|
||||
'align-items', 'background', 'background-color', 'border', 'border-bottom', 'border-color', 'border-left',
|
||||
'border-radius', 'border-right', 'border-style', 'border-top', 'border-width', 'box-sizing', 'color',
|
||||
'display', 'flex', 'flex-basis', 'flex-direction', 'flex-grow', 'flex-shrink', 'flex-wrap', 'font-family',
|
||||
'font-size', 'font-style', 'font-weight', 'gap', 'grid-template-columns', 'height', 'justify-content',
|
||||
'line-height', 'margin', 'margin-bottom', 'margin-left', 'margin-right', 'margin-top', 'max-height',
|
||||
'max-width', 'min-height', 'min-width', 'opacity', 'overflow', 'padding', 'padding-bottom', 'padding-left',
|
||||
'padding-right', 'padding-top', 'text-align', 'text-decoration', 'text-transform', 'white-space', 'width'
|
||||
];
|
||||
|
||||
interface INormalizationState {
|
||||
count: number;
|
||||
warnings: string[];
|
||||
siteCollectionUrl: string;
|
||||
}
|
||||
|
||||
export function normalizeBrandingConfig(
|
||||
rawProperties: ICustomBrandingApplicationCustomizerProperties | any,
|
||||
siteCollectionUrl: string
|
||||
): IBrandingNormalizationResult {
|
||||
const warnings: string[] = [];
|
||||
const raw: any = rawProperties && typeof rawProperties === 'object' ? rawProperties : {};
|
||||
let serializedLength: number = 0;
|
||||
try {
|
||||
serializedLength = JSON.stringify(raw).length;
|
||||
} catch (error) {
|
||||
warnings.push('Configuration could not be serialized and was ignored.');
|
||||
}
|
||||
if (serializedLength > MaxBrandingConfigurationLength) {
|
||||
warnings.push('Configuration exceeds the maximum size and was ignored.');
|
||||
return { config: createEmptyConfig(), warnings: warnings };
|
||||
}
|
||||
|
||||
const allowedCssHosts: string[] = normalizeHosts(raw.allowedCssHosts);
|
||||
const state: INormalizationState = { count: 0, warnings: warnings, siteCollectionUrl: siteCollectionUrl || '' };
|
||||
const topSource: any[] = raw.placeholdertop && Array.isArray(raw.placeholdertop.elements)
|
||||
? raw.placeholdertop.elements
|
||||
: (Array.isArray(raw.elements) ? raw.elements : []);
|
||||
const bottomSource: any[] = raw.placeholderbottom && Array.isArray(raw.placeholderbottom.elements)
|
||||
? raw.placeholderbottom.elements
|
||||
: [];
|
||||
|
||||
const config: ICustomBrandingConfig = {
|
||||
schemaVersion: BrandingSchemaVersion,
|
||||
enabled: raw.enabled !== false,
|
||||
debug: raw.debug === true,
|
||||
allowedCssHosts: allowedCssHosts,
|
||||
cssfiles: normalizeCssFiles(raw.cssfiles, siteCollectionUrl, allowedCssHosts, warnings),
|
||||
placeholdertop: { elements: normalizeElements(topSource, 1, state) },
|
||||
placeholderbottom: { elements: normalizeElements(bottomSource, 1, state) }
|
||||
};
|
||||
return { config: config, warnings: warnings };
|
||||
}
|
||||
|
||||
export function sanitizeNavigationUrl(value: string, siteCollectionUrl: string, allowMailto: boolean): string | undefined {
|
||||
const raw: string = String(value || '').trim();
|
||||
if (!raw || /[\u0000-\u001f\u007f]/.test(raw)) {
|
||||
return undefined;
|
||||
}
|
||||
const resolved: string = raw.toLowerCase().indexOf('~sitecollection') === 0
|
||||
? String(siteCollectionUrl || '').replace(/\/+$/, '') + raw.substring('~sitecollection'.length)
|
||||
: raw;
|
||||
const protocolMatch: RegExpMatchArray | null = resolved.match(/^([a-z][a-z0-9+.-]*):/i);
|
||||
if (!protocolMatch) {
|
||||
return resolved;
|
||||
}
|
||||
const protocol: string = protocolMatch[1].toLowerCase();
|
||||
return protocol === 'http' || protocol === 'https' || (allowMailto && protocol === 'mailto')
|
||||
? resolved
|
||||
: undefined;
|
||||
}
|
||||
|
||||
export function sanitizeStylesheetUrl(
|
||||
value: string,
|
||||
siteCollectionUrl: string,
|
||||
allowedCssHosts: string[]
|
||||
): string | undefined {
|
||||
const resolved: string = sanitizeNavigationUrl(value, siteCollectionUrl, false);
|
||||
if (!resolved) {
|
||||
return undefined;
|
||||
}
|
||||
const absolute: RegExpMatchArray | null = resolved.match(/^(https?):\/\/([^/]+)/i);
|
||||
if (!absolute) {
|
||||
return resolved;
|
||||
}
|
||||
const site: RegExpMatchArray | null = String(siteCollectionUrl || '').match(/^(https?):\/\/([^/]+)/i);
|
||||
const protocol: string = absolute[1].toLowerCase();
|
||||
const host: string = absolute[2].toLowerCase();
|
||||
if (site && protocol === site[1].toLowerCase() && host === site[2].toLowerCase()) {
|
||||
return resolved;
|
||||
}
|
||||
if (protocol !== 'https' || allowedCssHosts.indexOf(host) < 0) {
|
||||
return undefined;
|
||||
}
|
||||
return resolved;
|
||||
}
|
||||
|
||||
export function sanitizeStyle(propertyName: string, value: string): string | undefined {
|
||||
const property: string = String(propertyName || '').trim().toLowerCase();
|
||||
const styleValue: string = String(value || '').trim();
|
||||
if (AllowedStyles.indexOf(property) < 0 || !styleValue || styleValue.length > 512) {
|
||||
return undefined;
|
||||
}
|
||||
if (/[\u0000-\u001f\u007f]/.test(styleValue)
|
||||
|| /(url\s*\(|expression\s*\(|javascript\s*:|@import|behavior\s*:|-moz-binding)/i.test(styleValue)) {
|
||||
return undefined;
|
||||
}
|
||||
return styleValue;
|
||||
}
|
||||
|
||||
function createEmptyConfig(): ICustomBrandingConfig {
|
||||
return {
|
||||
schemaVersion: BrandingSchemaVersion,
|
||||
enabled: true,
|
||||
debug: false,
|
||||
allowedCssHosts: [],
|
||||
cssfiles: [],
|
||||
placeholdertop: { elements: [] },
|
||||
placeholderbottom: { elements: [] }
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeHosts(value: any): string[] {
|
||||
if (!Array.isArray(value)) {
|
||||
return [];
|
||||
}
|
||||
const result: string[] = [];
|
||||
for (let i: number = 0; i < value.length; i++) {
|
||||
const host: string = String(value[i] || '').trim().toLowerCase().replace(/^https?:\/\//, '').replace(/\/.*$/, '');
|
||||
if (/^[a-z0-9.-]+(?::\d+)?$/.test(host) && result.indexOf(host) < 0) {
|
||||
result.push(host);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function normalizeCssFiles(
|
||||
value: any,
|
||||
siteCollectionUrl: string,
|
||||
allowedCssHosts: string[],
|
||||
warnings: string[]
|
||||
): ICssFile[] {
|
||||
if (!Array.isArray(value)) {
|
||||
return [];
|
||||
}
|
||||
const result: ICssFile[] = [];
|
||||
const seen: string[] = [];
|
||||
for (let i: number = 0; i < value.length && result.length < 20; i++) {
|
||||
const item: any = value[i];
|
||||
const path: string = sanitizeStylesheetUrl(item && item.path, siteCollectionUrl, allowedCssHosts);
|
||||
if (!path) {
|
||||
warnings.push('Stylesheet at index ' + i + ' was rejected.');
|
||||
continue;
|
||||
}
|
||||
const normalizedKey: string = path.toLowerCase();
|
||||
if (seen.indexOf(normalizedKey) >= 0) {
|
||||
continue;
|
||||
}
|
||||
seen.push(normalizedKey);
|
||||
const media: string = item && typeof item.media === 'string' && /^[a-z0-9 (),.:/-]{1,80}$/i.test(item.media)
|
||||
? item.media.trim()
|
||||
: 'all';
|
||||
result.push({ path: path, media: media });
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function normalizeElements(value: any[], depth: number, state: INormalizationState): IBrandingElement[] {
|
||||
const result: IBrandingElement[] = [];
|
||||
if (!Array.isArray(value) || depth > MaxBrandingDepth) {
|
||||
if (depth > MaxBrandingDepth) {
|
||||
state.warnings.push('Maximum element depth exceeded.');
|
||||
}
|
||||
return result;
|
||||
}
|
||||
for (let i: number = 0; i < value.length && state.count < MaxBrandingElements; i++) {
|
||||
const normalized: IBrandingElement = normalizeElement(value[i], depth, state);
|
||||
if (normalized) {
|
||||
result.push(normalized);
|
||||
}
|
||||
}
|
||||
if (state.count >= MaxBrandingElements) {
|
||||
state.warnings.push('Maximum element count reached.');
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function normalizeElement(value: any, depth: number, state: INormalizationState): IBrandingElement | undefined {
|
||||
if (!value || typeof value !== 'object') {
|
||||
state.warnings.push('Invalid element was ignored.');
|
||||
return undefined;
|
||||
}
|
||||
const tag: string = String(value.type || '').trim().toLowerCase();
|
||||
if (AllowedTags.indexOf(tag) < 0) {
|
||||
state.warnings.push('Element type "' + tag + '" was rejected.');
|
||||
return undefined;
|
||||
}
|
||||
state.count++;
|
||||
const attributes: { [key: string]: string } = normalizeAttributes(tag, value.attributes, state);
|
||||
if (tag === 'img' && attributes.alt === undefined) {
|
||||
state.warnings.push('Image without alt attribute was rejected.');
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const styles: { [key: string]: string } = {};
|
||||
if (value.styles && typeof value.styles === 'object') {
|
||||
for (const styleName in value.styles) {
|
||||
if (value.styles.hasOwnProperty(styleName)) {
|
||||
const safeStyle: string = sanitizeStyle(styleName, value.styles[styleName]);
|
||||
if (safeStyle) {
|
||||
styles[styleName.toLowerCase()] = safeStyle;
|
||||
} else {
|
||||
state.warnings.push('Style "' + styleName + '" was rejected.');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const content: string = value.content === undefined || value.content === null
|
||||
? ''
|
||||
: String(value.content).substring(0, 4000);
|
||||
const children: IBrandingElement[] = tag === 'img'
|
||||
? []
|
||||
: normalizeElements(value.children, depth + 1, state);
|
||||
if ((tag === 'a' || tag === 'button') && !content && children.length === 0 && !attributes['aria-label']) {
|
||||
state.warnings.push('Empty interactive element was rejected.');
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return {
|
||||
type: tag as BrandingElementType,
|
||||
content: content || undefined,
|
||||
attributes: hasKeys(attributes) ? attributes : undefined,
|
||||
styles: hasKeys(styles) ? styles : undefined,
|
||||
children: children.length > 0 ? children : undefined
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeAttributes(tag: string, value: any, state: INormalizationState): { [key: string]: string } {
|
||||
const result: { [key: string]: string } = {};
|
||||
if (!value || typeof value !== 'object') {
|
||||
if (tag === 'button') { result.type = 'button'; }
|
||||
return result;
|
||||
}
|
||||
for (const rawName in value) {
|
||||
if (!value.hasOwnProperty(rawName)) { continue; }
|
||||
const name: string = String(rawName || '').trim().toLowerCase();
|
||||
const rawValue: string = String(value[rawName] === undefined ? '' : value[rawName]).substring(0, 2048);
|
||||
if (name.indexOf('on') === 0 || !isAttributeAllowed(tag, name)) {
|
||||
state.warnings.push('Attribute "' + name + '" was rejected.');
|
||||
continue;
|
||||
}
|
||||
if (name === 'href' || name === 'src') {
|
||||
const safeUrl: string = sanitizeNavigationUrl(rawValue, state.siteCollectionUrl, name === 'href');
|
||||
if (safeUrl) { result[name] = safeUrl; } else { state.warnings.push('URL attribute was rejected.'); }
|
||||
} else if (name === 'target') {
|
||||
if (rawValue === '_blank' || rawValue === '_self') { result[name] = rawValue; }
|
||||
} else if (name === 'id' || name === 'class') {
|
||||
if (/^[a-z0-9 _-]{1,256}$/i.test(rawValue)) { result[name] = rawValue; }
|
||||
} else if (name === 'width' || name === 'height') {
|
||||
if (/^\d{1,4}$/.test(rawValue)) { result[name] = rawValue; }
|
||||
} else if (name === 'aria-hidden') {
|
||||
if (rawValue === 'true' || rawValue === 'false') { result[name] = rawValue; }
|
||||
} else if (name === 'type' && tag === 'button') {
|
||||
result.type = 'button';
|
||||
} else {
|
||||
result[name] = rawValue;
|
||||
}
|
||||
}
|
||||
if (tag === 'button') { result.type = 'button'; }
|
||||
if (tag === 'a' && result.target === '_blank') { result.rel = 'noopener noreferrer'; }
|
||||
return result;
|
||||
}
|
||||
|
||||
function isAttributeAllowed(tag: string, name: string): boolean {
|
||||
if (GlobalAttributes.indexOf(name) >= 0) { return true; }
|
||||
if (tag === 'a') { return ['href', 'target'].indexOf(name) >= 0; }
|
||||
if (tag === 'img') { return ['src', 'alt', 'width', 'height'].indexOf(name) >= 0; }
|
||||
if (tag === 'button') { return ['type', 'disabled', 'aria-expanded', 'aria-controls'].indexOf(name) >= 0; }
|
||||
return false;
|
||||
}
|
||||
|
||||
function hasKeys(value: { [key: string]: string }): boolean {
|
||||
for (const key in value) {
|
||||
if (value.hasOwnProperty(key)) { return true; }
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user