CODEWITHSUNDEEP
angularhtml-sanitizingangular-sanitizer
Yuriy K.
Yuriy K.

Reputation: 241

How to check if html with iframes is safe?

I'm getting from API strings of html code which may contain embedded videos from the following services:

If I'm sure it is secure enough I can convert them to trusted SafeHtml (to bypass Angular's sanitizer):

this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(this.htmlFromApi);

And then place it on a page like this:

<div [innerHtml]="safeHtml"></div>

Questions:

  1. Which checks I have to perform to be sure this string is safe enough? (it doesn't contain embedded scripts and leads only to one of these four sites without any tricky redirections)?

  2. Does it make sense to add somehow these sites to exceptions of Angular's sanitizer? And how to do it if yes?

Thanks in advance!

p.s. I saw this similar question: How to check if string of HTML is safe? But I hope there is something more fresh and relevant to Angular best practices

Upvotes: 3

Views: 734

Answers (1)

Martin
Martin

Reputation: 22760

While not an angular specific answer; you want a Content Security Policy header on your website, to only allow cerain websites to be accessed via (i)frames.

Example:

Content-Security-Policy: 
         default-src 'self' https:; 
         script-src 'self' https:; 
         frame-src: https://*.youtube.com https://*.vimeo.com 
                    https://*.dailymotion.com https://*.prezi.com;

(Header is multi-lined for reading clarity only)

This CSP sets some rules for your website so that:

  • Default only allows references to the website itself ("self") and only via https.
  • Scripts can only be [securely accessed] files NOT inline scripting, and these files must be called from the same website.
  • (i)frames from the website can only call the specified domain names. I have put the Https address types here as that's best practise, and also you must note that this will *deny access to placeholder URLs such as https://y2u.be , but you can add these variations as you need.

The above CSP declaration does exactly what you require in your question, and so sidesteps your need to filter certain domains past the safeHtml sanitizer.

The sanitizer will still probably need to be passed - somehow - but I don't know angular so can't answer that detail.

Read more about the frame-src CSP directve.

Edit

A more flexible example for if users use non-TLS connections or if your website is not TLS secured, also including an example for short URLs, too:

Content-Security-Policy: 
         default-src 'self'; 
         script-src 'self'; 
         frame-src: https://*.youtube.com https://*.vimeo.com 
                    https://*.dailymotion.com https://*.prezi.com
                    http://*.youtube.com http://*.vimeo.com 
                    http://*.dailymotion.com http://*.prezi.com
                    https://youtu.be;

Upvotes: 2

Related Questions