How to Add Security Headers to a Website 2026

How to Add Security Headers to a Website is an important topic for anyone learning web security. Security headers are HTTP response headers that tell web browsers how they should handle your website and its resources. They can add an important layer of protection against attacks such as Cross-Site Scripting (XSS), clickjacking, MIME-type sniffing, and unwanted information disclosure.

If you are a beginner, you may think website security requires complicated code or expensive security tools. In reality, learning how to add security headers to a website is one of the simpler security improvements you can make at the server or application level.

Security headers do not replace secure coding, input validation, authentication, authorization, HTTPS, CSRF protection, or regular security testing. Instead, they provide additional browser-level controls that can reduce the impact of certain vulnerabilities.

In this tutorial, we will explain how to add security headers to a website, what the most important headers do, where to configure them, how to test them, and common mistakes beginners should avoid.

What Are Security Headers?

Before learning how to add security headers to a website, you should understand what security headers are.

HTTP headers are pieces of information exchanged between a browser and a web server. A server can send response headers along with an HTML page, CSS file, JavaScript file, image, API response, or other resource.

Security headers are response headers specifically used to improve the security and privacy of web applications.

For example:

X-Content-Type-Options: nosniff

This tells compatible browsers not to perform MIME-type sniffing and to respect the declared content type.

Similarly:

Strict-Transport-Security: max-age=31536000

instructs browsers to use HTTPS for the host for the specified period.

Learning how to add security headers to a website therefore means configuring your web server or application to return appropriate security-related HTTP headers.

Why Should You Add Security Headers to a Website?

There are several reasons why developers should understand how to add security headers to a website.

Security headers can:

• Reduce the impact of some XSS attacks.
• Help prevent clickjacking.
• Prevent MIME-type sniffing.
• Enforce HTTPS connections.
• Control referrer information.
• Restrict browser features.
• Control which resources a page can load.
• Improve protection against certain cross-origin attacks.
• Provide an additional layer of browser security.

The OWASP HTTP Headers Cheat Sheet explains how HTTP response headers can help prevent vulnerabilities including XSS, clickjacking, and information disclosure.

However, security headers are defense in depth. Adding headers does not make vulnerable application code automatically secure.

For example, if your application is vulnerable to SQL injection, adding CSP will not fix the SQL injection vulnerability. You should also follow secure development practices such as prepared statements and proper input handling.

How to Add Security Headers to a Website

The exact process for how to add security headers to a website depends on your hosting environment.

You may configure security headers through:

1. Apache .htaccess or server configuration.
2. Nginx configuration.
3. PHP application code.
4. Node.js or Express middleware.
5. Laravel middleware or server configuration.
6. WordPress security plugins or server configuration.
7. Cloud platforms and reverse proxies.
8. CDN or edge configuration.

The important concept is that the headers must be returned as HTTP response headers.

Do not simply place most security headers inside an HTML <meta> tag. For example, X-Frame-Options must be delivered as an HTTP response header; putting it in a meta element does not provide the intended protection.

1. Add the Content-Security-Policy Header

When learning how to add security headers to a website, Content Security Policy, commonly called CSP, is one of the most important headers to understand.

CSP controls which resources a browser is allowed to load for a page. It can help reduce the impact of Cross-Site Scripting and other injection attacks.

A simple example is:

Content-Security-Policy: default-src 'self';

This basic policy tells the browser that resources should generally come from the same origin.

However, real websites commonly use external services for:

• Google Fonts
• Analytics
• Payment gateways
• CDNs
• Embedded videos
• Maps
• Advertising platforms
• Third-party JavaScript

Therefore, blindly copying a restrictive CSP can break your website.

A more realistic example might look like:

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' https://fonts.example.com; img-src 'self' data: https:;

You should modify the policy according to the resources your website actually requires.

For stronger protection, modern guidance recommends strict CSP approaches such as nonce-based or hash-based policies rather than relying heavily on unsafe allowances.

If you are learning how to add security headers to a website, start with CSP in report-only mode where appropriate, identify violations, and then gradually enforce a tested policy.

2. Add the Strict-Transport-Security Header

The next important step in how to add security headers to a website is configuring HSTS.

HSTS stands for HTTP Strict Transport Security.

Example:

Strict-Transport-Security: max-age=31536000

This tells the browser that the website should only be accessed through HTTPS for the specified period.

For a site that is fully prepared for HTTPS, a longer policy may be used:

Strict-Transport-Security: max-age=31536000; includeSubDomains

Do not enable includeSubDomains or HSTS preload-related settings without understanding your domain and subdomain configuration.

For example, if one of your subdomains still requires HTTP, forcing HTTPS across all subdomains can cause problems.

Before implementing HSTS, make sure:

• Your website has a valid HTTPS certificate.
• HTTP redirects correctly to HTTPS.
• Important resources load through HTTPS.
• Your subdomains are HTTPS-ready if using includeSubDomains.
• Your application does not depend on insecure HTTP resources.

HSTS is a good example of why how to add security headers to a website is not simply about copying a list of headers. Each policy should match the actual website architecture.

3. Add X-Content-Type-Options

Another easy step in how to add security headers to a website is adding:

X-Content-Type-Options: nosniff

This header helps prevent MIME-type sniffing. The browser is instructed to respect the MIME type provided by the server instead of trying to determine another type by inspecting the content.

For example:

X-Content-Type-Options: nosniff

This is generally a simple security improvement and is commonly recommended for websites.

You should also make sure your server sends correct Content-Type values for your resources.

For example:

Content-Type: text/html

for HTML and:

Content-Type: text/css

for CSS.

Incorrect content types can cause resources to fail when nosniff is enabled, so testing is important.

4. Add X-Frame-Options

If you are researching how to add security headers to a website, you will also encounter X-Frame-Options.

This header controls whether a page can be embedded in a frame, iframe, embed, or object.

Example:

X-Frame-Options: DENY

This prevents the page from being displayed in a frame.

Another option is:

X-Frame-Options: SAMEORIGIN

This allows framing by pages from the same origin.

This protection is useful against clickjacking attacks, where an attacker attempts to trick users into interacting with a hidden or disguised interface.

For modern applications, CSP’s frame-ancestors directive provides more flexible framing control and is preferred for comprehensive policies.

For example:

Content-Security-Policy: frame-ancestors 'self';

If your website needs to be embedded by a trusted external service, carefully define the required origins instead of blocking all framing.

5. Add the Referrer-Policy Header

Another useful part of how to add security headers to a website is controlling referrer information.

The Referrer-Policy header determines how much referrer information browsers send when users navigate between resources or websites.

A common configuration is:

Referrer-Policy: strict-origin-when-cross-origin

This allows useful referrer information while limiting the amount of URL information exposed to other origins.

MDN explains that the header can help prevent sensitive information contained in URLs from being unnecessarily transmitted to other sites.

Other possible values include:

Referrer-Policy: no-referrer

or:

Referrer-Policy: same-origin

Choose a policy based on your application’s analytics, functionality, and privacy requirements.

6. Add Permissions-Policy

If you want to understand how to add security headers to a website at a more advanced level, learn about Permissions-Policy.

Permissions Policy allows websites to control access to certain browser features, including features such as:

• Camera
• Microphone
• Geolocation
• Fullscreen
• Other browser capabilities

For example:

Permissions-Policy: geolocation=()

This can be used to disable geolocation access for the document.

Another example is:

Permissions-Policy: camera=(), microphone=()

The exact directives and browser support should be checked before deploying a policy. MDN currently notes limitations and browser compatibility considerations for Permissions Policy.

The important lesson when learning how to add security headers to a website is to allow only the browser capabilities your application actually needs.

7. Consider Cross-Origin Security Headers

Modern web applications may also use additional cross-origin headers.

Examples include:

Cross-Origin-Opener-Policy: same-origin

Cross-Origin-Resource-Policy: same-origin

and:

Cross-Origin-Embedder-Policy: require-corp

These headers can help control relationships between your website and resources or documents from other origins.

For example, COOP can separate browsing contexts and help protect against certain cross-origin attacks.

CORP controls which origins can load a resource, while COEP controls how cross-origin resources are loaded or embedded.

These headers should not be added blindly because they can affect third-party integrations and application functionality.

How to Add Security Headers to a Website Using Apache

If your website runs on Apache, you can commonly configure headers using .htaccess, provided your hosting configuration allows the required directives.

Example:

<IfModule mod_headers.c>
    Header always set X-Content-Type-Options "nosniff"
    Header always set X-Frame-Options "SAMEORIGIN"
    Header always set Referrer-Policy "strict-origin-when-cross-origin"
    Header always set Strict-Transport-Security "max-age=31536000"
</IfModule>

For CSP:

Header always set Content-Security-Policy "default-src 'self';"

Be careful when adding CSP because an overly restrictive policy can prevent JavaScript, CSS, fonts, images, analytics, or third-party services from loading.

If you are using Apache, test the website after every configuration change.

How to Add Security Headers to a Website Using Nginx

Nginx users can configure response headers in the server or location configuration.

Example:

add_header X-Content-Type-Options "nosniff" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Strict-Transport-Security "max-age=31536000" always;

A basic CSP could be:

add_header Content-Security-Policy "default-src 'self';" always;

The always option is useful when you want the header included on responses beyond the default successful response cases.

After modifying Nginx configuration, validate the configuration before reloading the server.

For example:

nginx -t

Then reload Nginx after the configuration passes validation.

How to Add Security Headers to a Website Using PHP

PHP developers can send HTTP response headers using the header() function.

Example:

<?php

header("X-Content-Type-Options: nosniff");
header("X-Frame-Options: SAMEORIGIN");
header("Referrer-Policy: strict-origin-when-cross-origin");
header("Strict-Transport-Security: max-age=31536000");

?>

A CSP can also be sent:

header("Content-Security-Policy: default-src 'self';");

These statements must be executed before output is sent to the browser.

If PHP has already produced output, you may encounter a “headers already sent” error.

For larger applications, it is usually better to centralize security-header configuration through middleware, framework configuration, or the web server rather than repeating the same code throughout individual PHP files.

How to Add Security Headers to a Website Using Node.js and Express

If you are learning how to add security headers to a website using Node.js, middleware is a convenient approach.

One common approach is to use a security middleware package such as Helmet.

A basic example is:

import express from "express";
import helmet from "helmet";

const app = express();

app.use(helmet());

app.get("/", (req, res) => {
    res.send("Secure website");
});

app.listen(3000);

Helmet helps configure several HTTP security headers for Express applications.

However, developers should still understand what each header does rather than blindly relying on default middleware settings.

Your application may require customized CSP directives or other policies depending on its functionality.

How to Add Security Headers to a WordPress Website

For WordPress, how to add security headers to a website depends on your hosting setup.

Possible approaches include:

• Server configuration.
• Hosting control panel.
• CDN configuration.
• Security plugins.
• Custom WordPress hooks.
• Nginx or Apache configuration.

If you use a WordPress security plugin, check which headers it already provides before manually adding duplicate headers.

Duplicate or conflicting headers can create unexpected behavior.

For production websites, server-level configuration is often preferable when you have access to it because it can apply policies consistently.

How to Test Security Headers

Learning how to add security headers to a website is incomplete without learning how to verify them.

You can inspect headers using browser developer tools.

In Chrome:

1. Open your website.
2. Press F12.
3. Open the Network tab.
4. Reload the page.
5. Select the main document request.
6. Open Response Headers.
7. Search for your configured security headers.

You can also use command-line tools such as:

curl -I https://example.com

Look for responses such as:

Content-Security-Policy: ...
Strict-Transport-Security: ...
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
Referrer-Policy: strict-origin-when-cross-origin

Online security-header testing tools can also help identify missing or weak configurations.

The OWASP Secure Headers Project provides technical information about HTTP security response headers and their security applications.

Common Mistakes When Adding Security Headers

When learning how to add security headers to a website, beginners commonly make several mistakes.

1. Copying a CSP Without Understanding It

A CSP copied from another website may break your scripts, styles, images, fonts, or third-party integrations.

Always build CSP based on your application’s actual resource requirements.

2. Enabling HSTS Too Quickly

HSTS should be deployed only after HTTPS is working correctly across the required domain and subdomains.

3. Using Deprecated Headers

Avoid relying on old security headers simply because you find them in older tutorials.

For example, modern CSP is the recommended mechanism for many security controls that older tutorials may associate with legacy headers.

4. Testing Only the Homepage

A header may be present on the homepage but missing on API responses, error pages, authentication pages, or other routes.

Test important application paths.

5. Assuming Headers Fix Vulnerable Code

Security headers are an additional layer of protection. They do not replace:

• Secure authentication
• Authorization
• Input validation
• Output encoding
• Parameterized SQL queries
• CSRF protection
• Secure file uploads
• Secure password storage
• Dependency updates

For example, if you are also learning How to Prevent Cross-Site Scripting in a Web Application, CSP should be treated as an additional defensive layer rather than the only XSS defense.

Security Headers Checklist

Here is a simple checklist for how to add security headers to a website:

• Enable HTTPS.
• Configure HSTS after verifying HTTPS.
• Add X-Content-Type-Options: nosniff.
• Configure clickjacking protection using CSP frame-ancestors and/or X-Frame-Options.
• Configure an appropriate Referrer-Policy.
• Create and test a Content Security Policy.
• Review Permissions Policy requirements.
• Consider CORP, COOP, and COEP where appropriate.
• Test headers using browser developer tools.
• Test important application routes.
• Check third-party integrations.
• Monitor CSP violations where appropriate.
• Review security headers after major website changes.

Best Practices for Security Headers

The best approach to how to add security headers to a website is to introduce them gradually.

Start with headers that are relatively straightforward:

X-Content-Type-Options: nosniff

Referrer-Policy: strict-origin-when-cross-origin

Then implement HTTPS and HSTS after verifying your HTTPS configuration.

Next, develop a CSP based on your website’s actual resource requirements.

For advanced applications, evaluate cross-origin isolation headers and Permissions Policy according to the application’s needs.

You should also document your header configuration so future developers understand why each policy exists.

Remember that browser security policies can affect application functionality. A secure configuration is useful only when the website continues to work correctly.

Security Headers vs Other Website Security Measures

Security headers are only one part of a complete website security strategy.

For example:

This is why learning how to add security headers to a website should be part of a broader secure web-development learning path.

If your next topic is XSS protection, continue with How to Prevent Cross-Site Scripting in a Web Application. For database security, continue with How to Prevent SQL Injection. For forms, learn How to Protect Forms Against CSRF. For uploads, learn How to Secure File Uploads in PHP.

These related tutorials can be used as internal links within your website to create a useful security-learning topic cluster.

Frequently Asked Questions

What are security headers?

Security headers are HTTP response headers that instruct browsers how to handle website content and browser features. They provide an additional layer of protection against several common web security risks.

Is it difficult to add security headers?

No. The basic headers can often be configured with a few lines of server configuration. The difficult part is creating policies such as CSP that correctly match your application’s requirements.

Which security headers should a beginner add first?

A beginner can start by understanding X-Content-Type-Options, Referrer-Policy, HSTS, clickjacking protection, and CSP. Always test the application after making changes.

Does CSP prevent all XSS attacks?

No. CSP can reduce the impact of some XSS attacks, but it should not replace input validation, output encoding, secure coding, and other XSS prevention techniques.

Can I add security headers using HTML?

Some security policies can have related HTML mechanisms, but important HTTP response security headers should generally be delivered by the server. For example, X-Frame-Options is enforced as an HTTP response header, not through a meta tag.

Do security headers improve website security?

Yes, properly configured security headers can provide an additional browser-enforced security layer. OWASP describes HTTP security response headers as a way to increase application security and reduce preventable browser-side vulnerabilities.

Should every website use the same security-header configuration?

No. A blog, e-commerce store, SaaS application, API, and single-page application may have different requirements. Security headers should be configured according to the application’s resources, integrations, and functionality.

Conclusion

Learning how to add security headers to a website is an important step for beginner web developers and security professionals. Security headers allow your server to communicate security policies to browsers and can help protect websites against several classes of browser-based attacks.

The most important headers to understand include:

• Content-Security-Policy
• Strict-Transport-Security
• X-Content-Type-Options
• X-Frame-Options
• Referrer-Policy
• Permissions-Policy
• Cross-Origin-Resource-Policy
• Cross-Origin-Opener-Policy
• Cross-Origin-Embedder-Policy

Start with a few well-understood headers, test them carefully, and then gradually introduce more advanced policies.

The key takeaway from how to add security headers to a website is that security headers should complement—not replace—secure application development. Combine properly configured headers with HTTPS, secure authentication, authorization, input validation, output encoding, CSRF protection, secure file uploads, password security, dependency updates, and regular security testing.

For official technical references, consult the MDN HTTP Headers documentation, the OWASP HTTP Headers Cheat Sheet, and Google’s Security Headers Quick Reference.

Internal linking note: Replace the related tutorial titles above with links to the corresponding articles on your own website. Because your website domain was not provided, the internal destinations have intentionally not been invented.

SEO note: The focus keyword is used in the SEO title, meta description, URL slug, introduction, headings, body content, FAQ section, conclusion, and image alt-text specification. The article is written to maintain natural keyword usage while avoiding unnecessary keyword stuffing.