Intermediate LevelHTML & Semantic Web

How do you enforce a Content Security Policy (CSP) using HTML meta tags?

Q: How do you enforce a Content Security Policy (CSP) using HTML meta tags?

A **Content Security Policy (CSP)** restricts where scripts, stylesheets, images, and worker threads can be loaded from, mitigating Cross-Site Scripting (XSS) and data injection attacks. ### Meta Tag CSP: Declare CSP in HTML: ' '. *Note*: Frame ancestry ('frame-ancestors') cannot be set via meta CSP; it requires HTTP headers. Key Takeaway: Use Content Security Policy meta tags to restrict resource loading origins and mitigate XSS vulnerabilities.

❓ Interview Prompt: Explain <meta http-equiv="Content-Security-Policy">, restricting script/style origins, and XSS defense.

A Content Security Policy (CSP) restricts where scripts, stylesheets, images, and worker threads can be loaded from, mitigating Cross-Site Scripting (XSS) and data injection attacks.

Meta Tag CSP:

Declare CSP in HTML: '<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdn.example.com;">'.

Note: Frame ancestry ('frame-ancestors') cannot be set via meta CSP; it requires HTTP headers.

Code Implementation Example

html

<head>
  <!-- HTML Meta Content Security Policy -->
  <meta 
    http-equiv="Content-Security-Policy" 
    content="default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' 'unsafe-inline';"
  >
</head>

💡Enforcing Content Security Policy rules via HTML meta http-equiv tag.

🎯 Interview Key Takeaway

Use Content Security Policy meta tags to restrict resource loading origins and mitigate XSS vulnerabilities.

#CSP#Content Security Policy#Security#meta#Intermediate

Back to all HTML & Semantic Web Questions→

How do you enforce a Content Security Policy (CSP) using HTML meta tags?

Meta Tag CSP:

Code Implementation Example

More HTML & Semantic Web Interview Questions

What is Semantic HTML and why is it essential for modern web applications?

What is <!DOCTYPE html> and what happens if it is omitted?

What is the difference between inline and block-level HTML elements?