Why does DomSanitizer not work for string value?

Question

Goal: Send string variable from Angular application(typesript) to iFrame living on another server so it can be used in a conditional

Question: How do I use DomSanitizer for a variable specifically?

Documentation states types are: HTML, Style, Script, Url. What if I just want to send a plain string variable? Documentation is not clear about this.

SecurityContext shows the same https://angular.io/api/core/SecurityContext . I tried script. I also tried sanitize method but it needs securitycontext.

I tried using Script but I get the error: Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss) at DomSanitizerImpl.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DomSanitizerImpl.sanitize

I read (http://g.co/ng/security#xss) and (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#Security_concerns) as well as other articles about domsanitizer, postmessage, Angular lifecycles, etc I have tried placing the code in different areas of the file, including onload etc.

chat.component.html:

<div class="iframe-container"> 
    <iframe id="iframe_chatui" src="{{ chatURL }}/loading.html" class="chatiframe" allow="microphone; camera"></iframe>
</div>

chat.component.ts:

ngAfterViewInit() {        
        this.safeScript = this.domSanitizer.bypassSecurityTrustScript(this.localeId);
        let frame = document.getElementById('iframe_chatui');           
    }

when I add the following, I get error: Cannot read property 'contentWindow' of null

let frame = document.getElementById('iframe_chatui') as HTMLIFrameElement;       
frame.contentWindow.postMessage(this.localeId, '*');

Why would you sanitize a string? That doesn't make sense. String is a string. — Roberto Zvjerković
Because I get the XSS error which poiints to documentation which tells me to Sanitize it. How do I not get the error if I don't sanitize? — angleUr
You should sanitize an URL. const toSanitize = chatURL+"/loading.html" — Roberto Zvjerković
Thanks! I'm sorry, I don't think I'm understanding why sanitize the url when its the value I want to pass, however I just applied what you said, but, I am still unable to postMessage to the iframe. No matter where I place it I get: Cannot read property 'contentWindow' of null — angleUr

ronakvp ronakvp · Accepted Answer · 2019-08-30T18:58:56

Try bypassing the angular security by using the bypassSecurityTrustResourceUrl. Then use this value from the function to call the iframe.

But be very careful, you are bypassing the inbuilt angular security mechanism. If you trust the URL, making sure that it comes only from your source then you can use the function.

Here is the link to the angular documentation: https://angular.io/api/platform-browser/DomSanitizer#bypassSecurityTrustResourceUrl

I do recomment reading about the URL attacks that can happen on the owasp website. Make sure your url passes the regex mentioned in the following link: https://www.owasp.org/index.php/OWASP_Validation_Regex_Repository

Why does DomSanitizer not work for string value?

1 Answers