環境

• Ruby 2.5.3
• Rails 5.2.2
• Yarn 1.7.0
• Webpacker 3.5.5
• Vue 2.5.21

現象

Vueコンポーネントで要素を埋め込んでいるが実行されず、ChromeのDevtool上では、<!-- -->に変換されているように見える

調べた

• javascript is not load in Production · Issue #1520 · rails/webpacker
  このIssueがとても参考になりました。なんか色々試しましたが結果的に、:unsafe_evalが原因でした

解せぬ

そもそもこの設定自体はもともと無かった物だが、rails new myapp --webpack=vueした後に、

if Rails.env.development?
  policy.script_src :self, :https, :unsafe_eval
else
  policy.script_src :self, :https
end

Vueを使う場合は、↑これをconfig/initializers/content_security_policy.rbに設定してね、って言われたので設定していた

そもそもunsafe-evalって何なの？

• コンテンツ セキュリティ ポリシー | Web | Google Developers
  セキュリティの識者でもないので詳しくはわからないがようするに、evalでテキスト埋め込まれてクロスサイトスクリプティングっていう必殺技でズタズタにされるみたいな雰囲気は伝わってきたので、許可はしないほうがよい、と。

どうすればよかったのか

• javascript is not load in Production · Issue #1520 · rails/webpacker
  rails newした時に生成されるhello_vue.jsのように、DOMをテンプレートとして使用するか、コンポーネントをレンダリング機能でロードするか選べるみたいだけど、production環境では、後者のコンポーネントをrenderでロードする方法でしか描画出来なかった、との事

今まで特に気にせずホイホイ書いてきたので、5.2からはより一層堅牢なコードになるよう心がける必要がありそう