Search code examples
vue.jswebpackwebsocketcontent-security-policyvue-cli

Content Security Policy directive after build to production

im working with websocket using vue2 it work properly before after i move the server to new one my project refused to make a handshake with the channel

Reproduction link

https://realsportindo.com/event/kejuaraan-kata-virtual-forki-jabar-2020/medals

you can see the log for webscoket blocked

Refused to connect to 'wss://example.com/socket//websocket?vsn=1.0.0' because it violates the following Content Security Policy directive: "default-src 'self' http: https: data: blob: 'unsafe-inline'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

it not happen when production it happen only after build and deploy to production

Solution

  • The error message:

    because it violates the following Content Security Policy directive: "default-src 'self' http: https: data: blob: 'unsafe-inline'".
    Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

    says that acting Content Security Policy does not contain connect-src directive, but your meta-tag in the HTML code does contain it:
    <meta http-equiv=Content-Security-Policy content="default-src 'self' https: http: ws: wss: 'unsafe-eval' 'unsafe-inline'; img-src 'self' data: http: https:; connect-src ws: wss: https: http:">

    This means you have a 2 CSPs published:

    • one is through meta-tag in the HTML code
    • second is through HTTP-header sending by the server, you can see it in Dev Tool:

    CSP via HTTP header

    Since you have 2 different Content Security Policy, all sources should pass unscrathed via both these policies. But the second one does not allows wss: therefore locks it.

    You need to delivery CSP in one way: meta tag or HTTP header.

    Btw: your CSP rules are so open, that you even do not need a CSP - it does restrict nothing.