0

Why do I get a Content-Security-Policy violation on style-src 'self' when there are no inline styles? I have a server in Go, and a web app in Elm. Here is a minimal example:

Server (Go 1.12):

package main

import (
    "fmt"
    "io"
    "io/ioutil"
    "net/http"
    "os"
)

const indexhtml = `
<!DOCTYPE HTML>
<html>
<head>
  <script src="main.js"></script>
</head>
<body>
  <div id="elm"></div>
  <script src="elm.js"></script>
</body>
</html>`

const elmjs = `
var app = Elm.Main.init({
    node: document.getElementById('elm')
})`

const csp = "style-src 'self'; report-uri http://localhost:3333/cspreport;"

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        w.Header().Add("Content-Security-Policy", csp)
        io.WriteString(w, indexhtml)
    })
    http.HandleFunc("/elm.js", func(w http.ResponseWriter, r *http.Request) {
        io.WriteString(w, elmjs)
    })
    http.HandleFunc("/main.js", func(w http.ResponseWriter, r *http.Request) {
        f, _ := os.Open("main.js")
        io.Copy(w, f)
    })
    http.HandleFunc("/cspreport", func(w http.ResponseWriter, r *http.Request) {
        body, _ := ioutil.ReadAll(r.Body)
        fmt.Println(string(body))
    })
    fmt.Println(http.ListenAndServe(":3333", nil))
}

Elm 0.19 code (that compiles to main.js):

module Main exposing (main)

import Element as E


main =
    E.layout [] <|
        E.row [] [ E.text "a", E.text "b" ]

And the server prints out this CSP violation (twice):

{
   "csp-report":{
      "blocked-uri":"inline",
      "column-number":1,
      "document-uri":"http://localhost:3333/",
      "line-number":1,
      "original-policy":"style-src 'self'; report-uri http://localhost:3333/cspreport",
      "referrer":"",
      "source-file":"http://localhost:3333/",
      "violated-directive":"style-src"
   }
}

The problem goes away if I add 'unsafe-inline' to 'style-src' in the CSP, but I don't really want to do that. It also goes away if I don't use 'row' in the Elm code, but I need it.

I think this answer is relevant, but still doesn't give me a fix.

(For convenience, I have put the above code in a Github repo.)

8n8
  • 1,233
  • 1
  • 8
  • 21
  • 1
    Pull up the page, and look at the actual rendered Page Source. Are you *sure* there's no inline script somewhere? Maybe inserted by some bit of code? – Stephen R Aug 08 '19 at 16:38
  • Thanks, I just did that, looking in the 'inspector' tab in the developer pane in Firefox, and there is a whole lump of inline style, presumably put there by the Elm code. I still don't know what to do though. I could use 'unsafe-inline', but I'd prefer not to for security reasons. Or I could not use elm-ui and have a separate CSS file, but I was really happy at not having to deal with CSS. – 8n8 Aug 08 '19 at 17:24
  • Can you move the inline css to your user.css stylesheet? If you can modify the Elm code, take out the style description and let it point to a class, unless the generated css code is dynamic. – sluc Apr 19 '21 at 14:09

0 Answers0