Building more secure web apps with ‘Content Security Policy’
Building more secure web apps with ‘Content Security Policy’by Simon Olofsson
Now you could go down the hard route and try to parse the embedded content the user has entered and forbid certain input. A cumbersome and error prone undertaking. This is where Content Security Policy (CSP) steps in and helps you define the resources that are allowed to load on your site.
Other directives specify the allowed sources for styles, images, fonts, media, or frames. The sources can be specified with literal domain names, wildcards, nonces, or hashes. And there are even more directives and sources available. A pretty useful directive, for example, allows the specification of a report URI where violations are sent to.
A somewhat special directive is “frame-ancestors”. This specifies the valid sources from where a site can be embedded. It’s related to the “X-Frame-Options” HTTP Header but circumvents some of its shortcomings.
If you want to secure your web app and have full control over the loaded resources you should definitely dive deeper into the CSP docs. MDN provides a useful introduction at https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP and https://content-security-policy.com/ lists all possible directives and sources with explanations and examples.