CORSとは？ CORSとは、オリジン間リソース共有（Cross-Origin Resource Sharing）の略称で、異なるオリジン間でデータや画像、およびスクリプトファイルなどを共有する仕組みです。なお、CORSはオリジン（Origin）単位でコントロールします。このオリジンはURLやドメイン名と混合しやすいため、間違えて解説などに使われているケースがありますが、正しくは以下の通りとなります。 URL scheme://host:port/path/file Origin scheme://host:port URLはリソースの位置を表すため、該当ファイルのパス名までを含みますが、オリジンは通信ルールおよびホスト名（インターネット上に公開している場合はドメイン名）とポート番号までの組み合わせを単位とします。 また、CORSでは基本的に同一のオリジンか、そうでないかの差異によってコン

meta要素に http-equiv="content-security-policy" を追加すると、コンテンツセキュリティポリシー（CSP）を指定することができます。 この指定により、文書に読み込まれる各種リソースに対して制限をかけられるようになります。（他に、ナビゲーションに関連する制限なども行うことができます） CSPは、このページで説明するmeta要素の他に、Content-Security-Policy HTTPヘッダーでも指定することができます。 <meta http-equiv="content-security-policy" content="default-src 'self'">

1. はじめに以下の HTTP Response Headers に関するメモです。 COEP (Cross Origin Embedder Policy)COOP (Cross Origin Opener Policy)CORP (Cross Origin Resource Policy)CORS (Cross Origin Resource Sharing)どれもセキュリティに関連しています。 2. ポイント一覧表

はじめに Webサーバをセキュアに保つ為、個人的に行っている設定をざっくりまとめてみました。 設定内容はApache 2.4での運用を想定していますので、他のHTTPdをお使いの方は適宜読み替えてください。 各設定項目は以下のオンラインテストサイトでA+相当を取ることを目指しています。 設定ファイル生成 Mozilla SSL Configuration Generator オンラインテスト Mozilla Observatory Qualys SSL Server Test 前提条件 以下で設定する項目は特にHTTPS接続や攻撃防止に関するものになります。 HTTPdそのものに関する基本設定については別記事をご参照ください。 SSLProtocol 危殆化した古いプロトコルを有効にしている場合、古いプロトコルを標的としたダウングレード攻撃等を受ける可能性がある為、新しいプロトコルのみを有

本記事はNext.jsのチュートリアルが大きく変わったためリンク切れを起こしています。 技術メモのため記事としては残しますが、リンク切れにご留意ください。 また機会があれば新チュートリアルで記事を書こうと思いますm(_ _)m こんちには。 データアナリティクス事業本部 インテグレーション部 機械学習チームの中村です。 今回は以下のNext.jsのチュートリアルをほぼ一通り（SEOのところ以外）実施しましたので、ポイントを記事化しました。 https://nextjs.org/learn/foundations/about-nextjs" チュートリアル自体は、以下のような内容が分かるものとなっています。 CRA（create-react-app）のみ使用しているとイメージしづらい、素のHTML + JavaScriptとReactの関係のイメージが分かる Reactがフレームワークではな

はじめに こんにちは！エンジニアの柿森です。新規プロジェクトを担当しております。 ANDPADではマイクロサービス開発を推進しており、新規プロジェクトは個別に技術選定を行い、既存システムとAPI経由で連携します。 また、マイクロサービス基盤はk8sで構築されており、死活監視やログ収集もよしなにやってくれる環境が整っております。 新規プロジェクトを立ち上げで、k8s上に乗せることを前提に技術選定を行いました。 技術選定を行うにあたって検討したポイントと、採用した技術について話していきたいと思います。(あくまで筆者個人の考えです。) 採用した技術スタックの概要 フロントエンドはBlitz-jsを参考にNext.jsを採用。 バックエンドはGo + gRPCを採用。 技術選定の方針 大きな方針としては一般的な考えを踏襲しています。 ドキュメントがしっかりしており、GitHubのStarがそれなり

35年の月日をかけて10万本のつまようじを組み上げた壮大なアート こちらの人の頭を優に超える巨大なアート、なんと全部つまようじで出来ています。 その数10万本、35年前からサンフランシスコの男性がこつこつと造り上げてきたそうです。 内部まで迷宮のように入り組んだ、超大作をご覧ください。 10万本で組み上げた"Rolling through the Bay"の全体図。つまようじも世界各国のものが使用されているとのこと。 ドラゴンを意匠した部分。 リゾート地にありそうな建物。 複雑に張り巡らされた土台の上に建てられた天空の城。 風車。 戦艦まであります。 ポールの一つ一つに三角の旗。 柔らかい素材のつまようじ使い、葉っぱの部分が曲げられているヤシの木。 この鳥一つをとっても偉大な作品。 綿密に設計しないと、とても不可能な構造。 大人も子供も目が輝いています。 そしてこの作品の恐るべきところは、

なんと 爪楊枝を103,987本使って、35年がかりで １つの作品を作り出した凄いアーティストをご紹介します。

はじめに こんにちは。DeSCヘルスケアシステム部でインターンをしている中島です。本記事では開発に関わった2つのサービス「ハレトケ」「カラダモ」の負荷テストで得た知見について紹介したいと思います。 負荷テストをこれからやる方や、システムのパフォーマンスチューニングに興味のある方などの参考になると嬉しいです。 負荷テストの目的 まず、負荷テストをどのような目的でやるのかについて抑えておきます。一般的にクラウド環境での負荷テストの目的は以下の5つが挙げられます。（出典：Amazon Web Services負荷試験入門 ――クラウドの性能の引き出し方がわかる Software Design plusシリーズ） 各種ユースケースの応答性能を推測する 高負荷時の性能改善を行う 目的の性能を提供することができるハードウェアをあらかじめ選定する システムがスケール性を持つことを確認する システムのスケ

こんにちは、今回から何回かに分けて Apache JMeter の使い方について記事を書いてみたいと思います。 単純に負荷を限界までかけるだけのテストを行う場合、AB(Apache Bench) 等の簡易なツールから行う方法から、JMeter のように GUI のツールを備えたシナリオテストまで可能なツールで行う方法までさまざまな方法があります。 実務では特定の URL だけをひたすら叩いて・・というテストではあまり意味のある数字が出て来ない事が多く、JMeter を利用してシナリオを作ってテストする事が多いです。 限界まで負荷をかけ続けるのではなくて、秒間リクエスト数(rps)を決め打ちして実行してみてサーバ側の負荷やその他の状態を監視したいというニーズもすぐに出てきます。 さて、JMeter でそのようなテストを実施する場合にどのように行うかというと、これにはいくつかの方法が考えられる

ログイン後の利用者のみが利用可能なサービスの悪用 不正な送金、利用者が意図しない商品購入、利用者が意図しない退会処理 等 ログイン後の利用者のみが編集可能な情報の改ざん、新規登録 各種設定の不正な変更（管理者画面、パスワード等）、掲示板への不適切な書き込み 等 注意が必要なウェブサイトの特徴 次の技術を利用してセッション管理を実装しているウェブサイトが、CSRF攻撃による影響を受ける可能性があります。 Cookieを用いたセッション管理 Basic認証 SSLクライアント認証 また、上記を実装するウェブサイトのうち、ログイン後に決済処理等の重要な処理を行うサイトは、攻撃による被害が大きくなるため、特に注意が必要です。 届出状況 CSRFの脆弱性に関する届出が、ウェブサイトの届出全体に占める割合は、1パーセント未満と多くはありません。しかしながらこれらの脆弱性については、ソフトウェア製品の届

Nginxのアーキテクチャについて調べてたことをまとめた。 用語のおさらい プロセス（Process） プログラムの実行単位であり、CPU時間単位で割り振られる。 状態(ステート)があり、現在処理中であるRunning状態だったり、実行可能状態であるReady等が存在する。 CPUがプロセスを実行する場合、そのプロセスが持つメモリデータに対して演算を行う。 プロセスはテキストセグメントとデータセグメントからなる構造データをメモリ上に持っている。 テキストセグメント プログラムの命令列 データセグメント PDA (Processor Data Area)と呼ばれる、プロセッサの情報やプロセス管理用のデータ領域 データ領域と呼ばれる、定数等が置かれる静的領域と、通常の変数等が置かれるヒープ領域からなる領域 スタック領域と呼ばれる、一時的なデータ保管領域 実行中のプロセスを確認 ~ ❯❯❯ ps

Ubuntu 20.04でDynamoDB Localを動かしてみました。 Ubuntu 20.04でDynamoDB Localを起動する こちらにNode.js expressのセッション情報を保持してみます。 connect-dynamodb セッションストアにはConnect DynamoDBを使用しました。 Connect DynamoDB npmでexpress-sessionと共にインストールします。 サンプル Connect DynamoDBのドキュメントと、Redisをセッションストアに使用した時の記事 Node.js express セッション情報の保存にRedisを使用する こちらを参考にサンプルを作成しました。 ・index.js const express = require('express');const AWS = require('aws-sdk');co

つくりながら学ぶ！AIアプリ開発入門 - LangChain & Streamlit による ChatGPT API 徹底活用 この本では、LangChain と Streamlit を用いて、ChatGPT APIを活用するAIアプリを開発していきます。つくりながら学ぶことを重視し、簡単なチャットアプリ開発から始めて、Embeddingを活用するアプリ開発まで、ステップバイステップで学べます。 AIアプリをローカル環境で開発した後は、WEB上にデプロイする方法も学びます。クラウドの知識もほぼ必要なく、ランニングコストも掛からない方法で行うため、ぜひ作ったアプリを公開することにチャレンジしてみましょう。 500円と設定していますが投げ銭用です。本文は全て無料で読めます。

ChatGPTの新機能として一般公開されたCode Interpreterがすごすぎて結構感動しているのだが、Code Interpreterで色んなことができるが故に「一言で言うと何なのか？」「一体それでなにができるのか？」疑問に思っている人も多いのではないだろうか？ このnoteではそうした疑問に答えるべき、まず最初にCode Interpreterでできることを紹介した上で、最後に一言でこれを説明すると一体なんなのかを紹介していきたい。 Code Interpreterで主にできること1. データ分析とビジュアライズまずこれが最もベーシックな使い方だろう。 特定のデータセットをエクセルファイルやcsvファイルでアップロードすると、そのデータの中身を読み取ってくれて、ビジュアライズしてもらうことができる。 ビジュアライズの際の分析の切り口やデザインを細かく指示することも、ChatGPT

ML エンジニアリングのベスト プラクティス Martin Zinkevich 氏 このドキュメントは、ML の基本的な知識を持つユーザーが、Google の ML のベスト プラクティスを活用できるように支援することを目的としています。Google C++ スタイルガイドや他の実用的なプログラミング ガイドと同様に、ML のスタイルを提示します。ML のクラスを受講したことがある方、ML モデルを構築または作成した経験がある方は、このドキュメントを読むために必要な知識があります。 Martin Zinkevich 氏は、ML に関するお気に入りの 10 のルールを紹介します。以下に、43 のルールをご紹介します。 用語 効果的な ML の説明では、次の用語が繰り返し登場します。 インスタンス: 予測を行う対象。たとえば、「猫について」または「猫についてではない」として分類したいウェブペー

peer dependencyとは Peer dependencyは，パッケージ間の依存の一種であり，依存先が自動的にはインストールされないものを指します． パッケージAがパッケージBに（peerではない通常の）依存をする場合，Aをnpmでインストールすると依存関係が解消され，自動的にBもインストールされます．一方，AからBへの依存がpeer dependencyである場合，AをインストールしてもBは自動的にはインストールされません． Peer dependencyの使い所はいくつかありますが，peer dependencyはAがBをrequireするわけではないような場合に適しています．むしろ逆に，直接的もしくは間接的にBがAをrequireするような場合に，AからBへのpeer dependencyを設定するべきです．npmのドキュメントでも言及されているように，このような状況はAがB