Thursday, 20 December 2018

Bypass security of HTML import

I am importing an HTML snippet from a third party and embedding it into some placeholder outside my Angular 7 application. There's one link starting with javascript: inside the snippet that will be prefixed with unsafe: by Angular which breaks its functionality.

The DOMSanitizer of Angular only seems to provide a way to bypass security for HTML strings. However, in below method I'm just reading the DOM node and appending it to a different destination. So I'd need to have a solution for a DOM node.

According to my research, the inserted nodes are OK directly after the appendChild call, but a few ms after that Angular adds the unsafe:.

How can I bypass security for DOM nodes?

 private insertPart(componentImportLinkId: string, targetSelector: string): void {
    try {
      const linkElement: any = document.getElementById(componentImportLinkId);
      const componentContent = linkElement.import;
      const componentTemplate = componentContent.querySelector('template');
      const importedComponentTemplateClone = document.importNode(componentTemplate.content, true);
      const appendToElement = document.querySelector(targetSelector);
      appendToElement.appendChild(importedComponentTemplateClone);
    } catch (e) {
      console.error(`PortalLayoutComponent.insertPart: Can not insert '${targetSelector}'`, e);
    }
  }



from Bypass security of HTML import

No comments:

Post a Comment