CodeBlanks Logo Icon CodeBlanks
Login Register

Challenge - Security package

HTML course · Expert · Lesson 38/39

Write a secure page with CSP, referrer policy and noopener.

Security header package

The core HTML layer of web security has three pieces. <meta http-equiv="Content-Security-Policy" content="..."> declares external resource restrictions; it limits which scripts and styles may load. <meta name="referrer" content="..."> controls the referrer information sent with outbound links.

When outbound links use target="_blank", add rel="noopener noreferrer"; this prevents the new tab from reaching the opener object and modifying the page, and keeps the referrer private. Together these form a small but consistent security baseline.

Exercise Write the security package

Write a secure page skeleton. In head add a charset meta (charset="utf-8"), a viewport meta (name="viewport"), a CSP meta (http-equiv="Content-Security-Policy"), and a referrer meta (name="referrer"). In body place an external link that opens with target="_blank" and includes rel="noopener noreferrer".

Show example solution 
head has four metas, body has one safe external link.

Example solution:
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
  <meta name="referrer" content="no-referrer">
  <title>Secure Page</title>
</head>
<body>
  <a href="https://site.example" target="_blank" rel="noopener noreferrer">External link</a>
</body>

Test yourself

  1. Which meta tag declares CSP?

    • <meta name="csp" content="...">
    • <meta http-equiv="Content-Security-Policy" content="...">
    • <meta charset="csp">
    • <meta rel="csp">
    Show answer

    <meta http-equiv="Content-Security-Policy" content="..."> — Correct. CSP is declared with http-equiv="Content-Security-Policy".

  2. Make the external link safe

    <a href="https://site.example" target="_blank" ____>External link</a>
    Show answer 
    <a href="https://site.example" target="_blank" rel="noopener noreferrer">External link</a>

  3. Match the security concepts

    Content-Security-Policy
    External resource limits
    name="referrer"
    Referrer information limit
    noopener
    Blocks opener access
    noreferrer
    Hides referrer information

  4. What should be added to secure a target="_blank" link?

    • Only rel="noopener" is enough
    • The crossorigin attribute
    • The download attribute
    • rel="noopener noreferrer"
    Show answer

    rel="noopener noreferrer" — Correct. noopener cuts opener access, noreferrer cuts the referrer together.

All lessons in Expert

1 Advanced accessibility

  1. WCAG principles
  2. Keyboard navigation
  3. Live regions
  4. Dialog and modal
  5. Heading outline
  6. Summary - Accessible widget

2 Advanced ARIA patterns

  1. ARIA roles
  2. States and properties
  3. Grid and tree
  4. Tabs and accordion
  5. Menu and menubar
  6. Summary - Accessible tabpanel

3 Project: High-performance page

  1. Project: High-performance page
  2. Critical resource order
  3. Image optimization
  4. Template and noscript
  5. Project final - Performance page

4 Internationalization

  1. Lang and dir
  2. Hreflang strategy
  3. Bidi and bdo
  4. RTL-aware markup
  5. Multilingual SEO
  6. Summary - Multilingual page

5 Project: Secure page

  1. Project: Secure form page
  2. Rel noopener
  3. CSP meta
  4. Referrer policy
  5. Project final - Secure page

6 Advanced web components

  1. Custom element registry
  2. Slot and shadow boundary
  3. Declarative shadow DOM
  4. Form-associated custom element
  5. AOM and accessibility tree
  6. Summary - Component library skeleton

7 Expert final

  1. Challenge - Accessible dialog
  2. Challenge - ARIA tabpanel
  3. Challenge - Multilingual RTL
  4. Challenge - Security package
  5. Challenge - Expert capstone