Web標準のHTTPクライアントfetch()でストリーミングしながらアップロードできるようになる。
こんにちは、サイオステクノロジー 武井です。 ※本記事の英語版はこちら(Click here to read in English) 今回は、OAuthを認証に利用することの危うさについて書きたいと思います。参考にさせていただきましたのは以下の記事になります。 https://www.thread-safe.com/2012/01/problem-with-oauth-for-authentication.html この記事では、OAuth2.0のImplicit Flowを使って認証を行った場合、悪意のあるユーザーが、簡単に他の誰かになりすますことができてしまうということが書いてあります。 今回、これを私なりにわかりやすく解説を試みてみたいと思います。 OAuth認証とは？ 本来、OAuthは認証につかうプロトコルではありません。APIなどの認可(このユーザーに対しては、ユーザー情報を読
FlexboxとCSS Gridのどちらを使った方がよいか悩んだことはありませんか？ FlexboxとCSS Gridの使い分け方、それぞれの違い、Flexboxの実装例、CSS Gridの実装例、FlexboxとCSS Gridを組み合わせた実装例、フォールバックと古いブラウザのサポート方法を解説します。 Grid for layout, Flexbox for components by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS GridとFlexboxの違い CSS GridとFlexboxの使い分け方 CSS Gridの実装例 Flexboxの実装例 CSS GridとFlexboxを組み合わせて使用する フォールバックと古いブラウザのサポート CSS GridまたはF
tokenを保存する場所 localStorage cookie cookie (http only) メモリ内 (変数) よく言われるのが JWT tokenをlocalStorageに入れるべきではない ということ。 理由としてはJavascriptで簡単に読めてしまうので、XSSがあった場合意図しないスクリプトを動かされてしまい、結果としてtokenが盗まれるというもの。 対応策として cookie (http only) を色んな所で推奨してる。 https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851 http://cryto.net/~joepie91/blog/2016/06/13/stop-using-jwt-for-sessions/ http://cryto.net/~joepie91/blog/2016/06/19/
あなたは Hooks を使って複数のコンポーネントを書きました。ちょっとしたアプリも作ったことがあるでしょう。満足もしている。API にも慣れて、その過程でコツも掴んできました。しかも重複したロジックを転用できるよう Custom Hooks を作り、同僚に自慢して見たり。 でも useEffect を使う度、いまいちピンときません。class のライフサイクルとは似ているけど、何かが違う。そしていろんな疑問を抱き始めます。 🤔 componentDidMount を useEffect で再現する方法は？ 🤔 useEffect 内で正確に非同期処理を行う方法とは？ []ってなに？ 🤔 関数をエフェクトの依存関係として記すべき？ 🤔 非同期処理の無限ループがたまに起こるのはなぜ？ 🤔 古い state か props がエフェクト内にたまに入るのはなぜ？ 私も Hooks を使
import React, { useState, useEffect } from 'react' import ReactDOM from 'react-dom' function Counter(props) { const [count, setCount] = useState(0) const [lastUpdatedAt, setLastUpdatedAt] = useState(null) useEffect(() => {// 『count』 が更新された際に、それに伴い必ず実行される setLastUpdatedAt(new Date().toString()) }, [count]) return ( <div> <p>カウント {count} 回目</p> {/* 変な要件の機能だなぁ…🤔 */} <p>🎉最終カウントアップ日時🎉 {lastUpdatedAt
Reactは便利なライブラリですが、ライブラリの想定を外れる使い方をするとうまく動かないとか、進化が続いているのですでに古くなってしまった書き方とかが存在します。 ここでは、そのような、Reactでやるべきでない書き方についてまとめてみました。 ★★★★ この「★★★★」は、「守らないと正常動作しなくなる」レベルのものについて扱います。 JSXを使うファイルでReactを用意し忘れる JSXはReact.createElementに変換されますので、直接アクセスしているように見えなくても、名前空間内にReactが必要です。 eslint react/react-in-jsx-scope コンポーネント内部からpropを書き換える あくまでpropsは親から子へ渡されるものなので、子の側で書き換えることはReactの枠組みの想定外となります。 setState以外の手段でstateを書き換え
ReactのJSXでも子要素を定義できますが、これが結構面白いものでした。 自作エレメントにも子要素 ReactのJSXでは、（DOMを組み立てるものである以上当然ですが）<div>の中に<a>を書いて、そしてさらに文字列を書き込む、ということが可能です。 そして、これはHTML由来のエレメントだけでなく、自作のコンポーネントでも実現可能です。 このように、子要素はchildrenというPropとして渡ってきます。 childrenの中身が知りたくて では、このchildrenには何がどのような形式で来るのでしょうか。JSXの変換先であるReact.createElementのソースコードに当たってみました。挙動はchildrenの数によって違います。 0個…childrenにはpropとして渡したchildrenが（もしあれば）渡される 1個…childrenには唯一のchildren引
はじめに React 16.8から導入されたhooksにはuseEffectがあります。 詳細は公式サイトをまず参照しましょう。 useEffectを使うと、コンポーネントのレンダリングとは別に処理を書くことができます。useEffectでしばしば非同期処理を書くことがあります。例えば、サーバからのデータ取得の処理などがあります。 以下では、useEffectで非同期処理を書く場合の注意点を2つ紹介します。ケースによっては注意点はこの2つだけではない可能性が高いので、ご留意ください。 promiseを返さない useEffectに渡す関数の戻り値はcleanup関数です。 useEffect(() => { console.log('side effect!'); const cleanup = () => { console.log('cleanup!'); }; return clea
HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン
✎ 基礎知識編 CSRF とは何か？ CSRF (Cross-Site Request Forgeries) を意訳すると 「サイトを跨ぐ偽造リクエスト送信」 です。 簡単に言うと，罠サイトを踏んだ結果，自分が無関係な別のサイト上で勝手にアクションをさせられる攻撃です。具体的には，ネットサーフィンをしているうちに知らない間に自分のIPアドレスから掲示板に犯罪予告が書かれていた，といった被害を受けます。 この攻撃を防ぐ責任は「無関係な別のサイト（具体例では掲示板）」側にあります。Web サイト作成者には，利用者が意図しない操作を勝手に実行されないように，利用者を守る責任があります。 また上図からも分かる通り，この攻撃の最大の特徴はアカウントがハッキングされたというわけではないということです。ログイン状態の利用者のWebブラウザを利用して攻撃が行われている，というのが重要です。 オリジンとは何
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせる
Reactなどで、css animationをかけている要素に対して、 中身の小要素が変わったときにサイドアニメーションをリスタートさせる方法です。 課題 propsが変更されても、中身が変わるだけなのでアニメーションは再実行されない。 const animTarget = (props:Props) => { return ( <Animation>{props.children}</Animation> ) } const Animation = styled` animation: ${xxx} 0.4s 0.6s ease-out forwards; ` const animTarget = (props:Props) => { if (document.querySelectorAll('.tar')) { Array.from(document.querySelectorAll
機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜 ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜 クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
