ネットワーク編集

try{}~catch(){}~finally{}:失敗しても成功しても最後に実行して終了

React-Quill

yarn add react-quill
import 'react-quill/dist/quill.snow.css';
nextで使用する場合、FEは一度描画され、BRでは一度描画されるため、FEにhtmlがないためエラーが発生します.
このため、動的Importを使用してssr(server side rendering)をfalseに拡大し、FEを描画しないようにコマンドすれば、エラーは発生しません.

react-quillで記述されたコンテンツをクエリーする場合、既存の方法で出力すると不要なタグが出力されます

このような危険なSetInnerHTMLを使用してcontentsでhtmlタグを実行し、react-quillを使用して内容(太字、下線など)を入力します.同じ出力になります.

ハッカーの侵入を防ぐ

危険なSetInnerHTMLを使用すると、最終的にはスクリプトとして入力され、セキュリティが低下します.
例:

<img src='#' onerror='console.log(localStorage.getItem(\"myAccessToken\"))'>

コンテンツに上記の内容を追加すると、localStorageの個人情報をインポートできます.

Dompurify:データに<>がある場合は、コードとしての問題を解決するために特定の文字に変換できます.
yarn add dompurify

nextでライブラリを使用する際の注意点

nextは基本的にFrontEndサーバ上で1回の構成部品を描画し、Browser上で1回と2回の比較を行い、レンダリングを行います.

FrontEndサーバでペイントすると、ライブラリによってペイントできないライブラリもあります.エラーが発生します.

解決策

process.browser&&(レンダリングする内容):条件付きレンダリングを実行し、ブラウザ内でのみレンダリングを行います.

typeof window !== 条件付きレンダリングを実行して、「未定義」&:window時にブラウザのみでレンダリングする