default-src "none"; script-src "self"; img-src "self" example.com; style-src fonts.googleapis.com; font-src fonts.gstatic.com;
<script src="/js/app.js"></script>: allow
because script-src "self";
fetch("https://api.website.com/data"): doesn't allow
because default-src "none", connect-src "none";
@font-face {url("fonts/my-font.woff")}: doesn't allow
because font-src fonts.gstatic.com;
doesn't allow self
<img src="data:image/svg+xml;..." />: doesn't allow
because img-src "self" example.com
, in order to allow, you need to do img-src 'self' example.com data:;
<style>body {font-family: 'Roboto'}</style>: doesn't allow
because style-src fonts.googleapis.com
, no self
;
<iframe src="https://embed.example.com"></iframe>: doesn't allow
because default-src "none"; frame-src "none"
<link rel="stylesheet" href="https://fonts.googleapis.com..>: allow
because style-src fonts.googleapis.com;
<video src=https://videos.example.com/..."></video>: doesn't allow
because default-src "none"; media-src "none";