Content-Security-Policy blocks Blockonomics pay button

Help
1

I’m im trying to use blockonomics payment buttons but its getting blocked by Content-Security-Policy.

This is the error - Content Security Policy: The page’s settings blocked the loading of a resource at https://www.blockonomics.co/js/pay_button.js (“default-src”).

Have tried this "meta http-equiv=“Content-Security-Policy” content=“default-src *; script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’ https://www.blockonomics.co/; style-src ‘self’ ‘unsafe-inline’”

but its still getting blocked. Any help is appreciated.

1 Like
2

Hi @sidontoken,

You can’t override the policy in the Content-Security-Policy HTTP header with a less-restrictive policy. You need to instead change the code that’s setting the value of the Content-Security-Policy HTTP header. eg.
Header set Content-Security-Policy "script-src ...;"
Should be changed to
Header set Content-Security-Policy "script-src 'unsafe-inline' 'unsafe-eval' https://www.blockonomics.co/js/ https://maxcdn.bootstrapcdn.com/bootstrap/"

Please let me know if this solves your issue, or if you require any further assistance.

Kind regards

3

Sorry I forgot to mention that it’s an next js and tailwins css app.

This is what i have now. I forgot to put it into a code bracket thats why the </> was not there

 <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.blockonomics.co"/>

could you put your response into a meta tag? Thank you.

1 Like
4

In NextJS, the Content-Security-Policy is typically set in the next.config.js file: Advanced Features: Security Headers | Next.js

Both https://www.blockonomics.co/js/ and https://maxcdn.bootstrapcdn.com/bootstrap/ should be added to the headers in the next.config.js file

module.exports = {
  async headers() {
    return [
      {
        // Apply these headers to all routes in your application.
        source: '/:path*',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.blockonomics.co/js/ https://maxcdn.bootstrapcdn.com/bootstrap/",
          }
        ],
      },
    ]
  },
}

Your application may also be using a module similar to next-secure-headers, which helps manage the headers in your app. The next.config.js configuration would look similar to the following in this case:

const { createSecureHeaders } = require("next-secure-headers");

module.exports = {
  async headers() {
    return [{
      soruce: "/(.*)",
      headers: createSecureHeaders({
        contentSecurityPolicy: {
          directives: {
            styleSrc: ["'self'", "https://www.blockonomics.co/js/", "https://maxcdn.bootstrapcdn.com/bootstrap/"],
          },
        },
      }),
    }];
  },
};

Please locate how the current policy is being set in your nextjs application, and add the 2 urls to this.