---
slug: the-nuclear-option-no-more-unsafe-inline
title: "The Nuclear Option (No More unsafe-inline)"
date: "2021-10-25T18:50:13-04:00"
draft: false

pics:
  securityheaders:
    css: "image"
    tip: "Updated Security Headers scan result."
    sources:
      - "/files/posts/the-nuclear-option-no-more-unsafe-inline/securityheaders.webp"
      - src: "/files/posts/the-nuclear-option-no-more-unsafe-inline/securityheaders.png"
        width: 1218
        height: 248
---
As you can see from the [last post][], I went with the nuclear option
and created a [Hugo table shortcode][git], then did the following:

1. Updated all the tables on the site to use the new [table
   shortcode][git].
2. Removed `style-src 'self' 'unsafe-inline'` from the
   [`Content-Security-Policy` header][csp].
3. Re-ran the [Security Headers][securityheaders] scan.

Here is the updated [`Content-Security-Policy`][csp] from the [Apache][]
config:

```apache
# look ma, no unsafe-inline!
Header append "Content-Security-Policy" "default-src 'self'; img-src 'self' https://pmdn.org"
```
 

And here is the updated [Security Headers][securityheaders] scan result:

[{{< pe-figure "securityheaders" >}}][securityheaders-results]

A couple of recommendations for folks getting started with [Hugo][]:

1. Do not use `<img>`; use the [figure shortcode][] instead.  The latter
   is far more flexible and also works well with a responsive design.
2. If you are embedding complex tables or you are generating tables with
   alignment and want to avoid inline `style` attributes, do not use the
   [Markdown][] table syntax.  Use [hugo-shortcode-table][git] instead.

[last post]: {{< relref "posts/2021-10-25-table-shortcode-for-hugo.md" >}}
  "Release announcement for hugo-shortcode-table."
[git]: https://pablotron.org/pablotron/hugo-shortcode-table
  "Table shortcode for hugo."
[securityheaders]: https://securityheaders.com/
  "HTTP response header scanner."
[securityheaders-results]: https://securityheaders.com/?q=pablotron.org&hide=on&followRedirects=on
[csp]: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
  "Content-Security-Policy HTTP response header"
[apache]: https://apache.org/
  "Apache web server."
[hugo]: https://gohugo.io/
  "Hugo static site generator"
[figure shortcode]: https://gohugo.io/content-management/shortcodes/#figure
  "Hugo figure shortcode"
[markdown]: https://en.wikipedia.org/wiki/Markdown
  "Markdown markup language"