📘
Gitbook on React and NextJS
  • Welcome!
  • Performance
    • Performance Monitoring
    • Analyzing Bundle Sizes
    • How to speed up your app
  • How to avoid expensive re-calculations
  • How to decrease unnecessary re-renders
  • How to handle CPU-intensive tasks
  • Design System
    • Styled Components
    • Theme UI
    • Base Web
    • Styled JSX
    • Reach UI
    • Evergreen
  • Security
  • Third-Party Assets
  • Clickjacking
  • Cross-Site Request Forgery
  • Next JS
    • Why Next.js
    • How to style Next JS
    • How to configure Next.js
    • API in Next JS
    • How to fetch data in Next.js
    • Dynamic imports
Powered by GitBook
On this page

Was this helpful?

Third-Party Assets

PreviousEvergreenNextClickjacking

Last updated 4 years ago

Was this helpful?

Using to host files such as scripts and stylesheets that are shared among multiple sites can improve site performance and conserve bandwidth. However, using CDNs also comes with a risk, in that if an attacker gains control of a CDN, the attacker can inject arbitrary malicious content into files on the CDN (or replace the files completely) and thus can also potentially attack all sites that fetch files from that CDN.

Subresource Integrity (SRI) is a security feature that enables browsers to verify that resources they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match.

for enabling Subresource Integrity.

yarn add --dev webpack-subresource-integrity
import SriPlugin from 'webpack-subresource-integrity';

const compiler = webpack({
    output: {
        crossOriginLoading: 'anonymous',
    },
    plugins: [
        new SriPlugin({
            hashFuncNames: ['sha256', 'sha384'],
            enabled: process.env.NODE_ENV === 'production',
        }),
    ],
});
Content Delivery Networks (CDNs)
Webpack plugin