CODEWITHSUNDEEP
content-security-policy
LiveEn
LiveEn

Reputation: 3253

Content Security Policy: The page’s settings blocked the loading of a resource at data:image/svg+xml;base64,PHN2ZyB3aWR0aD… (“default-src”)

I am trying to add a paypal button, but the image doesnt load and gives the below error

Content Security Policy: The page’s settings blocked the loading of a resource at data:image/svg+xml;base64,PHN2ZyB3aWR0aD… (“default-src”)

Below is my meta code

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

I have many external scripts/css/images which are loaded and i want allow everything to load without getting blocked.

Any help will be appreciated

Upvotes: 4

Views: 8123

Answers (2)

Dan
Dan

Reputation: 595

I recommend you to use helmet library instead of hard-coding security headers in your head tag even if having master pages. After that you can check if your headers are now secured on https://securityheaders.com/.

In case of nodejs my implementation looks like following:

const helmet = require('helmet');
app.use(
    helmet.contentSecurityPolicy({
      useDefaults: false,
      "block-all-mixed-content": true,
      "upgrade-insecure-requests": true,
      directives: {
        "default-src": [
            "'self'"
        ],
        "base-uri": "'self'",
        "font-src": [
            "'self'",
            "https:",
            "data:"
        ],
        "frame-ancestors": [
            "'self'"
        ],
        "img-src": [
            "'self'",
            "data:"
        ],
        "object-src": [
            "'none'"
        ],
        "script-src": [
            "'self'",
            "https://cdnjs.cloudflare.com"
        ],
        "script-src-attr": "'none'",
        "style-src": [
            "'self'",
            "https://cdnjs.cloudflare.com",
            "https://fonts.googleapis.com"
        ],
      },
    }),
    helmet.dnsPrefetchControl({
        allow: true
    }),
    helmet.frameguard({
        action: "deny"
    }),
    helmet.hidePoweredBy(),
    helmet.hsts({
        maxAge: 123456,
        includeSubDomains: false
    }),
    helmet.ieNoOpen(),
    helmet.noSniff(),
    helmet.referrerPolicy({
        policy: [ "origin", "unsafe-url" ]
    }),
    helmet.xssFilter()
);

More info about these filters can be found on https://helmetjs.github.io/

Upvotes: 0

Halvor Sakshaug
Halvor Sakshaug

Reputation: 3465

You have defined img-src with just * which will include everything HTTP or HTTPS depending on your connection. 'data' will not be included. You will need to include data: (with the colon but without quotes) to img-src. You have included 'data' in default-src, but as you have defined img-src this fallback will not be used. Also check your syntax as pointed out by @sideshowbarker.

Upvotes: 5

Related Questions