IT分からんわ~_~;

IT色々お勉強中のブログ

SPAのAPIのCSRF保護

翻訳自分で読むため、許可は取ってない

blog.eq8.eu

用語定義

https://railsguides.jp/security.html#%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%B5%E3%82%A4%E3%83%88%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%83%95%E3%82%A9%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%AA-csrf

  • この例では削除アクションにGETリクエストを使用していますが、ガイドラインのリンクで詳しく説明されているように、悪意のあるWebサイトにPOSTまたはDELETEリクエストをこのように送信させることが可能です。

  • 通常、「静的Webサイトからフォームを送信する」という文脈でCSRF攻撃保護が言及されています。私は最近、API呼び出しに関連するCSRF保護について詳しく読んでいましたが、さまざまなテクノロジのWeb開発者が言うのはあまりに一般的です。→「APIに対するCSRF攻撃保護は必要ありません。」

  • そのことを頭に入れて、通常彼らは、APIがブラウザ以外の他のクライアント技術(例えば、AndroidiPhone、あなたのスマート冷蔵庫)によって使われることが予想されるアプリケーションについて話しています。しかし、通常この文脈ではブラウザセッションを使用しません。 しかし、ブラウザセッションを使用するアプリケーション(例:Devise Gemを使用しているRuby on Rails開発者)がいなくて、そのアプリケーションがAPIと通信している場合は、CSRF保護が必要です。

結論

アプリケーションがセッション/クッキーを使用する場合は、CSRF保護が必要です。他の形式の認証(前述のAWSがCognitoを介してリクエストに署名したようなもの)がある場合は、CSRF保護は必要ありません。

Ruby on Rails WebフレームワークでCSRF APIを処理する方法

  • Railsにはprotect_from_forgeryメソッドがあります。これはコントローラに配置でき、CSRFトークンが提供されていない限りPOST PUT PATCH DELETE呼び出しが発生しないようにします。

  • しかし問題はこのトピックがRails Helperを使ってCSRFトークンをレンダリングする静的サイトを扱っていると仮定していることです<<= = csrf_meta_tags%>

  • しかし、シングルページアプリを扱うときは、最初のレンダリング時にのみ新鮮なcsrf-tokenがあることを意味します。

  • CSRFトークンをCookieに格納するようにバックエンドを設定し、その後FrontEndフレームワーク(Angular、React)がCookieから新しい値を取得するというソリューションを指している人々を見ました。

  • そのため、このようにしてhttp://www.webapp.com/project/1を削除する悪意のある要求がCSRF-TOKENなしで行われることになります=>は実行されません。

これを詳細に説明した良い情報源がすでにあるので、私は段階的なチュートリアルを書くつもりはないです:

https://technpol.wordpress.com/2014/04/17/rails4-angularjs-csrf-and-devise/ https://stackoverflow.com/questions/14734243/rails-csrf-protection-angular-js-protect-from-forgery-makes-me-to-log-out-on https://github.com/jsanders/angular_rails_csrf (gem solution) deep details how CSRF Rails protection work

vue-loaderとは

vue-loader

  • vue-loaderはWebpack用のローダーです。これを使用すると、シングルファイルコンポーネントSFC)と呼ばれる形式でVueコンポーネントを作成できます。 v15からpuluginの読み込みが必須になった
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

vue-loader.vuejs.org

他にも色々変わったらしいが読むのがめんどい

react-native-paginationを使ってみる

www.npmjs.com

React Nativeに最適なページネーションコンポーネント

Roadmap

github.com

Horizontal

これらを自分で試してみるのは簡単です。Xcodeでただexamples/ios/*.xcodeprojを開いてください。 次にCmd + Rを押します。あなたはスイッチケースのためにexamples / index.ios.jsを編集することができます。

試しかた

yarn add react-native-pagination

Properties

  • すべてのプロパティはテキストエディタの自動補完を考慮し、基本構造[prefix] [body] [suffix]に従います。ここでは[component name] [component attribute]

  • [continued component attribute / component change] 接頭辞を扱うときに公式のドキュメントを見直してください、オプションの完全なリストをユーザに提供するため。

  • 最も一般的なコンポーネントプレフィックスオプション:dot、startDot、endDot

  • 最も一般的なコンポーネント本体のオプション:Icon, Font,Style ,Color

  • 最も一般的なコンポーネントサフィックスのオプション:Hide, Size,IconFamily ,or NotActive,Active Empty dotIconHide、startDotIconHide、またはstartFontSize、endDotStyleなどの結果のプロパティ

基本プロパティ

Prop Default Type 説明
paginationItems array 配列のページネーション
paginationVisibleItems array React Native ListコンポーネントのonViewableItemsChangedコールバック関数を使用して取得した配列のページ分割表示項目(例を参照)
dotThemeLight false bool dotThemeLightプロップを渡すと(trueに設定)、ページネーションドットは明るいテーマに切り替わります。デフォルトでは暗いです。
horizontal false bool 水平方向と垂直方向を切り替えるために使用します(リストコンポーネントで行うのと同じように)
dotAnimation LayoutAnimation.Presets.easeInEaseOut Animation dot移動中に発生するアニメーション
paginationStyle {} style ページネーションスタイル
pagingEnabled false bool ページングを有効にします。これはReact Native List Components(FlatListのような)でも使われているpropsで、新しいページのスクロールを止めるページング効果があります。
hideEmptyDots false bool 空のdotを隠します
paginationItemPadSize 3 number pagination Item Pad Size

ScrollableTabViewの使い方

github.com

訳↓

これはおそらくAndroid上の私のお気に入りのナビゲーションパターンです、私はそれがiOS上でより一般的だったことを願っています! これはReact Nativeのための非常に単純なJavaScriptのみの実装です。この背景にあるアニメーションがどのように機能するかについての詳細は、React Native Animation GuideのReboundセクションをチェックしてください。

Props

  • renderTabBar 1つの引数を受け取り、タブバーとして使用するコンポーネントを返す必要があります。コンポーネントは引数に追加されたgoToPage、tabs、activeTabおよびrefを持ち、タブの内容と共にそれ自身をアニメートできるようにするためにsetAnimationValueを実装出来ます。手動で引数をTabBarコンポーネントに渡すことができます。 ScrollableTabBarを渡すだけでも良い

  • initialPage 最初に選択されたタブのインデックス。デフォルトは0 ===最初のタブです。

  • style これを見ろ

neovim deinに再挑戦

brew install neovim/neovim/neovim
curl https://raw.githubusercontent.com/Shougo/dein.vim/master/bin/installer.sh > installer.sh
sh ./installer.sh ~/.cache/dein
call dein#install()

nvim ~/.config/nvim/init.vim

set number             "行番号を表示
set autoindent         "改行時に自動でインデントする
set tabstop=2          "タブを何文字の空白に変換するか
set shiftwidth=2       "自動インデント時に入力する空白の数
set expandtab          "タブ入力を空白に変換
set splitright         "画面を縦分割する際に右に開く
set clipboard=unnamed  "yank した文字列をクリップボードにコピー
set hls                "検索した文字をハイライトする

if &compatible
  set nocompatible               " Be iMproved
endif
set runtimepath+=/Users/t/.cache/dein/repos/github.com/Shougo/dein.vim

" Required:
if dein#load_state('/Users/t/.cache/dein')
  call dein#begin('/Users/t/.cache/dein')
  call dein#load_toml('~/.config/nvim/dein.toml', {'lazy': 0})
  call dein#load_toml('~/.config/nvim/dein_lazy.toml', {'lazy': 1})
  call dein#end()
  call dein#save_state()
endif

if dein#check_install()
  call dein#install()
endif
filetype plugin indent on
syntax enable

nvim .config/nvim/dein.toml

[[plugins]]
repo = 'Shougo/dein.vim'

[[plugins]]
repo = 'tpope/vim-endwise'

[[plugins]]
repo = 'Townk/vim-autoclose'

[[plugins]]
repo = 'joshdick/onedark.vim'
hook_add = '''
  colorscheme onedark
'''

[[plugins]]
repo = 'w0rp/ale'

[[plugins]]
repo = 'airblade/vim-gitgutter'
hook_add = '''
  source ~/.config/nvim/plugins/gitgutter.vim
'''

[[plugins]]
repo = 'tpope/vim-fugitive'
hook_add = '''
  source ~/.config/nvim/plugins/fugitive.vim
'''

[[plugins]]
repo = 'Shougo/denite.nvim'
hook_add = '''
  source ~/.config/nvim/plugins/denite.vim
'''

[[plugins]]
repo = 'osyo-manga/vim-anzu'
hook_add = '''
  source ~/.config/nvim/plugins/anzu.vim
'''

.config/nvim/plugins/anzu.vim

nmap n <Plug>(anzu-n-with-echo)
nmap N <Plug>(anzu-N-with-echo)
nmap * <Plug>(anzu-star)
nmap # <Plug>(anzu-sharp)

.config/nvim/plugins/denite.vim

nnoremap [denite] <Nop>
nmap <C-d> [denite]
nnoremap <silent> [denite]g :<C-u>Denite grep -buffer-name=search-buffer-denite<CR>
nnoremap <silent> [denite]r :<C-u>Denite -resume -buffer-name=search-buffer-denite<CR>
nnoremap <silent> [denite]p :<C-u>Denite file_rec<CR>

call denite#custom#option('default', 'prompt', '>')
call denite#custom#option('_', 'highlight_matched_range', 'None')
call denite#custom#option('_', 'highlight_matched_char', 'None')
call denite#custom#map('insert', "<Tab>", '<denite:move_to_next_line>')
call denite#custom#map('insert', "<S-Tab>", '<denite:move_to_previous_line>')
call denite#custom#map('insert', "<C-t>", '<denite:do_action:tabopen>')
call denite#custom#map('insert', "<C-v>", '<denite:do_action:vsplit>')
call denite#custom#map('normal', "v", '<denite:do_action:vsplit>')
call denite#custom#var('grep', 'command', ['pt', '--follow', '--nogroup', '--nocolor', '--hidden'])
call denite#custom#var('grep', 'default_opts', [])
call denite#custom#var('grep', 'recursive_opts', [])
call denite#custom#var('file_rec', 'command', ['pt', '--follow', '--nocolor', '--nogroup', '--hidden', '-g', ''])

.config/nvim/plugins/fugitive.vim

command Gst :Gstatus
command Gdf :Gdiff
command Gbl :Gblame<Paste>

.config/nvim/plugins/gitgutter.vim

set signcolumn=yes
set updatetime=1000

nnoremap [gitgutter] <Nop>
nmap <C-h> [gitgutter]
nmap [gitgutter]j <Plug>GitGutterNextHunk
nmap [gitgutter]k <Plug>GitGutterPrevHunk
nmap [gitgutter]u <Plug>GitGutterUndoHunk

.config/nvim/dein_lazy.toml

[[plugins]]
repo = 'Shougo/deoplete.nvim'
on_event = 'InsertEnter'
hook_add = '''
  source ~/.config/nvim/plugins/deoplete.vim
'''

.config/nvim/plugins/deoplete.vim

let g:deoplete#enable_at_startup = 1
inoremap <expr><Tab> pumvisible() ? "\<DOWN>" : "\<Tab>"
inoremap <expr><S-Tab> pumvisible() ? "\<UP>" : "\<S-Tab>"
  • なんかエラーになったので、、 normalモードで
:CheckHealth
:echo has('python3')

0ならダメ

brew install python3
pip3 install --upgrade neovim

新しいのを使う

:UpdateRemotePlugins

aleがまだ動いてない気がする、、、まぁとりあえずいっか

ag インストール使い方

brew install ag

探したくない奴はここに書く

~/.agignore
log

オプション -G 正規表現 --hidden 隠しファイルも -i, --ignore-case 大文字小文字の違いを無視 -s, --case-sensitive 大文字小文字の違いを考慮する

その他オプション

qiita.com