Angular Error: unsafe value used in a resource URL context

Screenshot 2017-09-25 15.15.30

Ok, when you get this error you are probably trying to use url variable in you template. The most elegant way to fix this is use pipe to bypass security. In this example we will pass url variable into iframe src.

First of all we will create our pipe. We are injecting the DomSanitizer service, SecurityContext and executing the sanitize and bypassSecurityTrustResourceUrl method to sanitize and bypass security to trust the given value to be a safe style URL.

Note: calling these methods with untrusted USER DATA exposes your application to XSS security risks!

Now add you pipe to app.module:

Then just use it!

You can create pipes or implement logic for other contexts:

SecurityContext.NONE
SecurityContext.HTML
SecurityContext.STYLE
SecurityContext.SCRIPT
SecurityContext.URL
SecurityContext.RESOURCE_URL

And that’s all.

Related Post

Convert HEIC to PNG on Right Click for Free Convert HEIC to PNG on Right-Click In iOS 11 Apple is replacing the PNG image format with the new HEIC alternative. But what to do when device or pr...
Free Better Battery Stats and Time Remaining for M... Better Battery Stats and Time Remaining for Mac OS TL;DR; Do you miss the time remaining indicator on your MacBook, MacBook Air, or MacBook Pro? He...
Convert HEIC to JPG on Right Click for Free Convert HEIC to JPG on Right-Click In iOS 11 Apple is replacing the JPEG image format with the new HEIC alternative. But what to do when device or p...
PPTP VPN on MAC OS X Sierra, High Sierra and Mojav... PPTP VPN for Mac OS X Introduction PPTP VPN is no longer supported on macOS Sierra and High Sierra and that is just fine, because there are some se...
MacBook wifi issue – OS X keeps reconnecting Last few weeks I was facing annoying wifi problems. My mac was reconnecting every 5 minutes. On top of that BSSID was reseting so I saw BSSID changing...
Right-Click to Translate (Look Up) with Google Tra... If you are not native english speaker, you may be frustrated with default "look up" options you get after selecting a text and right clicking. There a...
Buy me a coffeeOut of coffee 😱, please help!