Sanitizing a dynamic URL with Angular's DomSanitizer without the bypassSecurityTrustUrl

Question

Using Angular 13, I have a dynamic URL that loads into an iframe's SRC attribute. I need to sanitize this url (of course) before hand. I tried the following (pseudo code):

DomSanitizer.sanitize(SecurityContext.RESOURCE_URL, 'myurl')

This throws the following error:

unsafe value used in a resource URL context

I cannot use the bypassSecurityTrustResourceUrl as SonarQube marks it as a Security Hotspot. This is what I'm trying to fix.

Most of the examples I've found here recommend using the bypass and I wanted to know if there was a way not to do so.

Thanks in advance

kemsky · Accepted Answer · 2023-04-11 15:16:43Z

1

SecurityContext.RESOURCE_URL throws error when input is unsafe, this is by design, it indicates error in your application because in this case URL is expected to always be safe. You have to understand why it complains, maybe your URL is really unsafe. If URL does not depend on user input in any way then you can actually use bypassSecurityTrustResourceUrl.

You can use SecurityContext.URL, but it can silently truncate your URL, potentially removing valuable information bits from URL because built-in sanitizer is relatively dumb.

You can use a more intelligent third party sanitizer like DOMPurify.

answered Apr 11, 2023 at 15:16

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris Hamilton · Accepted Answer · 2023-04-11 00:15:45Z

Use SecurityContext.URL instead.

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    console.log(
      this.sanitizer.sanitize(
        SecurityContext.URL,
        "javascript:alert('You've been hacked!');"
      )
    );
  }

Outputs:

WARNING: sanitizing unsafe URL value javascript:alert('You've been hacked!'); (see https://g.co/ng/security#xss)

unsafe:javascript:alert('You've been hacked!');

Example: https://stackblitz.com/edit/angular-qymboh?file=src/main.ts

From https://angular.io/guide/security#sanitization-and-security-contexts:

Angular defines the following security contexts:

SECURITY CONTEXTS	DETAILS
HTML	Used when interpreting a value as HTML, for example, when binding to innerHtml.
Style	Used when binding CSS into the style property.
URL	Used for URL properties, such as `<a href>`.
Resource URL	A URL that is loaded and executed as code, for example, in `<script src>`.

Angular sanitizes untrusted values for HTML, styles, and URLs. Sanitizing resource URLs isn't possible because they contain arbitrary code. In development mode, Angular prints a console warning when it has to change a value during sanitization.

Collectives™ on Stack Overflow

Sanitizing a dynamic URL with Angular's DomSanitizer without the bypassSecurityTrustUrl

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related