WEBVTT

00:00:01.541 --> 00:00:04.874
Setting the style-src to none is too

00:00:04.874 --> 00:00:08.541
strict for this application. Luckily there

00:00:08.541 --> 00:00:11.874
are some more options. Star means to allow

00:00:11.874 --> 00:00:15.207
all URLs, basically allowing the default

00:00:15.207 --> 00:00:17.540
browser behavior. Self restricts the

00:00:17.540 --> 00:00:20.416
loading of CSS to the URL your application

00:00:20.416 --> 00:00:24.291
is running on, called the origin. We

00:00:24.291 --> 00:00:28.540
already saw none. On top of that, you can

00:00:28.540 --> 00:00:31.255
configure other URLs that are an exception

00:00:31.255 --> 00:00:35.398
to the rule. Let's change our CSS policy

00:00:35.398 --> 00:00:39.041
to self, and also specify the URL where

00:00:39.041 --> 00:00:42.740
the bootstrap file comes from. By the way,

00:00:42.740 --> 00:00:45.940
you can specify more than one URL by

00:00:45.940 --> 00:00:48.904
separating them with spaces. When I run

00:00:48.904 --> 00:00:52.086
again, things are better, but not quite

00:00:52.086 --> 00:00:55.086
right. The error about the inline CSS is

00:00:55.086 --> 00:00:57.826
still in the console, even though the

00:00:57.826 --> 00:01:02.207
policy now says self, inline CSS is still

00:01:02.207 --> 00:01:05.255
not allowed. If you want to allow that

00:01:05.255 --> 00:01:08.166
too, you can add unsafe inline to the

00:01:08.166 --> 00:01:11.112
policy, but it's called unsafe for a

00:01:11.112 --> 00:01:14.541
reason. Enabling it leaves a door wide

00:01:14.541 --> 00:01:18.340
open for CSS injection. Best practice is

00:01:18.340 --> 00:01:22.941
to put all CSS in separate files. Here

00:01:22.941 --> 00:01:25.741
I've refactored the app. I've moved the

00:01:25.741 --> 00:01:28.940
inline styles to the separate site.css

00:01:28.940 --> 00:01:32.207
file, and I applied the CSS classes

00:01:32.207 --> 00:01:36.541
specified in there on the HTML elements.

00:01:36.541 --> 00:01:39.969
I've also changed the progress bar. The

00:01:39.969 --> 00:01:42.112
bootstrap progress bar needs inline

00:01:42.112 --> 00:01:45.112
styling to set the percentage of the

00:01:45.112 --> 00:01:48.041
progress, which violates the CSP. The

00:01:48.041 --> 00:01:51.041
HTML5 progress element uses a value

00:01:51.041 --> 00:01:53.540
attribute. When I now run without the

00:01:53.540 --> 00:01:56.541
unsafe online option, it works as before.

00:01:56.541 --> 00:01:59.540
CSP can be used not only to limit the

00:01:59.540 --> 00:02:02.416
loading of CSS, you can also restrict the

00:02:02.416 --> 00:02:04.874
loading of JavaScript with the script-src

00:02:04.874 --> 00:02:08.112
option in exactly the same way. In fact,

00:02:08.112 --> 00:02:10.741
we can just add script-src to the policy

00:02:10.741 --> 00:02:13.941
like this and get rid of a possible way to

00:02:13.941 --> 00:02:17.041
do XSS, because script injection won't be

00:02:17.041 --> 00:02:19.683
allowed by the browser anymore, unless you

00:02:19.683 --> 00:02:23.041
specify unsafe inline, of course. You can

00:02:23.041 --> 00:02:25.166
do exactly the same for images, media,

00:02:25.166 --> 00:02:30.041
such as audio and video, and fonts. All

00:02:30.041 --> 00:02:32.541
content security policies have default-src

00:02:32.541 --> 00:02:35.340
as the fallback policy. That means if a

00:02:35.340 --> 00:02:38.086
policy for a certain content type is not

00:02:38.086 --> 00:02:40.541
present, CSP will look if there's a

00:02:40.541 --> 00:02:42.995
default source present in the policy. If

00:02:42.995 --> 00:02:46.631
there is, it will apply that to that

00:02:46.631 --> 00:02:48.904
content type. Putting all these options in

00:02:48.904 --> 00:02:52.041
the right order in your policy might be a

00:02:52.041 --> 00:02:55.112
challenge. That's why I recommend using a

00:02:55.112 --> 00:02:59.541
tool, for example, the one on this URL.

00:02:59.541 --> 00:03:02.166
Let's create a default policy with just

00:03:02.166 --> 00:03:05.207
self, and a policy for styles that is also

00:03:05.207 --> 00:03:08.874
self, but includes the bootstrap URL. This

00:03:08.874 --> 00:03:11.207
means that styles will get a specified

00:03:11.207 --> 00:03:14.318
policy, while other sources, like scripts,

00:03:14.318 --> 00:03:17.874
images, fonts, and media, fall back to the

00:03:17.874 --> 00:03:19.791
default source policy of self. Looking

00:03:19.791 --> 00:03:22.041
through the list, you can see there are

00:03:22.041 --> 00:03:24.874
more options for the policy than the one I

00:03:24.874 --> 00:03:26.874
already mentioned. Connect Source, for

00:03:26.874 --> 00:03:29.985
example, lets you specify a policy for the

00:03:29.985 --> 00:03:31.541
URLs that can be called from JavaScript.

00:03:31.541 --> 00:03:35.904
And we'll see Frame Source in action later

00:03:35.904 --> 00:03:38.291
in the module. The rest of the items in

00:03:38.291 --> 00:03:41.541
the list are for specialized scenarios.

00:03:41.541 --> 00:03:46.041
You can see what they do by pressing View

00:03:46.041 --> 00:03:49.722
Info. Be aware that not all options are

00:03:49.722 --> 00:03:53.041
supported by all browsers. You can check

00:03:53.041 --> 00:03:55.874
canIuse.com for that. Search for a content

00:03:55.874 --> 00:03:58.540
security policy, and select Sub-features.

00:03:58.541 --> 00:04:01.541
You can view browser compatibility for

00:04:01.541 --> 00:04:04.541
each of the options. There is one more

00:04:04.541 --> 00:04:06.541
thing I want to mention about the list.

00:04:06.541 --> 00:04:09.450
Another cool feature of CSP is that you

00:04:09.450 --> 00:04:13.874
can configure it to send reports of policy

00:04:13.874 --> 00:04:16.255
violations. Those reports are sent in JSON

00:04:16.255 --> 00:04:21.429
format to the URL you specify. It's also

00:04:21.429 --> 00:04:24.096
possible to only report about policy

00:04:24.096 --> 00:04:26.763
violations and not prevent the browser

00:04:26.763 --> 00:04:29.874
from loading the content. We will not use

00:04:29.874 --> 00:04:31.874
self-made middleware, but a websec

00:04:31.874 --> 00:04:35.112
middleware with its nice fluent API, just

00:04:35.112 --> 00:04:39.041
type app.UseCsp in the Configure method of

00:04:39.041 --> 00:04:42.041
your Startup class. Here I'm applying the

00:04:42.041 --> 00:04:45.541
same policy as before with a report URI.

00:04:45.541 --> 00:04:47.540
But because I'm already using middleware,

00:04:47.541 --> 00:04:53.541
I'll comment it out for now. Next up are

00:04:53.541 --> 00:04:55.541
clickjacking attacks.
