Beranda>Terkait pemrograman>Kode Sumber AI
Unduh

header selanjutnya yang aman

⛑️ menetapkan header respons yang aman untuk Next.js. ? 

 // /next.config.js

module . exports = {
  async headers ( ) {
    return [ {
      source : "/(.*)" ,
      headers : createSecureHeaders ( {
        contentSecurityPolicy : {
          directives : {
            defaultSrc : "'self'" ,
            styleSrc : [ "'self'" , "https://stackpath.bootstrapcdn.com" ] ,
          } ,
        } ,
        forceHTTPSRedirect : [ true , { maxAge : 60 * 60 * 24 * 4 , includeSubDomains : true } ] ,
        referrerPolicy : "same-origin" ,
      } )
    } ] ;
  } ,
} ;

Daftar isi

  • Daftar isi
  • Fitur
    • Mengapa menggunakan header-secure berikutnya, bukan helm?
      • header-secure-next-secure vs helm
  • Awal yang cepat
    • Persyaratan
    • Instalasi
    • Pengaturan
      • Gunakan createSecureHeaders di next.config.js (disarankan)
      • Gunakan withSecureHeaders dalam komponen halaman
  • Aturan
    • forceHTTPSRedirect
    • frameGuard
    • noopen
    • nosniff
    • xssProtection
    • contentSecurityPolicy
    • expectCT
    • referrerPolicy
  • API
    • createSecureHeaders
    • withSecureHeaders
    • createHeadersObject
  • Resep
    • Cara menghapus header x-powered-by
    • Menimpa header di halaman tertentu menggunakan withSecureHeaders
  • Berkontribusi pada header-secure berikutnya
  • Lisensi

Fitur

FITUR Apa yang bisa Anda lakukan
⚛️ Dirancang untuk Next.js Gunakan untuk next.config.js atau komponen halaman di /pages
Aturan terapan default Bantu proyek Anda bahkan jika Anda tidak memiliki pengetahuan
? Ketik aman Anda dapat menggunakan dengan naskah

Mengapa menggunakan header-secure berikutnya, bukan helm?

Headers-Secure Next-Secure adalah mirip dengan helm, yang menetapkan header respons HTTP yang terkait dengan keamanan untuk Express.js.

Next.js mendukung untuk digunakan dalam kerangka Node.js seperti Express.js. Jadi, Anda dapat menggunakan helm dengan proyek Next.js Anda jika Anda membuat server khusus, tetapi tim pengembangan Next.js tidak merekomendasikan server khusus. Juga, mereka bekerja untuk diimplementasikan agar mungkin digunakan selanjutnya.js tanpa server khusus. Faktanya, Next.js 9 mendukung routing dinamis, jadi kami tidak perlu membangun server khusus untuk mengimplementasikannya menggunakan seperti rute berikutnya, yang membutuhkan server khusus. 

 // /next.config.js
const { createSecureHeaders } = require ( "next-secure-headers" ) ;

module . exports = {
  async headers ( ) {
    return [ { source : "/(.*)" , headers : createSecureHeaders ( ) } ] ;
  } ,
} ;

Jika Anda ingin menggunakan helm, itu perlu menggunakan server khusus dengan cara yang disarankan. Untuk mengatasi masalah ini, header-secure berikutnya lahir. Headers-Secure-Secure dibangun untuk proyek Next.js sehingga Anda dapat menentukan header apa pun di next.config.js atau komponen halaman.

header-secure-next-secure vs helm

Berikut ini adalah aturan yang dimiliki dan helm-header yang memiliki helm. Headers-Secure-Secure terinspirasi oleh helm, tetapi tidak memiliki beberapa aturan untuk beberapa alasan.

header selanjutnya yang aman Helm Komentar
Kurin ketat-transportasi forceHTTPSRedirect hsts
X-frame-opsi frameGuard frameguard
Opsi X-Download noopen ieNoOpen
Opsi-tipe konten-X nosniff noSniff
Proteksi X-XSS xssProtection xssFilter
Kebijakan-Konten-Keamanan contentSecurityPolicy contentSecurityPolicy
Harapkan-CT expectCT expectCt
POLICE PENGGEMAR referrerPolicy referrerPolicy
X-dns-prefetch-control - dnsPrefetchControl Ini memiliki implikasi privasi tetapi ini meningkatkan kinerja.
Fitur-kebijakan - featurePolicy Kebijakan fitur meningkatkan keamanan tetapi belum berfungsi.
X-Powered-by - hidePoweredBy Next.js mendukung untuk menghapus header ini di next.config.js .
Terkait dengan cache - nocache Seperti yang dikatakan helm, caching memiliki banyak manfaat.
X-Permeited-Cross-Domain-Policies - crossdomain Adobe Flash adalah salah satu teknologi web lama.

Awal yang cepat

Persyaratan

  • NPM atau benang
  • Node.js 10.0.0 atau lebih tinggi
  • Next.js 8.0.0 atau lebih tinggi

Instalasi 

$ npm install -D next-secure-headers

Jika Anda menggunakan benang, gunakan perintah berikut. 

$ yarn add -D next-secure-headers

❗️ untuk withSecureHeaders . Jika Anda ingin menggunakan withSecureHeaders , Anda harus menginstal tanpa opsi -D (yaitu, menginstal sebagai dependencies bukan devDependencies ).

Pengaturan

Ada dua cara untuk menentukan header. Salah satunya adalah menggunakan createSecureHeaders di next.config.js , dan yang lain adalah menggunakan withSecureHeaders dalam komponen halaman.

Gunakan createSecureHeaders di next.config.js (disarankan)

❗️ Berikutnya.js 9.5 atau lebih tinggi diperlukan. Fungsi headers telah didukung sejak Next.js 9.5, jadi Anda harus menggunakan Next.js 9.5 atau lebih tinggi jika Anda ingin menggunakan cara ini.

? Untuk rute selanjutnya.js 10 dan i18n. Jika proyek Anda menggunakan rute Next.js 10 dan built-in I18N, dan Anda ingin menerapkan aturan untuk semua halaman, Anda harus menentukan "/:path*" untuk source properti, bukan "/(.*)" . Sebaliknya, jika proyek Anda tidak menggunakan rute I18N bahkan jika menggunakan Next.js 10, Anda harus menentukan "/(.*)" sebagai gantinya. Keterbatasan ini mungkin bug di Next.js.

Cara ini menggunakan fungsi createSecureHeaders dan cara konfigurasi header bawaan oleh Next.js. Ini tidak diperlukan server apa pun, dapat digunakan di halaman statis, dan dapat mempertahankan optimasi statis otomatis. Jika proyek Anda tidak menggunakan server mana pun (menggunakan halaman statis atau SSG) atau Anda baru saja membuat proyek Next.js, saya sarankan mempertahankan halaman statis dan mengadopsi dengan cara ini.

Impor createSecureHeaders dari header-secure berikutnya dan menggunakannya di headers fungsi async di next.config.js . 

 // /next.config.js
const { createSecureHeaders } = require ( "next-secure-headers" ) ;

module . exports = {
  async headers ( ) {
    return [ { source : "/(.*)" , headers : createSecureHeaders ( ) } ] ;
  } ,
} ;

Secara default, header-secure berikutnya menerapkan beberapa aturan. Jika Anda ingin mengaktifkan atau menonaktifkan aturan, Anda dapat memberikan opsi untuk argumen pertama fungsi tersebut. 

 module . exports = {
  async headers ( ) {
    return [ {
      source : "/(.*)" ,
      headers : createSecureHeaders ( {
        contentSecurityPolicy : {
          directives : {
            defaultSrc : "'self'" ,
            styleSrc : [ "'self'" , "https://stackpath.bootstrapcdn.com" ] ,
          } ,
        } ,
        forceHTTPSRedirect : [ true , { maxAge : 60 * 60 * 24 * 4 , includeSubDomains : true } ] ,
        referrerPolicy : "same-origin" ,
      } ) ,
    } ] ;
  } ,
} ;

Juga, Anda dapat mengonfigurasi header yang berbeda berdasarkan URL mengikuti dokumen resmi.

Gunakan withSecureHeaders dalam komponen halaman

❗️ Dibutuhkan server. Dengan cara ini membutuhkan server apa pun karena withSecureHeaders menggunakan getServerSideProps dari Next.js.

Gunakan fungsi yang diekspor untuk aplikasi Next.js Anda di /pages/_app.tsx . Anda juga dapat menggunakan komponen halaman apa pun di /pages/xxx.tsx sebagai gantinya. 

 // /pages/_app.tsx
import { withSecureHeaders } from "next-secure-headers" ;

class Application extends App {
  ...
}

export default withSecureHeaders ( ) ( Application ) ;

Secara default, header-secure berikutnya menerapkan beberapa aturan. Jika Anda ingin mengaktifkan atau menonaktifkan aturan, Anda dapat memberikan opsi untuk argumen pertama fungsi tersebut. 

 export default withSecureHeaders ( {
  contentSecurityPolicy : {
    directives : {
      defaultSrc : "'self'" ,
      styleSrc : [ "'self'" , "https://stackpath.bootstrapcdn.com" ] ,
    } ,
  } ,
  forceHTTPSRedirect : [ true , { maxAge : 60 * 60 * 24 * 4 , includeSubDomains : true } ] ,
  referrerPolicy : "same-origin" ,
} ) ( Application ) ;

Aturan

forceHTTPSRedirect 

 {
  forceHTTPSRedirect: boolean | [ true , Partial < { maxAge : number ; includeSubDomains : boolean ; preload : boolean } > ] ;
}
Nilai default Mdn
[true, { maxAge: 63072000 }] https://developer.mozilla.org/docs/web/http/headers/strict-transport-security

Ini untuk menetapkan header "Strict-Transport-Security (HSTS)" dan itu untuk mencegah serangan manusia-di-menengah selama pengalihan dari HTTP ke HTTPS. Untuk mengaktifkan ini sangat disarankan jika Anda menggunakan HTTPS (SSL) di server Anda.

Anda dapat memberikan true jika Anda ingin mengaktifkan aturan ini, atau Anda dapat menentukan opsi dengan memberikan [true, OPTION_OBJECT] . Secara default, ini menetapkan max-age menjadi dua tahun (63.072.000 detik).

frameGuard 

 {
  frameGuard: false | "deny" | "sameorigin" | [ "allow-from" , { uri : string | URL } ] ;
}
Nilai default Mdn
"deny" https://developer.mozilla.org/docs/web/http/headers/x-frame-options

Ini untuk mengatur header "X-frame-options" dan itu untuk mencegah serangan clickjacking. "deny" sangat disarankan jika Anda tidak menggunakan elemen bingkai seperti iframe .

noopen 

 {
  noopen: false | "noopen" ;
}
Nilai default Mdn
"noopen" https://developer.mozilla.org/docs/web/http/headers/xdownload-options

Ini untuk mengatur header "X-Download-Options" dan untuk mencegah untuk membuka file yang diunduh secara otomatis untuk IE8+ (serangan penanganan mime).

nosniff 

 {
  nosniff: false | "nosniff" ;
}
Nilai default Mdn
"nosniff" https://developer.mozilla.org/docs/web/http/headers/x-content-type-options

Ini untuk mengatur header "tipe-tipe-x-opsi" dan itu untuk mencegah serangan sniffing Mime.

xssProtection 

 {
  xssProtection: false | "sanitize" | "block-rendering" | [ "report" , { uri : string | URL } ] ;
}
Nilai default Mdn
"sanitize" https://developer.mozilla.org/docs/web/http/headers/x-xss-protection

Ini untuk mengatur header "X-XSS-Protection" dan itu untuk mencegah serangan XSS.

Jika Anda menentukan "sanitize" , ini menetapkan header menjadi "1" dan browser akan membersihkan area yang tidak aman. Jika Anda menentukan "block-rendering" , ini menetapkan header ke "1; mode=block" dan browser akan memblokir rendering halaman. "X-XSS-Protection" memblokir banyak serangan XSS, tetapi kebijakan keamanan konten disarankan untuk digunakan dibandingkan dengan ini.

contentSecurityPolicy 

 {
  contentSecurityPolicy :
    | false
    | {
        directives :
          & Partial < {
            childSrc : string | string [ ] ;
            connectSrc : string | string [ ] ;
            defaultSrc : string | string [ ] ;
            fontSrc : string | string [ ] ;
            frameSrc : string | string [ ] ;
            imgSrc : string | string [ ] ;
            manifestSrc : string | string [ ] ;
            mediaSrc : string | string [ ] ;
            prefetchSrc : string | string [ ] ;
            objectSrc : string | string [ ] ;
            scriptSrc : string | string [ ] ;
            scriptSrcElem : string | string [ ] ;
            scriptSrcAttr : string | string [ ] ;
            styleSrc : string | string [ ] ;
            styleSrcElem : string | string [ ] ;
            styleSrcAttr : string | string [ ] ;
            workerSrc : string | string [ ] ;
          } >
          & Partial < {
            baseURI : string | string [ ] ;
            pluginTypes : string | string [ ] ;
            sandbox :
              | true
              | "allow-downloads-without-user-activation"
              | "allow-forms"
              | "allow-modals"
              | "allow-orientation-lock"
              | "allow-pointer-lock"
              | "allow-popups"
              | "allow-popups-to-escape-sandbox"
              | "allow-presentation"
              | "allow-same-origin"
              | "allow-scripts"
              | "allow-storage-access-by-user-activation"
              | "allow-top-navigation"
              | "allow-top-navigation-by-user-activation" ;
          } >
          & Partial < {
            formAction : string | string [ ] ;
            frameAncestors : string | string [ ] ;
            navigateTo : string | string [ ] ;
            reportURI : string | URL | ( string | URL ) [ ] ;
            reportTo : string ;
          } > ;
        reportOnly?: boolean ;
      } ;
}
Nilai default Mdn
false https://developer.mozilla.org/docs/web/http/headers/content-security-policy

Ini untuk menetapkan header "kebijakan-kebijakan-konten" atau "konten-keamanan-kebijakan-hanya-report" dan itu untuk mencegah memuat dan melaksanakan sumber daya yang tidak diizinkan.

Jika Anda memberikan True to reportOnly , ini menetapkan "konten-keamanan-kebijakan-hanya-laporan" untuk menilai alih-alih "kebijakan-keamanan konten".

Anda juga dapat menentukan arahan menggunakan nama-nama rantai seperti child-src bukan childSrc .

❗️ Saat mengatur frameAncestors : X-frame-options menjadi prioritas. Bagian "Hubungan dengan opsi X-frame" dari spesifikasi CSP mengatakan: "Jika sumber daya disampaikan dengan kebijakan yang mencakup arahan bernama bingkai dan disposisi yang" ditegakkan ", maka header opsi X-frame harus diabaikan" , tetapi Chrome 40 & Firefox 35 mengabaikan frame-prodese-on-frame.

Oleh karena itu, jika pengaturan frameAncestors Anda harus mengatur frameGuard ke false .

expectCT 

 {
  expectCT: boolean | [ true , Partial < { maxAge : number ; enforce : boolean ; reportURI : string | URL } > ] ;
}
Nilai default Mdn
false https://developer.mozilla.org/docs/web/http/headers/expect-ct

Ini untuk menetapkan header "Harapan-CT" dan itu untuk memberi tahu browser untuk mengharapkan transparansi sertifikat.

referrerPolicy 

 {
  referrerPolicy :
    | false
    | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin"
    | ( "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" ) [ ] ;
}
Nilai default Mdn
false https://developer.mozilla.org/docs/web/http/headers/referrer-policy

Ini untuk menetapkan header "rujukan-kebijakan" dan itu untuk mencegah pengirim oleh server lain. Anda dapat menentukan satu atau lebih nilai untuk browser lama yang tidak mendukung nilai tertentu.

API

createSecureHeaders 

 import { createSecureHeaders } from "next-secure-headers" ;

createSecureHeaders ( { referrerPolicy : "same-origin" } ) ;
// [
//   {
//     key: "Referrer-Policy",
//     value: "same-origin",
//   },
// ]

createSecureHeaders adalah fungsi untuk mengembalikan header sebagai objek mengikuti format seperti { key, value } . 

 createSecureHeaders ( OPTIONS ) ;

Argumen pertama menerima opsi untuk aturan.

withSecureHeaders 

 import { withSecureHeaders } from "next-secure-headers" ;

export default withSecureHeaders ( { referrerPolicy : "same-origin" } ) ( Page ) ;

withSecureHeaders adalah HOC untuk menentukan header menggunakan getServerSideProps . Anda dapat menggunakan fungsi ini untuk aplikasi ( /pages/_app.tsx ) dan komponen halaman ( /pages/xxx.tsx ). Ini tidak tersedia di next.config.js . 

 withSecureHeaders ( OPTIONS ) ( APPLICATION_OR_COMPONENT ) ;

Argumen pertama menerima opsi untuk aturan, dan argumen fungsi yang dikembalikan menerima aplikasi atau komponen halaman. Nilai yang dikembalikan adalah komponen React baru.

createHeadersObject 

 import { createHeadersObject } from "next-secure-headers" ;

createHeadersObject ( { referrerPolicy : "same-origin" } ) ;
// {
//   "Referrer-Policy": "same-origin",
// }

createHeadersObject adalah fungsi untuk mengembalikan header sebagai objek. 

 createHeadersObject ( OPTIONS ) ;

Argumen pertama menerima opsi untuk aturan.

Resep

Cara menghapus header x-powered-by

Secara umum, header respons HTTP X-powered-by harus dihapus dari header respons karena membantu peretas untuk mendapatkan informasi server.

Header-Secure Next-Secure tidak mendukung untuk menghapus header X-Powered-by, tetapi Next.js mendukung untuk dilakukan. 

 // next.config.js
module . exports = {
  poweredByHeader : false ,
} ;

Jika Anda memberikan False to poweredByHeader di next.config.js , Next.js menghapus header dari header respons.

Menimpa header di halaman tertentu menggunakan withSecureHeaders 

 // /pages/_app.tsx
export default withSecureHeaders ( { referrerPolicy : "same-origin" } ) ( Application ) ;

// /pages/about.tsx
export default withSecureHeaders ( { referrerPolicy : "no-referrer-when-downgrade" } ) ( Page ) ;
// But actually the server responds "same-origin"...

Header-Secure Next-Secure tidak mendukung untuk mengganti header respons dalam komponen halaman anak karena dibatasi oleh arsitektur Next.js. 

 // /config/secure-headers.ts
import { withSecureHeaders } from "next-secure-headers" ;

export const secureHeadersDefaultOption : Parameters < typeof withSecureHeaders > [ 0 ] = {
  referrerPolicy : "same-origin" ,
} ;

// /pages/_app.tsx
import { secureHeadersDefaultOption } from "../config/secure-headers" ;

export default withSecureHeaders ( secureHeadersDefaultOption ) ( Application ) ;

// /pages/about.tsx
export default withSecureHeaders ( {
  ... secureHeadersDefaultOption ,
  referrerPolicy : "no-referrer-when-downgrade" ,
} ) ( Page ) ;

Untuk menyelesaikan ini, Anda harus mendefinisikan opsi sebagai satu modul, maka Anda harus mengimpor dan menggabungkan objek.

Berkontribusi pada header-secure berikutnya

Laporan bug dan permintaan tarik dipersilakan di GitHub di https://github.com/jagaapple/next-secure-headers. Proyek ini dimaksudkan untuk menjadi ruang yang aman dan ramah untuk kolaborasi, dan kontributor diharapkan mematuhi Kode Perilaku Perjanjian Kontributor.

Harap baca Pedoman yang Berkontribusi sebelum pengembangan dan kontribusi.

Lisensi

Perpustakaan tersedia sebagai open source di bawah ketentuan lisensi MIT.

Hak Cipta 2020 Jaga Apple. Semua hak dilindungi undang -undang.

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua