override validateProperty(name: string): {error: boolean; msg?: string} {
  if (name.toLowerCase().startsWith('on')) {
    const msg =
      `Binding to event property '${name}' is disallowed for security reasons, ` +
      `please use (${name.slice(2)})=...` +
      `\nIf '${name}' is a directive input, make sure the directive is imported by the` +
      ` current module.`;
    return {error: true, msg: msg};
  } else {
    return {error: false};
  }
}

override validateAttribute(name: string): {error: boolean; msg?: string} {
  if (name.toLowerCase().startsWith('on')) {
    const msg =
      `Binding to event attribute '${name}' is disallowed for security reasons, ` +
      `please use (${name.slice(2)})=...`;
    return {error: true, msg: msg};
  } else {
    return {error: false};
  }
}

const bep = this.bindingParser.createBoundElementProperty(
  elementName,
  prop,
  /* skipValidation */ true,
  /* mapPropertyName */ false,
);

createBoundHostProperties(
  properties: HostProperties,
  sourceSpan: ParseSourceSpan,
): ParsedProperty[] | null {
  const boundProps: ParsedProperty[] = [];
  for (const propName of Object.keys(properties)) {
    const expression = properties[propName];
    if (typeof expression === 'string') {
      this.parsePropertyBinding(
        propName,
        expression,
        true,
        false,
        sourceSpan,
        sourceSpan.start.offset,
        undefined,
        [],
        boundProps,
        sourceSpan,
      );
    }
  }
  return boundProps;
}

export function elementAttributeInternal(
  tNode: TNode,
  lView: LView,
  name: string,
  value: any,
  sanitizer: SanitizerFn | null | undefined,
  namespace: string | null | undefined,
) {
  if (ngDevMode) {
    assertNotSame(value, NO_CHANGE as any, 'Incoming value should never be NO_CHANGE.');
    validateAgainstEventAttributes(name);
    assertTNodeType(
      tNode,
      TNodeType.Element,
      `Attempted to set attribute \`${name}\` on a container node. ` +
        `Host bindings are not valid on ng-container or ng-template.`,
    );
  }
  const element = getNativeByTNode(tNode, lView) as RElement;
  setElementAttribute(lView[RENDERER], element, namespace, tNode.value, name, value, sanitizer);
}

export function setElementAttribute(
  renderer: Renderer,
  element: RElement,
  namespace: string | null | undefined,
  tagName: string | null,
  name: string,
  value: any,
  sanitizer: SanitizerFn | null | undefined,
) {
  if (value == null) {
    renderer.removeAttribute(element, name, namespace);
  } else {
    const strValue =
      sanitizer == null ? renderStringify(value) : sanitizer(value, tagName || '', name);

    renderer.setAttribute(element, name, strValue as string, namespace);
  }
}

@Component({
  selector: 'marketing-cta-page',
  standalone: false,
  changeDetection: ChangeDetectionStrategy.Eager,
  template: `
    <section>
      <h1>{{ campaign.title }}</h1>
      <p id="campaign-origin">{{ campaign.origin }}</p>
      <button id="buy-now" type="button" [attr.onclick]="campaign.clickAction">
        {{ campaign.ctaLabel }}
      </button>
    </section>
  `,
})
class MarketingCtaPageComponent {
  campaign = {
    title: 'Spring Sale',
    origin: 'trusted CMS entry',
    ctaLabel: 'Buy now',
    clickAction: '',
  };
}

it('blocks the binding in development mode', () => {
  expect(() => {
    const fixture = TestBed.createComponent(MarketingCtaPageComponent);
    fixture.componentInstance.campaign.clickAction =
      "document.documentElement.setAttribute('data-realistic-xss','fired')";
    fixture.componentInstance.campaign.origin = 'attacker-controlled CMS entry';
    fixture.detectChanges();
  }).toThrowError(
    /Binding to event attribute 'onclick' is disallowed for security reasons, please use \(click\)=.../,
  );
});

it('turns attacker-controlled CMS data into browser-executed XSS in production mode', () => {
  globalRef.ngDevMode = false;

  const fixture = TestBed.createComponent(MarketingCtaPageComponent);
  fixture.componentInstance.campaign.origin = 'attacker-controlled CMS entry';
  fixture.componentInstance.campaign.clickAction =
    "document.documentElement.setAttribute('data-realistic-xss','fired')";
  fixture.detectChanges();

  const button = fixture.nativeElement.querySelector('#buy-now') as HTMLButtonElement;
  expect(button.getAttribute('onclick')).toBe(
    "document.documentElement.setAttribute('data-realistic-xss','fired')",
  );

  button.click();

  expect(document.documentElement.getAttribute('data-realistic-xss')).toBe('fired');
});

it('renders a trusted CMS handler string in production mode and executes it on click', () => {
  globalRef.ngDevMode = false;
  globalRef.demoSafeHandler = (campaignId: string) => {
    document.documentElement.setAttribute('data-safe-click', campaignId);
  };

  const fixture = TestBed.createComponent(MarketingCtaPageComponent);
  fixture.componentInstance.campaign.origin = 'trusted CMS entry';
  fixture.componentInstance.campaign.clickAction = `demoSafeHandler('spring-sale')`;
  fixture.detectChanges();

  const button = fixture.nativeElement.querySelector('#buy-now') as HTMLButtonElement;
  expect(button.getAttribute('onclick')).toBe(`demoSafeHandler('spring-sale')`);

  button.click();

  expect(document.documentElement.getAttribute('data-safe-click')).toBe('spring-sale');
});