CSP の設定
参考：
Ruby on Rails 5.2 の新機能 (Active Storage, Content Security Policy など) – Qiita
RailsでContent Security Policy (CSP) 導入する | Templarbit
Ruby on Rails Content-Security-Policy (CSP) | Rails security by bauland42
Content Security Policy | Ruby on Rails Guides [Official]
書き方
参考：
CSP (Contents Security Policy) の記述例 | Web Application Security Memo
Content Security Policy | Ruby on Rails Guides [Official]
Rails UJS, Turbolinks and CSP – Stack Overflow
リファレンス
参考：
Content Security Policy CSP Reference & Examples | Foundeo Inc.
まとめ
参考：
CSP
参考：
コンテンツ セキュリティ ポリシー | Google Developers
Content Security Policy でユーザーを守ろう | bitbank techblog
default-src
参考：
base-uri
参考：
base タグとは｜コーディングのプロが作る HTML タグ辞典
frame-ancestors
参考：
img-src
参考：
media-src
参考：
script-src
参考：
nonce-source について調べてみた | A Day in Serenity (Reloaded)
script-src で nonce を使う
config/initializers/content_security_policy.rb で nonce ジェネレーターを設定する。
Rails.application.config.content_security_policy_nonce_generator = \
-> (_request) { SecureRandom.base64(16) }
ビューのレイアウトで rails-ujs で使われる meta タグを生成する。
<%= csp_meta_tag %>
JavaScript をファイルから読み込む際に nonce を有効にする。
<%= javascript_include_tag "script", nonce: true %>
JavaScript を埋め込む際に nonce を有効にする。
<%= javascript_tag nonce: true do %>
alert('hello, nonce!')
<% end %>
script タグに nonce を埋め込む。
<script nonce="<%= content_security_policy_nonce %>">
alert('hello, nonce!')
</script>
参考：
Content Security Policy | Ruby on Rails Guides [Official]
csp_meta_tag – ActionView::Helpers::CspHelper | Ruby on Rails API [Official]
javascript_tag – ActionView::Helpers::JavaScriptHelper | Ruby on Rails API [Official]
rails/javascript_helper.rb at v5.2.2 · rails/rails – GitHub
Webpacker
参考：
Webpacker and CSP · Issue #1057 · rails/webpacker – GitHub
Webpack
参考：
Add support for `nonce` attribute (CSP) · Issue #455 · webpack/webpack – GitHub
Vue.js
参考：
ランタイム + コンパイラとランタイム限定の違い | Vue.js [公式]
Vue – rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails – GitHub
CSP environments | Vue.js [Official]
nonce の仕組み
HTTP レスポンスヘッダーで Content-Security-Policy を出力する。
Content-Security-Policy: script-src 'nonce-01234abcde';
レスポンスボディ (HTML) の script タグに nonce を埋め込む。
<script nonce="01234abcde">
alert('hello, nonce!');
</script>
参考：
rails commit log 流し読み 2018/02/23 | なるようになるブログ
翻訳 現実の Web に向けた CSP | Mozilla Security Blog 日本語版
そろそろ CSP Lv.2 nonce やろう | teppeis blog
Content-Security-Policy と nonce の話 | tokuhirom’s blog
content_security_policy_nonce_generator
config/initializers/content_security_policy.rb で nonce ジェネレーターを設定する。
Rails.application.config.content_security_policy_nonce_generator =
-> (_request) { SecureRandom.base64(16) }
参考：
rails/content_security_policy.rb.tt at v5.2.2 · rails/rails – GitHub
content_security_policy_nonce_directives
nonce を付与するディレクティブを指定する。
Rails.application.config.content_security_policy_nonce_directives = %w[script-src]
参考：
content_security_policy_nonce_directives – rails/application.rb at v6.0.0.rc2 · rails/rails – GitHub
csp_meta_tag
rails-ujs が Ajax などで用いる nonce を埋め込んだ meta タグを生成する。
<html>
<head>
...
<%= csp_meta_tag %>
...
</head>
...
</html>
参考：
csp_meta_tag – ActionView::Helpers::CspHelper | Ruby on Rails API [Official]
rails/csp_helper.rb at v5.2.2 · rails/rails – GitHub
ActionDispatch::ContentSecurityPolicy
参考：
ActionDispatch::ContentSecurityPolicy | Ruby on Rails API [Official]
rails/content_security_policy.rb at v5.2.2 · rails/rails – GitHub
content_security_policy_nonce
コントローラーやビューからはリクエストに含まれる値を参照できる。
request.content_security_policy_nonce
ミドルウェアからは env に含まれる値を参照できる。
env["action_dispatch.content_security_policy_nonce"]
参考：
rails/javascript_helper.rb at v5.2.2 · rails/rails
rails/action_controller/metal/content_security_policy.rb at v5.2.2 · rails/rails – GitHub
rails/action_dispatch/http/content_security_policy.rb at v5.2.2 · rails/rails – GitHub
cspNonce
JavaScript 内からは Rails.cspNonce() で meta タグに設定された nonce を取得できる。
console.log(Rails.cspNonce())
参考：
rails/csp.coffee at v5.2.2 · rails/rails – GitHub
CSP Level 3
参考：
Content Security Policy Level 3 における XSS 対策 | pixiv inside
Chrome の img-src バグ
普通のブラウザはこれで全て読み込める。
img-src: *;
Chrome は * に data: が含まれないので、別途 data: の指定が必要。
img-src: * data:;
参考：
img-src * としたのに Chrome で blob の画像を読み込もうとしたらセキュリティーエラーになった。- Qiita
Content Security Policy “data” not working for base64 Images in Chrome 28 – Stack Overflow
CSP の設定をしたら RVT が使えなくなった
コントローラーで CSP ヘッダーを設定する。
module RVT
class ApplicationController < ActionController::Base
before_action :set_content_security_policy_header
CONTENT_SECURITY_POLICY = %w[
default-src 'self' https:;
font-src 'self';
img-src * data:;
object-src 'none';
style-src
'self' 'unsafe-inline';
script-src
'self' 'unsafe-inline' 'unsafe-eval';
media-src 'none';
connect-src
'self'
http://localhost:3035
ws://localhost:3035;
base-uri 'self';
frame-ancestors 'self' https:;
].join(" ")
def set_content_security_policy_header
response.set_header(
"Content-Security-Policy",
CONTENT_SECURITY_POLICY
)
end
end
end