Thanks to visit codestin.com
Credit goes to github.com

Skip to content

refactor(core): align namespaced attribute validation and security schema contexts #68686

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
leonsenft merged 4 commits into from
May 18, 2026
Merged

refactor(core): align namespaced attribute validation and security schema contexts #68686

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b01dbd3
refactor(core): align namespaced attribute validation and security sc…
alan-agius4 May 12, 2026
f2e501e
fixup! refactor(core): align namespaced attribute validation and secu…
alan-agius4 May 13, 2026
5fa9201
fixup! refactor(core): align namespaced attribute validation and secu…
alan-agius4 May 18, 2026
1e73927
fixup! refactor(core): align namespaced attribute validation and secu…
alan-agius4 May 18, 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
14 changes: 8 additions & 6 deletions packages/compiler/src/schema/dom_element_schema_registry.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -448,12 +448,14 @@ export class DomElementSchemaRegistry extends ElementSchemaRegistry {
// property names do not have a security impact.
tagName = tagName.toLowerCase();
propName = propName.toLowerCase();
let ctx = SECURITY_SCHEMA()[tagName + '|' + propName];
if (ctx) {
return ctx;
}
ctx = SECURITY_SCHEMA()['*|' + propName];
return ctx ? ctx : SecurityContext.NONE;

const securitySchema = SECURITY_SCHEMA();
const ctx =
securitySchema[tagName + '|' + propName] ??
securitySchema['*|' + propName] ??
SecurityContext.NONE;

return ctx;
}

override getMappedPropName(propName: string): string {
Expand Down
219 changes: 100 additions & 119 deletions packages/compiler/src/schema/dom_security_schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,109 +20,82 @@ import {SecurityContext} from '../core';

/** Map from tagName|propertyName to SecurityContext. Properties applying to all tags use '*'. */
let _SECURITY_SCHEMA!: {[k: string]: SecurityContext};
const SVG_NAMESPACE = 'svg';
const MATH_ML_NAMESPACE = 'math';

export function SECURITY_SCHEMA(): {[k: string]: SecurityContext} {
if (!_SECURITY_SCHEMA) {
_SECURITY_SCHEMA = {};
// Case is insignificant below, all element and attribute names are lower-cased for lookup.

registerContext(SecurityContext.HTML, ['iframe|srcdoc', '*|innerHTML', '*|outerHTML']);
registerContext(SecurityContext.STYLE, ['*|style']);
registerContext(SecurityContext.HTML, /** Namespace */ undefined, [
['iframe', ['srcdoc']],
['*', ['innerHTML', 'outerHTML']],
]);
registerContext(SecurityContext.STYLE, /** Namespace */ undefined, [['*', ['style']]]);
// NB: no SCRIPT contexts here, they are never allowed due to the parser stripping them.
registerContext(SecurityContext.URL, [
'*|formAction',
'area|href',
'a|href',
'a|xlink:href',
'form|action',
registerContext(SecurityContext.URL, /** Namespace */ undefined, [
['*', ['formAction']],
['area', ['href']],
['a', ['href', 'xlink:href']],
['form', ['action']],

// The below two items are safe and should be removed but they require a G3 clean-up as a small number of tests fail.
['img', ['src']],
['video', ['src']],
]);

registerContext(SecurityContext.URL, MATH_ML_NAMESPACE, [
// MathML namespace
// https://crsrc.org/c/third_party/blink/renderer/core/sanitizer/sanitizer.cc;l=753-768;drc=b3eb16372dcd3317d65e9e0265015e322494edcd;bpv=1;bpt=1
'annotation|href',
'annotation|xlink:href',
'annotation-xml|href',
'annotation-xml|xlink:href',
'maction|href',
'maction|xlink:href',
'malignmark|href',
'malignmark|xlink:href',
'math|href',
'math|xlink:href',
'mroot|href',
'mroot|xlink:href',
'msqrt|href',
'msqrt|xlink:href',
'merror|href',
'merror|xlink:href',
'mfrac|href',
'mfrac|xlink:href',
'mglyph|href',
'mglyph|xlink:href',
'msub|href',
'msub|xlink:href',
'msup|href',
'msup|xlink:href',
'msubsup|href',
'msubsup|xlink:href',
'mmultiscripts|href',
'mmultiscripts|xlink:href',
'mprescripts|href',
'mprescripts|xlink:href',
'mi|href',
'mi|xlink:href',
'mn|href',
'mn|xlink:href',
'mo|href',
'mo|xlink:href',
'mpadded|href',
'mpadded|xlink:href',
'mphantom|href',
'mphantom|xlink:href',
'mrow|href',
'mrow|xlink:href',
'ms|href',
'ms|xlink:href',
'mspace|href',
'mspace|xlink:href',
'mstyle|href',
'mstyle|xlink:href',
'mtable|href',
'mtable|xlink:href',
'mtd|href',
'mtd|xlink:href',
'mtr|href',
'mtr|xlink:href',
'mtext|href',
'mtext|xlink:href',
'mover|href',
'mover|xlink:href',
'munder|href',
'munder|xlink:href',
'munderover|href',
'munderover|xlink:href',
'semantics|href',
'semantics|xlink:href',
'none|href',
'none|xlink:href',
['annotation', ['href', 'xlink:href']],
['annotation-xml', ['href', 'xlink:href']],
['maction', ['href', 'xlink:href']],
['malignmark', ['href', 'xlink:href']],
['math', ['href', 'xlink:href']],
['mroot', ['href', 'xlink:href']],
['msqrt', ['href', 'xlink:href']],
['merror', ['href', 'xlink:href']],
['mfrac', ['href', 'xlink:href']],
['mglyph', ['href', 'xlink:href']],
['msub', ['href', 'xlink:href']],
['msup', ['href', 'xlink:href']],
['msubsup', ['href', 'xlink:href']],
['mmultiscripts', ['href', 'xlink:href']],
['mprescripts', ['href', 'xlink:href']],
['mi', ['href', 'xlink:href']],
['mn', ['href', 'xlink:href']],
['mo', ['href', 'xlink:href']],
['mpadded', ['href', 'xlink:href']],
['mphantom', ['href', 'xlink:href']],
['mrow', ['href', 'xlink:href']],
['ms', ['href', 'xlink:href']],
['mspace', ['href', 'xlink:href']],
['mstyle', ['href', 'xlink:href']],
['mtable', ['href', 'xlink:href']],
['mtd', ['href', 'xlink:href']],
['mtr', ['href', 'xlink:href']],
['mtext', ['href', 'xlink:href']],
['mover', ['href', 'xlink:href']],
['munder', ['href', 'xlink:href']],
['munderover', ['href', 'xlink:href']],
['semantics', ['href', 'xlink:href']],
['none', ['href', 'xlink:href']],
]);

// The below two items are safe and should be removed but they require a G3 clean-up as a small number of tests fail.
'img|src',
'video|src',
registerContext(SecurityContext.RESOURCE_URL, /** Namespace */ undefined, [
['base', ['href']],
['embed', ['src']],
['frame', ['src']],
['iframe', ['src']],
['link', ['href']],
['object', ['codebase', 'data']],
]);

registerContext(SecurityContext.RESOURCE_URL, [
'base|href',
'embed|src',
'frame|src',
'iframe|src',
'link|href',
'object|codebase',
'object|data',
'script|src',
// The below two are for Script SVG
// See: https://developer.mozilla.org/en-US/docs/Web/API/SVGScriptElement/href
'script|href',
'script|xlink:href',
// The below are for Script SVG
// See: https://developer.mozilla.org/en-US/docs/Web/API/SVGScriptElement/href
registerContext(SecurityContext.RESOURCE_URL, SVG_NAMESPACE, [
['script', ['src', 'href', 'xlink:href']],
]);

// Keep this in sync with SECURITY_SENSITIVE_ELEMENTS in packages/core/src/sanitization/sanitization.ts
Expand All @@ -133,40 +106,48 @@ export function SECURITY_SCHEMA(): {[k: string]: SecurityContext} {
// against the set that requires sanitization.
// These are unsafe as `attributeName` can be `href` or `xlink:href`
// See: http://b/463880509#comment7
registerContext(SecurityContext.ATTRIBUTE_NO_BINDING, [
'animate|attributeName',
'animate|values',
'animate|to',
'animate|from',
'set|to',
'set|attributeName',
'animateMotion|attributeName',
'animateTransform|attributeName',

'unknown|attributeName',
'unknown|values',
'unknown|to',
'unknown|from',

'iframe|sandbox',
'iframe|allow',
'iframe|allowFullscreen',
'iframe|referrerPolicy',
'iframe|csp',
'iframe|fetchPriority',
registerContext(SecurityContext.ATTRIBUTE_NO_BINDING, SVG_NAMESPACE, [
['animate', ['attributeName', 'values', 'to', 'from']],
['set', ['to', 'attributeName']],
['animateMotion', ['attributeName']],
['animateTransform', ['attributeName']],
]);

'unknown|sandbox',
'unknown|allow',
'unknown|allowFullscreen',
'unknown|referrerPolicy',
'unknown|csp',
'unknown|fetchPriority',
registerContext(SecurityContext.ATTRIBUTE_NO_BINDING, /** Namespace */ undefined, [
[
'unknown',
[
'attributeName',
'values',
'to',
'from',
'sandbox',
'allow',
'allowFullscreen',
'referrerPolicy',
'csp',
'fetchPriority',
],
],
['iframe', ['sandbox', 'allow', 'allowFullscreen', 'referrerPolicy', 'csp', 'fetchPriority']],
]);
}

return _SECURITY_SCHEMA;
}

function registerContext(ctx: SecurityContext, specs: string[]) {
for (const spec of specs) _SECURITY_SCHEMA[spec.toLowerCase()] = ctx;
function registerContext(
ctx: SecurityContext,
namespace: string | undefined,
specs: readonly [tagName: string, attributeNames: readonly string[]][],
): void {
for (const [element, attributeNames] of specs) {
let tagName =
namespace && element !== '*' && element !== 'unknown' ? `:${namespace}:${element}` : element;
tagName = tagName.toLowerCase();

for (const attr of attributeNames) {
_SECURITY_SCHEMA[`${tagName}|${attr.toLowerCase()}`] = ctx;
}
}
}
20 changes: 19 additions & 1 deletion packages/compiler/src/template/pipeline/src/ingest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
type ViewCompilationUnit,
} from './compilation';
import {BINARY_OPERATORS, namespaceForKey, prefixWithNamespace} from './conversion';
import {MATH_ML_NAMESPACE, SVG_NAMESPACE} from './namespaces';

// Schema containing DOM elements and their properties.
const domSchema = new DomElementSchemaRegistry();
Expand Down Expand Up @@ -1328,7 +1329,24 @@ function ingestElementBindings(

for (const attr of element.attributes) {
// Attribute literal bindings, such as `attr.foo="bar"`.
const securityContext = domSchema.securityContext(element.name, attr.name, true);
const [ns, elementName] = splitNsName(element.name);
let namespace = ns;
if (!ns) {
switch (op.namespace) {
case ir.Namespace.SVG:
namespace = SVG_NAMESPACE;
break;
case ir.Namespace.Math:
namespace = MATH_ML_NAMESPACE;
break;
}
}

const securityContext = domSchema.securityContext(
namespace ? `:${namespace}:${elementName}` : elementName,
attr.name,
true,
);
bindings.push(
ir.createBindingOp(
op.xref,
Expand Down
10 changes: 10 additions & 0 deletions packages/compiler/src/template/pipeline/src/namespaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/

export const SVG_NAMESPACE = 'svg';
export const MATH_ML_NAMESPACE = 'math';
41 changes: 32 additions & 9 deletions packages/compiler/src/template_parser/binding_parser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,13 @@ import {
VariableBinding,
} from '../expression_parser/ast';
import {Parser} from '../expression_parser/parser';
import {mergeNsAndName} from '../ml_parser/tags';
import {mergeNsAndName, splitNsName} from '../ml_parser/tags';
import {InterpolatedAttributeToken, InterpolatedTextToken} from '../ml_parser/tokens';
import {ParseError, ParseErrorLevel, ParseSourceSpan} from '../parse_util';
import {ElementSchemaRegistry} from '../schema/element_schema_registry';
import {CssSelector} from '../directive_matching';
import {splitAtColon, splitAtPeriod} from '../util';
import {MATH_ML_NAMESPACE, SVG_NAMESPACE} from '../template/pipeline/src/namespaces';

const PROPERTY_PARTS_SEPARATOR = '.';
const ATTRIBUTE_PREFIX = 'attr';
Expand Down Expand Up @@ -878,20 +879,42 @@ export function calcPossibleSecurityContexts(
isAttribute: boolean,
): SecurityContext[] {
let ctxs: SecurityContext[];
const nameToContext = (elName: string) => registry.securityContext(elName, propName, isAttribute);

if (selector === null) {
ctxs = registry.allKnownElementNames().map(nameToContext);
const [namespaceKey, baseSelector] = selector ? splitNsName(selector, false) : [null, selector];
const nameToContext = (elName: string) => {
const [nsStr, name] = splitNsName(elName, false);
const ns = nsStr ?? namespaceKey;
const fullName = ns ? `:${ns}:${name}` : name;

@dgp1130 dgp1130 May 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider: The constant splitting / joining of the namespace makes me worried we can easily introduce a bug here. Especially with namespace being optional and easily omitted.

Would it be worth moving away from the "stringly" types here and make something like:

interface Tag {
  tagName: string;
  namespace?: string;
}

And then we can use this type in the relevant functions with consistent serialize / deserialize functions to make sure we never drop the namespace and are always checking it as expected?

I have a similar concern with casing, where we might forget a .toLowerCase call, maybe there's a way to standardize that part too?

@alan-agius4 alan-agius4 May 13, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could definitely do that, but that's quite a chunky refactor. Since the elementName as a string is used in a lot of places.

return registry.securityContext(fullName, propName, isAttribute);
};

const allKnownElements = registry.allKnownElementNames();
if (baseSelector === null) {
ctxs = allKnownElements.map(nameToContext);
} else {
ctxs = [];
CssSelector.parse(selector).forEach((selector) => {
const elementNames = selector.element ? [selector.element] : registry.allKnownElementNames();
CssSelector.parse(baseSelector).forEach((selector) => {
let elementNames = selector.element ? [selector.element] : allKnownElements;
if (selector.element && !registry.hasElement(selector.element, [])) {
const svgElement = `:${SVG_NAMESPACE}:${selector.element}`;
const mathElement = `:${MATH_ML_NAMESPACE}:${selector.element}`;
if (registry.hasElement(svgElement, [])) {
elementNames = [svgElement];
} else if (registry.hasElement(mathElement, [])) {
elementNames = [mathElement];
}
Comment on lines +900 to +904

@dgp1130 dgp1130 May 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question: Were these intended to be elementNames.push({svg,math}Element)? Why else is elementNames an array?

@alan-agius4 alan-agius4 May 13, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is to keep the existing behaviour, the array is initialized with allKnownElements when the selector has no element.

}
const notElementNames = new Set(
selector.notSelectors
.filter((selector) => selector.isElementSelector())
.map((selector) => selector.element),
.map((selector) => selector.element?.toLowerCase()),
);
const possibleElementNames = elementNames.filter((elName) => !notElementNames.has(elName));
const possibleElementNames = elementNames.filter((elName) => {
const elNameLowerCase = elName.toLowerCase();
return (
!notElementNames.has(elNameLowerCase) &&
!notElementNames.has(splitNsName(elNameLowerCase)[1])
);
});

ctxs.push(...possibleElementNames.map(nameToContext));
});
Expand Down
Loading
Loading