Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use of inline event handlers is insecure - causes Content-Security-Policy failure unless using 'unsafe-inline' #85

Open
goldjg opened this issue Jan 1, 2023 · 2 comments
Open

Use of inline event handlers is insecure - causes Content-Security-Policy failure unless using 'unsafe-inline' #85

goldjg opened this issue Jan 1, 2023 · 2 comments

Comments

@goldjg
Copy link

goldjg commented Jan 1, 2023

Describe the bug
I'm using this theme to host my blog at cirriustech.co.uk and I use a Content-Security-Policy HTTP Header to ensure the security of the site.

In most cases, any inline scripts or styles I can generate a hash of them and use the hash in the CSP to ensure the integrity of the resources.

However, there are 2 places where inline event handlers are used and these can't use hashes. Nonces are an alternative but they are not trivial when using a static site generator like Hugo and would require the use of some sort of Edge Worker/Function in Javascript with Netlify who I use to host my site.

So for now I have to set 'unsafe-inline' for both script-src and style-src which is insecure and considered a bad practice.

Please consider changes to avoid all inline scripts and inline styles.

To Reproduce
Steps to reproduce the behavior:

  1. Apply a Content-Security-Policy header via your webserver, or if using Netlify, the netlify.toml file e.g.
  [[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "SAMEORIGIN"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Content-Security-Policy = "default-src 'self' links.services.disqus.com disqus.com c.disquscdn.com cirriustech.disqus.com *.cirriustech.co.uk; script-src 'self' c.disquscdn.com cirriustech.disqus.com *.cirriustech.co.uk platform.twitter.com d33wubrfki0l68.cloudfront.net cdn.jsdelivr.net; style-src 'self' c.disquscdn.com fonts.googleapis.com *.cirriustech.co.uk cdn.jsdelivr.net d33wubrfki0l68.cloudfront.net; img-src 'self' *.licdn.com www.cloudflare.com www.google-analytics.com referrer.disqus.com c.disquscdn.com *.cirriustech.co.uk links.services.disqus.com d33wubrfki0l68.cloudfront.net; font-src 'self' fonts.googleapis.com fonts.gstatic.com *.cirriustech.co.uk cdn.jsdelivr.net; form-action 'self' *.cirriustech.co.uk; frame-src disqus.com cirriustech.disqus.com *.cirriustech.co.uk www.youtube.com platform.twitter.com; upgrade-insecure-requests"
    Strict-Transport-Security = "max-age=31536000; includeSubDomains"
    X-Powered-By = "Cloudy Unicorns"
    x-ms-blob-type = "redacted"
    x-ms-lease-state = "redacted"
    x-ms-lease-status = "redacted"
    Upgrade-Insecure-Requests = "1"
    Referrer-Policy = "same-origin"
    Permissions-Policy = "payment=(self), geolocation=(self)"
  1. Build site and then browse to site - notice that several elements of CSS and fonts are broken
  2. Press F12 to enter developer tools in browser and view Console
  3. See errors such as below (will show as line 1 as it's minified but the offending code for this is, I think, media=print onload='this.media="all and <body class=light onload=loading()><script>window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script>:
develop--cirriustech-bend.netlify.app/:1 

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' c.disquscdn.com cirriustech.disqus.com *.cirriustech.co.uk platform.twitter.com d33wubrfki0l68.cloudfront.net cdn.jsdelivr.net". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

develop--cirriustech-bend.netlify.app/:1 
        
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' c.disquscdn.com cirriustech.disqus.com *.cirriustech.co.uk platform.twitter.com d33wubrfki0l68.cloudfront.net cdn.jsdelivr.net". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

Expected behavior
I would expect these to either not be inline, or to move the handler into javascript such as solution 1 here https://makandracards.com/makandra/503862-using-inline-event-handlers-with-a-strict-content-security-policy-csp

I may have a go at this myself but I am far from a web developer!

Screenshots
N/A

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser: Edge
  • Version: 108.0.1462.54 (Official build) (64-bit)

Smartphone (please complete the following information):

  • Device: iPhone 14 Pro Max
  • OS: iOS 16.2
  • Browser: Safari

Additional context
N/A
@goldjg
Copy link
Author

goldjg commented Jan 1, 2023

See also https://content-security-policy.com/unsafe-hashes/ which again shows the preferred way to do this.

@gurusabarish
Copy link
Owner

Thanks @goldjg for reporting. I will look into it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@goldjg @gurusabarish