Secure your dApp

We recommend implementing security controls, such as HTTPS and Content Security Policy (CSP), to improve the security of your dapp and protect your users.

PreviousDevelop a Full Stack dApp on MELD NextDecentralized Storage

Last updated 1 year ago

Secure your dApp

We recommend implementing security controls, such as HTTPS and Content Security Policy (CSP), to improve the security of your dapp and protect your users.

Caution!

The following security advice isn't exhaustive.

Use HTTPS

HTTPS can protect your dapp against attackers who might try to eavesdrop or tamper the communication channel between your dapp and your users. HTTPS encrypts data transmitted between the web server and the user's browser, making it difficult for attackers to intercept or modify the data.

To secure your dapp using HTTPS, obtain an SSL/TLS certificate from a trusted certificate authority (CA). For example, offers free SSL/TLS certificates.

Install the certificate it on your web server. If you're using a static website hosting service, it might have a default way to enable HTTPS on your dapp.

Use Content Security Policy

Content Security Policy (CSP) is a security feature that can protect your dapp against various types of attacks, such as and .

CSP defines a set of policies that the browser must follow when displaying the dapp. See the full list of CSP directives that you can enable for your dapp in the .

Use CSP with a server setup

If you dapp uses a server setup, enable CSP by setting the Content-Security-Policy header in all responses from your server. For example, in Express.js, add the following middleware at the top of your server:

app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; frame-ancestors 'none'"
  );
  next();
});

In a header, this looks like the following:

Content-Security-Policy: default-src 'self'; frame-ancestors 'none'

Add this tag to the head section of an HTML file to instruct the browser on which CSP directives should be followed. For example:

<head>
  <meta
    http-equiv="Content-Security-Policy"
    content="default-src 'self'; frame-ancestors 'none'"
  />
</head>

CSP configuration is specific to each dapp. We recommend starting with the following secure and restrictive CSP:

default-src 'self'; frame-ancestors 'none'

default-src 'self' - By default, your dapp's code can't load or connect to content from outside your domain.

default-src: 'self'; frame-ancestors 'none'; img-src: 'opensea.io'

PreviousDevelop a Full Stack dApp on MELD NextDecentralized Storage

Last updated 1 year ago

Caution!

The following security advice isn't exhaustive.

Use HTTPS

To secure your dapp using HTTPS, obtain an SSL/TLS certificate from a trusted certificate authority (CA). For example, offers free SSL/TLS certificates.

Install the certificate it on your web server. If you're using a static website hosting service, it might have a default way to enable HTTPS on your dapp.

Use Content Security Policy

Content Security Policy (CSP) is a security feature that can protect your dapp against various types of attacks, such as and .

CSP defines a set of policies that the browser must follow when displaying the dapp. See the full list of CSP directives that you can enable for your dapp in the .

Use CSP with a server setup

app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; frame-ancestors 'none'"
  );
  next();
});

In a header, this looks like the following:

Content-Security-Policy: default-src 'self'; frame-ancestors 'none'

See of CSP in popular web frameworks and languages.

Use CSP with a static site

If your dapp uses a third party hosting provider, and you can't set a custom Content-Security-Policy header in the server responses, you can enable CSP by using the .

Add this tag to the head section of an HTML file to instruct the browser on which CSP directives should be followed. For example:

<head>
  <meta
    http-equiv="Content-Security-Policy"
    content="default-src 'self'; frame-ancestors 'none'"
  />
</head>

Configure your CSP

CSP configuration is specific to each dapp. We recommend starting with the following secure and restrictive CSP:

default-src 'self'; frame-ancestors 'none'

default-src 'self' - By default, your dapp's code can't load or connect to content from outside your domain.
frame-ancestors 'none' - Your dapp can't be embedded within the webpage of another domain (to prevent ).

From here, you can make adjustments as needed by your dapp to support the content you want to load. For example, if your dapp loads images hosted on , you can enable this by adding img-src 'opensea.io' to your CSP:

default-src: 'self'; frame-ancestors 'none'; img-src: 'opensea.io'

For more information and common use cases for CSP, see the .