v-select fails CSP

[roryprimrose]

Steps to reproduce

• Use a v-select on a site where the server sets a script-src CSP of script-src 'self' https://az416426.vo.msecnd.net/scripts/a/ai.0.js;
• Click on select to display the options.
• Select an option

Browser reports

Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' https://az416426.vo.msecnd.net/scripts/a/ai.0.js". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

CSP report payload

{
    "csp-report": {
        "document-uri": "http://localhost:8043/",
        "referrer": "",
        "violated-directive": "script-src",
        "effective-directive": "script-src",
        "original-policy": "default-src 'none'; font-src https://fonts.gstatic.com/s/materialicons/ https://fonts.gstatic.com/s/roboto/; script-src 'self' https://az416426.vo.msecnd.net/scripts/a/ai.0.js; style-src 'self' https://fonts.googleapis.com/css; connect-src 'self' https://dc.services.visualstudio.com/v2/track https://techmentor.auth0.com/ https://techmentorapidev.azurewebsites.net/; img-src 'self' data:; object-src 'none'; report-uri https://techmentors.report-uri.io/r/default/csp/enforce",
        "disposition": "enforce",
        "blocked-uri": "inline",
        "line-number": 1,
        "source-file": "http://localhost:8043/",
        "status-code": 200,
        "script-sample": ""
    }
}

Versions

Chrome 62, Windows 10

 "dependencies": {
    "auth0-js": "^8.9.3",
    "axios": "^0.17.0",
    "es6-promise": "^4.1.1",
    "izitoast": "^1.1.5",
    "marked": "^0.3.6",
    "store": "^2.0.12",
    "tz-ids": "^1.0.0",
    "vee-validate": "^2.0.0-rc.14",
    "vue": "^2.4.2",
    "vue-application-insights": "^1.0.3",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^6.0.0",
    "vue-router": "^3.0.1",
    "vuetify": "^0.16.7",
    "vuex": "^3.0.0",
    "vuex-persistedstate": "^2.0.0"
  },

What is expected ?

Selecting an option should not violate a CSP.

What is actually happening ?

Selecting an option appears to be trying to execute a JavaScript url.

The enforced CSP failure does not prevent the select from operating as expected.

Reproduction Link

I can't use a codepen to produce this because it requires the server to provide the CSP in response headers. You can see this in action at https://techmentorwebdev.azurewebsites.net which uses v-select components on the home page.

[nekosaur]

Is there any way to get more info on what exactly in the script is causing this warning? Not sure about the rest of the team but I'm not familiar with CSP, so unsure exactly how one would go about debugging this.

What happens if you remove the application insights script/vue plugin. Does the warning still show?

[KaelWD]

It's because v-list-tiles are anchor tags with href="javascript:;", which isn't allowed to run without unsafe-inline being enabled.

[roryprimrose]

Yeah, that would definitely break CSP. The reason that the CSP enforce doesn't break the functionality here is because the script in itself is a no-op.

Why is an anchor used for that component if there is no navigation?

There is an interesting option found in this SO comment - https://stackoverflow.com/a/22530755/369962

[botic]

Ran into the same problem. You can spin up a webserver and add a strict CSP with everything disallowed except 'self'. So a HTTP header like Content-Security-Policy: default-src 'self' data:;

See https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP#Examples_Common_use_cases

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord