Prep 12: CSP Directives

Due: Wednesday, Apr 30th

Read

• Content Security Policy (CSP)
• CSP: style-src
• CSP: script-src
• CSP: img-src
• CSP: frame-src

Write

For this prep, you will use a variety of CSP directives to control what can and cannot be loaded into a web page.

Getting Started

1. Download and extract the provided source code: prep12.zip
2. Open index.html in the Live Server.

Your task is to create three versions of the provided HTML file with different combinations of CSP policies to allow content to be loaded selectively. Without any CSP policy, the page should look like the following:

Note

None of the screenshots include the <nav> elements at the top.

Here is a template you can use as a starting point for each of the exercises below. For convenience, the CSP directives are in the same order as the content in the screenshots. (The first row is CSS, the second row is JS, and the third row is images and frames).

<meta http-equiv="Content-Security-Policy" content="
  style-src 'self';
  script-src 'self';
  img-src 'self';
  frame-src 'self';
">

bootstrap.html

For the first version, create a copy of the index.html file named bootstrap.html. In this version, you'll block some remote elements and unsafe inline material.

• Allow CSS to be loaded only from remote sources.
• Allow JavaScript to be loaded only from the local site.
• Allow images from both the local site and remote sources.
• Allow <iframe> only if the source is from the local site.

With the correct policies, the page should look like the following:

noframe.html

For the next version, create noframe.html. This version should block all <iframe> elements, all images, and inline JavaScript. The resulting page should look as follows:

local.html

For the last version, create local.html. This version allows loading from the same site and also inline elements. This version will look very different because it will block the Bootstrap styling:

Submission

When you are finished, submit bootstrap.html, noframe.html, and local.html to Gradescope. Please make sure your name is on Line 5 of each file (in the <meta> tag).