Next.js安全头部

在本文中，我们将了解安全头部，它们在网站安全中的作用，安全头部的示例以及如何在Next.js中实现它们。

什么是HTTP头部？

HTTP头部用于通过HTTP请求或响应传递附加信息或元数据。这些头部不区分大小写，采用键值对格式，并用冒号分隔。

什么是安全头部？

安全头部是一组用于用户和网站之间通信的规则。它是保护网站免受安全威胁（如跨站脚本攻击（XSS）、点击劫持和代码注入）的一种方式。

Next.js安全头部

创建Next.js应用程序：

步骤1： 在终端中运行以下命令来创建一个新的NextJs应用：

npx create-next-app app_name

步骤2： 创建好您的项目文件夹（例如 GFG）后，请使用以下命令进入该文件夹：

cd app_name

项目结构： 它将如下所示：

Next.js安全头部

首先，让我们看一下NextJS的默认安全头信息： 您可以通过以下步骤在您的端上检查这些头信息：

步骤1： 创建Next应用程序

步骤2： 将网站托管在本地主机上

步骤3： 进入检查

步骤4： 进入网络

步骤5： 点击localhost

Next.js安全头部

这些都是默认的安全头。在这个响应头中甚至没有提及安全头，也没有提及诸如 内容安全策略、X-Frame、HSTS、权限策略 等安全头。如果没有提及这些策略，网站的安全性可能会受到XSS、代码注入和点击劫持等威胁的破坏。

安全头的示例： 在下面的部分，我们将看到一些示例，并介绍其实现方式。

1. 内容安全策略头：

CSP头用于保护网站免受恶意攻击。CSP允许您设置一个策略，决定哪个域可以执行脚本，哪个不可以。使用CSP，我们可以定义允许在页面上加载的内容源。

Next.js安全头部

语法：

Content-Security-Policy: default-src <set_origin>

你可以设置来源为：

self： 只会保留你自己的域名作为请求的域名。
none： 不允许任何域名。
*：允许所有域名。
URL： 你想要允许的域名的URL。

示例： 在相关文件中编写代码：

文件名： next.config.js

const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    async headers() {
        return [
            {
                // Sets security headers for all routes
                source: '/(.*)',
                headers: [
                    {
                        key: 'Content-Security-Policy',
                        value:
                            "default-src 'self' https://geeksforgeeks.com/'; style-src 'self' ; image-src 'https://geeksforgeeks.org/';  script-src 'self' https://abcd.com; font-src 'self' 'https://example.com/'",
                    }
                ],
            },
        ];
    },
}
 
module.exports = nextConfig

运行应用的步骤： 使用以下命令运行您的Next应用：

npm run dev

输出:

Next.js安全头部

2. X-Frame-Options header:

X-Frame-Options头部允许阻止攻击者在不可见框架中使用我们自己的内容。许多网站使用这个安全头部来避免Clickjacking攻击。这个选项实际上允许浏览器是否允许在<frame>、<iframe>、<embed>或<object>中呈现页面。

语法:

X-Frame-Options: **DENY**
X-Frame-Options: **SAMEORIGIN**

DENY: 它是最安全的选项。基本上，它会阻止网站在中渲染。 .
SAMEORIGIN: 它允许使用框架。即页面只能嵌入具有完全相同来源的框架中。

示例： 在下面的代码中，我们将设置X-Frame-Option，该选项将作为键值对。在值中，我们可以设置Deny或Sameorigin。我们将保持拒绝它，这会阻止网站在中渲染。

文件名： next.config.js

const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    async headers() {
        return [
            {
                // Sets security headers for all routes
                source: '/(.*)',
                headers: [
                    {
                        key: 'X-Frame-Options',
                        value: 'DENY',
                        //You can use SAMEORIGIN as a value also.
                    }
                ],
            },
        ];
    },
}
 
module.exports = nextConfig

输出：

Next.js安全头部

3. Permission-policy header:

这也被称为特性策略。权限策略帮助您定义要使用哪些浏览器 API，以及哪些不要使用。例如，如果您的网站不需要摄像头和麦克风，您可以简单地禁用它们以保护您的网站免受攻击。

语法：

Permissions-Policy: camera=();
                    battery=(self);
                    geolocation=();
microphone=('https://a-domain.com')

相机： 相机（）为空，这意味着我们拒绝使用相机。
电池： 电池状态仅允许我们自己的域名访问。
地理位置： 地理位置（）为空，这意味着我们拒绝使用位置。
麦克风： 只允许指定的来源。

示例： 在以下代码中，我们将设置Permission-policy，它将以键值对的形式存在。在值中，我们可以设置相机、电池、地理位置和麦克风，以简单地禁用它们来保护您的网站免受攻击。我们还可以为值设置源，例如：”microphone=(‘https://abc_domain.com’)”，它只允许指定的源。

文件名： next.config.js

const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    async headers() {
        return [
            {
                // Sets security headers for all routes
                source: '/(.*)',
                headers: [
                    {
                        key: 'Permissions-Policy',
                        value: "camera=(); battery=(self);  browsing-topics=(); geolocation=(); microphone=('https://abc_domain.com')",
                        //Empty brackets are used to define that we are denying them..
                    }
                ],
            },
        ];
    },
}
 
module.exports = nextConfig

输出：

Next.js安全头部

4. 引荐者策略标头

当我们点击从一个域到另一个域的链接时，主域被视为引荐者。使用引荐者策略，我们可以控制由引荐者域发送给另一个域的信息（关于用户从哪里来的信息）。

语法：

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

origin-when-cross-origin： 将路径、来源和查询字符串与同源请求一起发送。
strict-origin-when-cross-origin： 在跨源请求的引用来源标头中，只发送来源信息，更安全。

示例： 在以下代码中，我们将设置引用来源策略，该策略将以键值对的形式存在。在值中，我们可以设置origin-when-cross-origin或strict-origin-when-cross-origin。我们将设置为strict-origin-when-cross-origin，这是安全的。

文件名： next.config.js

const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    async headers() {
        return [
            {
                // Sets security headers for all routes
                source: '/(.*)',
                headers: [
                    {
                        key: 'Referrer-Policy',
                        value: 'strict-origin-when-cross-origin',
                    }
                ],
            },
        ];
    },
}
 
module.exports = nextConfig

输出：

Next.js安全头部