エンジニアお茶会 2020/08/19 pastak.icon @pastak この発表のゴール 現代のウェブブラウザの目指している方向性について紹介する モダンブラウザで使える最新の面白便利APIを紹介する ちゃんと仕様に入りそうなもの(Googleの力技で…も含む) （前半の各ベンダの話はpastak.icon個人の見解を含みます） 次ではない フロントエンドなんでも相談室 前提知識のコーナー "WebAPI"とは何を指すのか、標準化について ECMAScript Ecma InternationalにてECMA-262という規格番号 ほぼLiving Standardという雰囲気もあるけど、年に1回タグが付く ES2020: ECMAScript® 2020 Language Specification 最新の様子: https://tc39.es/ecma262/ Array、Nu
長い記事なので先に結論を書きます。 Spectre の登場で、ウェブサイトに必要とされるセキュリティ要件は増えました。具体的に必要な対策は下記の通りです。 すべてのリソースは Cross-Origin-Resource-Policy ヘッダーを使って cross-origin なドキュメントへの読み込みを制御する。 HTML ドキュメントには X-Frame-Options ヘッダーもしくは Content-Security-Policy (CSP) ヘッダーの frame-ancestors ディレクティブを追加して、cross-origin なページへの iframe による埋め込みを制御する。 HTML ドキュメントには Cross-Origin-Opener-Policy ヘッダーを追加して popup ウィンドウとして開かれた場合の cross-origin なページとのコミュニ
SPA認証トークンはlocalStorageでもCookieでもない、Auth0方式はいいねというお話 - @mizumotokのブログ
SPA認証トークンをどこに保存するかは論争が絶えません。localStorageやCookieがよく使われますが、Auth0は違う方法を採用しています。この記事では、Auth0のトークン管理の方式を理解でき、トークン管理上のセキュリティへの理解を深めることができます。 SPAの認証トークンをどこに保存するか ブラウザでトークンを保存できる場所 保存場所の比較 メリット・デメリット Auth0のアプローチ トークンはインメモリに保存 OpenID Connect準拠とトークン取得のUI/UXの悪化回避を両立 Auth0のjsライブラリ ログイン アクセストークンの（再）取得 図解 ログイン アクセストークンの（再）取得 自サービス内の認証だけのもっと簡易な構成 ログイン IDトークン取得 まとめ SPAの認証トークンをどこに保存するか React やVueで認証付きSPA（Single Pa
ABEJA Advent Calendarの1日目です。 はじめに 昨年はABEJA Platformに関するAdvent Calendarでしたが、今年はプラットフォームに限らず幅広い技術を扱おう、ということで縛りを作らずに様々な技術を紹介していきます。 さて、皆さん、社内でのコミュニケーションツールは何をお使いでしょうか。色々なツールがあると思いますが、Slackを使っている所が多いのではないかと思います。Slackはとても良いツールなのですが、使いこなす会社側にその運用ルールが委ねられています。中でも、DMやプライベートチャンネルでの秘密の会話による情報格差などが発生することが問題になり、オープンチャンネルに限定している会社も多いのではないでしょうか。しかしながら、オープンに会話をすれば、皆が平等かつ平和に会話ができるか？というと、全くそんなことはありません。オープンにすると下記のよ
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 入門記事へのリンク プロミスの使用 - JavaScript | MDN Promise, async/await (現代の JavaScript チュートリアル) JSの初心者にPromiseとasync/awaitの使い方
setTimeout は、指定された時間以降に指定されたコードを実行する JavaScript の API です。ブラウザでも Node.js でも広く使われているのですが、実装はまちまちで、色々と特殊な条件も多く、挙動を完璧に理解している人は少ないと思います。この記事では、そんな setTimeout を可能な限り深堀りしてみようと思います。 先に書いておきますが、ものすごくニッチで細かい話ばかり並びます。突然私が、ただ純粋に setTimeout について調べたくなったので、その結果をまとめただけのものです。普通に開発している人には必要のない情報が多くなるでしょう。この記事は基礎から setTimeout を学ぼう、という方には全然向かないと思います。 また、JavaScript のイベントループについてある程度理解していることを前提とします。その詳しい理解には、@PADAone さん
概要 Partytownというプロジェクトが先月発表された。このプロジェクト自体はWebのパフォーマンス向上(3rd Party Scriptによるブロッキングの低減)を主目的としているが、実質ブラウザにおけるJavaScript Sandboxの方向性に一石を投じるものであるとして自分は理解した。本稿ではこちらについて背景とともに解説を試みる。 WebブラウザにおけるJavaScript Sandbox JavaScriptで記述されたWebアプリケーションにおいて、たとえばプラグイン機構を実現したいなど、他Partyが提供あるいはユーザ自身が記述したスクリプトを、ホストとなるアプリケーションに影響を与えることなく実行することを許可したい、というケースはままある。2000年代に跋扈したブログパーツの類はWebコンテンツに対するプラグインの代表例とも言えるが、埋め込み先ページに対しての全権
技術blogのリンクを投げたらChatGPTが要約して、いい感じに整形してチャンネル投稿してくれるbotを社内Slackに生やしたら捗った話
こんにちは、株式会社シグマアイのエンジニアの@k_muroです。 今回の記事は最近導入した「技術blogを良い感じに共有してくれるSlack bot」のご紹介を。 はじめに 技術の進化は止まらない。(真面目な話、AI系の進捗がマジですごいて全然追えない) 毎日のように新しい技術、フレームワーク、ライブラリ、ツールが生まれています。そんな中でエンジニアとして働いていると、この情報の波に疲れを感じること、ありませんか？ ありますよね？(脅迫) 実際私もその一人で、この小さな疲れが積み重なって大きなストレスとなることに気づきました。 「新しい技術情報、追いつけるかな？」 「あのブログ記事、後で読もうと思ってたのに、どこいったっけ？」 「チーム全員が同じ情報を持ってるか心配だな。」 そんな日常の疑問や不安から逃れるための一歩として、私はあるSlack botを開発しました。このbotは、送られた技
Slackアプリ開発を始めるときに全人類が知っておくべきこと | Wantedly Engineer Blog
こんにちは！ Wantedly で Web エンジニアをしている木村（@hachiblog）です。8月にβ版をリリースした、コンディション・マネジメントサービスのWantedly Pulseを開発しています。 Pulse は毎週の調子を記録する機能や、社内のメンバーを称賛できる機能を提供していますが、そのほとんどを Slack アプリ内で実現しています Pulse（パルス）/ チームの状態 Slackを通じてチームの価値観を浸透させ、メンバーの抱える課題や隠れた貢献を可視化。行動のベクトルを束ね、自律して同じ価値に向かうチームを生み出す、新しいモチベーション・マネージメントツールです。 Slackを通じてメンバーの抱えるモチベーションの課題や隠れた貢献を可視化。行動のベクトルを束ね、自律して同じ価値に向かうチームを生み出します。 ... その他にも Wantedly Visit で募集に応
ハッピーホリデー！id:cockscombです。この記事ははてなエンジニアAdvent Calendarの8日目のエントリです。 今年1月、はてなスターのリニューアルを行いました。リニューアルの内容は告知をご参照ください。 はてなスターのリニューアルでは、クロスオリジンの問題を解決するために特別な実装をしています。今回は、ホリデーシーズンをお祝いして、そのひみつを詳 (つまび)らかにします。 はてなスターとクロスオリジン はてなスターは、はてなブログなどに埋め込んで利用されます。はてなブログは hatenablog.com や hatenadiary.jp などのサブドメインを利用しており、さらにはてなブログProでは独自のドメインを設定できます。 はてなスターは複数の異なるドメイン名のサイトから利用される、ということです。 要するにはてなスターはクロスオリジンで利用されます。一方ではてな
Webアプリケーションの堅牢化に欠かせない知識を凝縮！ セキュリティ学習のスタートに最適の一冊！ 本書は、安全なWebアプリケーションを開発するための基本知識を、フロントエンドエンジニア向けに解説したセキュリティの入門書です。 これまでWebアプリケーションの開発で、セキュリティは「バックエンドの仕事」というイメージの強い領域でした。しかし、アプリケーションの安全性を高めるためには、フロントエンドエンジニアにも、セキュリティの基礎知識や具体的な対策の実践が求められます。 本書では、Webセキュリティの必須知識である「HTTP」「オリジン」などの基礎トピックや、「XSS」「CSRF」といったフロントエンドを狙ったサイバー攻撃の仕組みを、サンプルアプリケーションを舞台にしたハンズオンで学びます。 もちろん、攻撃からユーザーを守る防御の手法もしっかりおさえます。個々の攻撃手法に応じた対策のほか、
【PoC編】XSSへの耐性においてブラウザのメモリ空間方式はLocal Storage方式より安全か？ - Flatt Security Blog
はじめに こんにちは。 セキュリティエンジニアの@okazu-dm です。 この記事は、Auth0のアクセストークンの保存方法について解説した前回の記事の補足となる記事です。前回の記事の要旨をざっくりまとめると以下のようなものでした。 Auth0はデフォルトではアクセストークンをブラウザのメモリ空間上にのみ保存するin-memory方式であり、XSSへの耐性のなさ等の理由でlocalStorageで保存することを推奨していない しかし、XSSでアクセストークンを奪取できるのはin-memory方式でも同じのはず(検証は行いませんでした)。localStorage方式を過度に忌避する必要はないのではないか なお、Flatt Securityの提供するセキュリティ診断はAuth0に限らずFirebase AuthenticationやAmazon CognitoなどのIDaaSのセキュアな利用
なぜリモートでも完全にペアプロで開発するのか？ XPのプラクティスをどこまでも徹底するユーザベースの挑戦を恐れない開発文化 - はてなニュース
ステイホーム期間が続き、開発者がオフィスで顔を突き合わせることも少なくなっています。そんなリモートワークが既定となった状況下でも、ユーザベースのB2B SaaS事業では開発に関わる全てを徹底してペアプログラミングで行っています。 その根幹には、XP（eXtreme Programming）のプロセスを推進することで開発効率を向上させる意図があり、それが多種多様なプログラミング言語やマイクロフロントエンドといった目新しい技術を恐れることなく積極的に採用する開発文化を生み、ひいてはシェアドリーダーシップによる自己組織化されたチームのあり方につながっています。 わずか10人程度だったエンジニア組織を4年で10倍の規模に拡大し、さらに組織と事業の成長を目指すCTOの林尚之さん、スペシャリストとしてFellowの肩書を持つ板倉大輔さん、入社2年目のエンジニア片山景太さんの3人にお話をうかがいました。
ブラウザで操作できるツールを作りたいけどWebのフロントエンド作るの面倒だな...とWeb系開発者にあるまじき事を考えつつ良いプラットフォームを探していたら、SlackのAPIが進化してツールフロントエンド化するのにうってつけの機能が増えているのを見つけました。 api.slack.com チャットツールのAPIといえば、「チャットで入力したテキストをボット側でがんばって解釈して実行する」というCUIのコマンド的な使い方しかできないイメージだったのですが、最近のSlackのAPIは「ショートカット(Shortcuts)」「モーダル(Modals)」「ブロックキット(Block Kit)」といった機能を使うことで、入力コンポーネントを使用したGUIでボットとやりとりすることができるようになっています。 これらを駆使すれば、入力フォームからデータを登録したり、編集フォームでデータを変更したり、
GitLabで1クリックアカウント乗っ取りが可能だった脆弱性から学ぶ、OpenID Connect実装の注意点 - Flatt Security Blog
はじめに こんにちは。株式会社Flatt Securityセキュリティエンジニアの森(@ei01241)です。 最近は認証や認可に際してOpenID Connectを使うWebサービスが増えていると思います。「Googleアカウント/Twitter/Facebookでログイン」などのUIはあらゆるサービスで見かけると思います。しかし、OpenID Connectの仕様をよく理解せずに不適切な実装を行うと脆弱性を埋め込むことがあります。 そこで、突然ですがクイズです。以下のTweetをご覧ください。 ⚡️突然ですがクイズです！⚡️ 以下の画面はOAuth 2.0 Best Practice上は推奨されないような実装になっており、潜在的リスクがあります。https://t.co/bXGWktj5fx どのようなリスクが潜んでいるか、ぜひ考えてみてください。このリスクを用いた攻撃についての解説記
研究室のSlackチャンネルに最新の論文を共有してくれるbotがあれば、議論をもっと活発化できるのでは？と思ったので試しに作ってみました！ 目標 こんな感じで、時間通りにarxiv論文を要約したものをシェアしてくれるSlackbotを作ります。 手順 SlackBotのためのAPIトークンを生成 OpenAIのAPIを取得 Pythonコードを作成 Google Cloud Platform（GCP)で実行を自動化 完成！ 1. SlackBotのためのAPIトークンを生成 Slack APIのページからbotを作成する必要があります。 この方の記事で詳しいやり方が紹介されているので、参考にしながらアプリ作成、APIトークン生成、ワークスペースにアプリをインストール、メッセージ送信のテストまでやってみてください。 2. OpenAIのAPIを取得 今回は取得した論文を要約するために、Cha
Nota Tech Conf 2021 Spring 3日目の発表資料です 2021/3/11 こんばんは daiizdaiiz.iconです Helpfeelの検索技術の話をします 開発、運用チーム プロダクトオーナー daiiz.icon プロジェクトマネージャー akix.icon Webディレクター akix.icon など テクニカルライター カスタマーサクセス エンジニア、デザイナー rakusai.iconakix.icondaiiz.iconshokai.icontakeru.iconTiro.icon 予測検索 Helpfeel CTO /masui/増井俊之.iconの展開ヘルプをベースとするFAQ検索システム PayPayフリマ様 FAQ テキパキと高速に検索できている クエリの表現に合わせて柔軟に結果が提示される Agenda いかにして探すか 1. 入力に対して遅
ドアホンが鳴ったらGoogleHome,Slack,Discordに通知する リモートワークなどで玄関から遠い部屋で作業をしていると、ドアホンのチャイムがちょっと聞こえにくいことがありませんか？ これを解決するために、Google HomeやSlack,Discordなどへ通知する方法です。 特徴 グループ登録すれば複数のGoogle Homeに対してブロードキャストすることができます。家の各所にGoogle Homeを設置すれば死角なしです。 Discord,Slackへの通知すれば、ヘッドホンをしながらPCを使っていても安心。 外出先からもチャイムの確認ができます。 チャイムが何日何時何分に鳴ったか、長期間のログになります。 使用可能なドアホン 作例ではドアホンはPanasonicのVL-MV38を使っています。この機種は「A接点出力」という機能がついており、チャイムが鳴った時に、２接
npmとyarnの脆弱性とpostinstall - Cybozu Inside Out | サイボウズエンジニアのブログ
フロントエンドエキスパートチームの小林(@koba04)です。 先日、npmから脆弱性についての発表がありました。 調べていく中でいくつか思うところがあったので解説も兼ねて書いていきたいと思います。 The npm Blog — Binary Planting with the npm CLI npmの利用者としてやるべきことは、 npmのバージョンを6.13.4以上にあげる yarnのバージョンを1.21.1以上にあげる です。 npmのバージョンが6.13.4になったNodeもv8, v10, v12, v13系でそれぞれリリースされたので、そちらを利用することも可能です （yarnのバージョンは別途あげる必要があります）。 nodejs.org npmによる発表では、今回発表された脆弱性は2件あるため、それぞれ個別に考えます。 binに任意のパスを指定出来る件 npmパッケージはpa
gRPC-Web + React + Node.js + TypeScriptでシンプルなチャットサービスを作る - Qiita
概要 かねてよりgRPCおよびgRPC-Webに興味があり、これを用いてシンプルなリアルタイムチャットサービスを制作し、公開した。 本稿では、その開発工程について解説する。 ゴール gRPC-Webを用いて「わいわいチャット」を作る。 https://waiwai-chat-2019.aanrii.com/ ※2020年9月現在、公開停止しました。 内容はシンプルなチャットアプリケーションだ。サイトを開くとまず過去ログが表示され、ほかの入室者の投稿が随時流れてくる。任意の名前で入室すると投稿欄が出現し、発言ができる。発言した内容はサイトにアクセスしている全員に、即座に共有される。過去ログは無限スクロールで遡ることができる。 フロントエンドはReactを用いたSPAとし、Netlifyを使って静的サイト生成・配信する。また、バックエンドはGKE上で動くNode.jsアプリケーションとし、かつ
あなたの window.open はなぜ開かないのか，Chrome で - マンガ〜ノ伊藤ノ〜ト
先日 window.open をしようとしたらポップアップブロッカーに阻まれて open することができなかった． Blocked まあ，これならよくあることなのだが，いかんせん自分の記憶では onClick のようなユーザーのアクション内で開かれた window.open は阻まれないことになってると思っていた．だからそのときも onClick のイベントハンドラ内で window.open したから大丈夫だろう，と思っていたら，見事にブロックされてしまったのでなぜだろう，となっていた． 検証 なので，検証するために 3 つのケースを用意してみた: 検証ページを用意したのであなたの環境でも試してみてね♥ 今回試すブラウザは Google Chrome を前提にしてます ケース1 const immediate = () => { window.open('https://www.goog
リングフィットアドベンチャーの記録で友達と競える仕組みを作った
🐣 はじめに おうちで気軽にフィットネスができる「リングフィットアドベンチャー」。 一人でがんばるのもいいけどみんなで競い合ったほうがもっと楽しいし継続できるよね！ってことで、そんな仕組みを作りました。 具体的には 運動結果のSlack通知（「今日もちゃんと運動して偉い！」） 運動結果データのログ保存（いつ・だれが・どれくらい運動したか） ログの集計・可視化・通知（「8月のカロリー部門１位は○さんでした！」） を自動化しています。 運動結果のスクショをTwitterに投稿するだけで参加できます。 この仕組みを作ってから、今では10人くらいでわちゃわちゃ楽しくやってます。 また後述しますが、すべて無料枠で運用しています。 主な機能 Twitterの投稿を検知してSlackに通知します。 毎週月曜日に進捗をお知らせします。 月初に前月のサマリーを投稿します。（テキストだけ人力🤫） 🎯 技
ガワネイティブアプリ(Creator)を、React Nativeで置き換えてみての一年間戦いの記録 - BASEプロダクトチームブログ
Native Application Groupの大木です。BASEでは、購入者向けのショッピングアプリ「BASE」、「BASEライブ」、ショップオーナー向けのショップ運営管理アプリ「BASE Creator」の3つのスマホアプリをリリースしております。今回は、その中の一つBASE Creatorを、React Nativeで置き換え、リリースしてみての話を、お伝え出来ればと思います。 課題と動機 https://help.thebase.in/hc/ja/articles/206417201-BASE-Creator-とはなんですか- BASE Creatorは、基本的にはWebViewで画面を表示するいわゆるガワネイティブアプリというものです。Webアプリとの違いは何処にあるかといいますと、商品が売れたり、購入者からメッセージが届くと、Push通知でお知らせ出来る機能があるところです。
おはようございます ritou です。 久々に「解説付きスライド全公開」的なやつをやります。 先月、チーム内でID連携のための標準化仕様に関する勉強会(私が一方的に話す会)を行いました。 が、実際はだいぶグダグダになってしまい、これはその後色々付け足してるうちに別物になってしまった資料です。 内容としては、ID連携のための標準化仕様にどのようなものがあるかを知ってもらうための「入門編」のような立ち位置で作りました。 OpenID Connect(やSAMLのような) ID連携のための標準化仕様を紹介しようと思うと、ついつい個別にシーケンスやリクエスト/レスポンスの説明を始めがちですが、初学者が気になるのはそんな細けぇことではないでしょう。 まずは「この仕様で何ができるようになるのだろう」「この仕様では何を実現したいんだろう」と言うところから理解していくのが良いのではないでしょうか。 そこで
これはなんらかのアドベントカレンダーの何日目かの記事だったりしません。 KOBA789 です。仕事では人工衛星の搭載ソフトウェアを書いたり、人工衛星の管制システムのソフトウェアを書いたりしています。 先日、こういうツイ……ポストをしたらちょっとバズりました。意外と興味持ってくれる人が多かったので、それに関連するオタク早口記事でも書くかぁと思って筆を執っています。 うちの人工衛星の開発ツールはウェブ技術でできている 前述のポストは管制システムについてですが、開発用ツール（C2A DevTools）もまた React + TypeScript でできています。 まぁ画面見てもなにがなんだかという感じだと思いますが、UNIX サーバーで top コマンド叩いたときの内容と、サーバーのログが合体したみたいなものが表示されていると思ってください。 これらの数値は gRPC-web の Server-
通常のリアクションと川柳によるリアクションを比較すると、川柳によるリアクションの完了には通常のリアクションの約3倍~10倍程度の時間が必要になります。 +:絵文字コード: を活用してもかなりのタイプ数になるので、こういった反応が出てくるのはもっともです。 Tip : 一番最後に受け取ったメッセージにリアクションするには、メッセージボックスで +:絵文字コード: と入力して送信します Slack の使い方 Slack職人たちが暇か？と言われないように、またSlack職人たちの業務負荷軽減のために、効率よく川柳を詠むためのスラッシュコマンドを作ることを心に誓いました。 構成 今回作成する環境です。 各AWSリソースはざっくり以下のように利用します スラッシュコマンドインストール時 ユーザーのブラウザがAPI Gatewayのエンドポイントにアクセス API GatewayからLambdaを起動
【承認リードタイムが1/5】Slack ワークフロー承認機能の紹介！ | BLOG - DeNA Engineering
3行で マネージャーが喜ぶ承認システム、 CTO いわく「マジ便利すぎて鼻血出る」 5時間かかっていた承認リードタイムが58分に短縮 コストは月当たり1ドル未満 はじめに はじめまして、 IT 戦略部システム開発グループの長谷川です。入社以来一貫して社内システムの内製開発に携わっています。今では当部署のマネージャーを務める身ですが、基本的には開発大好きアプリケーションエンジニアであり、メンバーとああでもないこうでもないと意見交換しながらコーディングに没頭する日々を過ごしています。 社内システムの内製開発？ 社内システムは会計、人事、総務、法務…と多領域にわたり、担当者あたりのシステム数が必然的に嵩むため、それぞれの運用効率というものが強く求められます。その意味で、社内の主軸となるシステムは原則 SaaS で賄うべしというのが世の流れです。しかしながら SaaS が提供してくれる機能はあくま
主なNode.js独自API
// CommonJS Modules の場合 const fs = require("fs"); const fs = require("node:fs"); // ES Modules の場合 import fs from "fs"; import fs from "node:fs"; process のように、グローバル変数としても組み込みモジュールとしても提供されているAPIもあります。 global globalThisの別名です。Webブラウザでは window と self がglobalThisの別名として定義されていますが、Node.jsには window や self はなく、かわりに global が定義されています。 Buffer ArrayBuffer, TypedArray (Uint8Arrayなど), DataView はJavaScriptの標準機能です。
2021/12/26: Safari も 15.2 から COOP/COEP を使って SharedArrayBuffer が利用できるようになったので、該当箇所の表記を変更しました。 長い記事なので先に結論を書きます。 Chrome、Firefox および Safari で SharedArrayBuffer や高精細タイマーが使えるようになりました。そのためには cross-origin isolation という状態を有効にするのですが、親となる HTML ドキュメントに下記 2 つのヘッダーを送ります。 Cross-Origin-Embedder-Policy: require-corp Cross-Origin-Opener-Policy: same-origin ただ、これを有効にするには様々な条件と制約が存在し、現段階では多くのサイトは苦戦するでしょう。とりあえず従来通り C
OAuth2.0を復習してLINEとヤフーの脆弱性見つけたら両社が経営統合された | Nevermoe's Blog
0x00 背景 一 Web Pentester の立場から、毎回 OAuth 連携の案件が来る時に、どこが診断する必要なのか、どこが idP の SDK 使っているから診断不要なのかを見極める必要があり、このような背景において、OAuth2.0 をもう一回復習して、心得を共有したいと思い始めました。（0x01~0x08）。復習しているうちに、OAuth の idP 両社の脆弱性を見つけ、50万円賞金もらって終わりと思ったらいつの間に両社経営統合されました。この話を読みたい方は 0x09 から読んでください。 この文章を読む前提は二つあります： OAuth2.0 の各種認証 Flow (すくなくとも Implicit Grant, Code Grant, Code Grant with PKCE) を大まかに理解していること。 この文章図解：OAuth 2.0に潜む「5つの脆弱性」と解決法に
というアプローチを紹介してる記事があって、なるほど？と思ったのでまとめてみる。 元記事はこちら。 Leveraging Web Workers to Safely Store Access Tokens – The New Stack 毎度のことながら、今にはじまったことではない。 元記事いわく WebWorkerであれば、メインスレッドで実行されるであろうXSSや3rdのコードから触れないので安全！ 設計としては、 メイン: まず`Worker`をロード メイン: 初期化のメッセージを`postMessage()` クレデンシャルがあるならそれを渡す ワーカー: アクセストークンの準備 受け取ったやつ or そこで`fetch()`して、オンメモリに保存 （これで準備OK） メイン: APIにリクエストしてほしいと`postMessage()` ワーカー: APIに向けてアクセストークン
Bolt を使って Slack でヘルプデスクチームとのやりとりを効率化するアプリをつくってみよう - Qiita
Slack アプリ開発へようこそ！ この記事では、ショートカット、モーダルのようなインタラクティブな機能を Bolt for JavaScript を使ってどのように実装すればよいかを解説します。 なお、この記事で紹介するのは、BIT VALLEY 2020 のための用意されたデモアプリです。 BIT VALLEY での講演は YouTube で公開されていますので、こちらからご覧ください。 この記事で実装するアプリ ここで扱うサンプルプロジェクトは、ヘルプデスクチームが提供するアプリを想定したサンプルです。シンプルではありつつも、Slack プラットフォームの最新の機能をうまく活用しているので、これをベースに拡張することで実際に使えるアプリに進化させることができるでしょう。 以下のアニメーションで、どのようなアプリなのかをみてみましょう。 ショートカットでモーダルを起動 エンドユーザーは
VS Codeで任意コード実行が可能だった脆弱性から学ぶ、Electron開発の注意点(CVE-2021-43908) - Flatt Security Blog
初めに こんにちは。株式会社Flatt Security セキュリティエンジニアの石川です。 近年、クロスプラットフォームなデスクトップアプリケーションを作成する上で、Electronを採用することが選択肢の1つになってきています。 Electronの開発では、ライブラリとしてのElectronの実装と、その上にユーザーが構築するデスクトップアプリケーションの2つのコードが存在します。デスクトップアプリケーションの実装においても、メインプロセスとレンダラープロセス、サブフレームなど、考慮すべき概念が多数存在します。 そこで本稿では、Electronのアーキテクチャを意識しながら、実際に発見された脆弱性の傾向について考察することで、 Electron開発者が開発時に気を付けるべき点とその緩和策について、セキュリティの観点から記述していきます。 その上で、一例として、2022年のBlack H
Optimize long tasks Stay organized with collections Save and categorize content based on your preferences. Commonly available advice for making your JavaScript apps faster often includes "Don't block the main thread" and "Break up your long tasks." This page breaks down what that advice means, and why optimizing tasks in JavaScript is important. What is a task? A task is any discrete piece of work
JavaScriptの大きな特徴の1つは、「シングルスレッド」基盤の言語だという点です。スレッドが1つということは、同時に1つの作業だけを処理できるということです。しかし、実際にJavaScriptが使われる環境を考えてみると、多くの作業が同時に処理されていることが分かります。例えば、Webブラウザは、アニメーション効果を見せながら、マウスの入力を受けて処理をし、Node.js基盤のWebサーバーでは、同時に複数のHTTPリクエストを処理したりします。スレッドが1つなのに、どうしてこのようなことができるのでしょうか？質問を変えると、「JavaScriptはどのように同時実行（Concurrency）をサポートしているのでしょうか？」 このとき登場する概念が「イベントループ」です。Node.jsを導入した際、イベントループ基盤の非同期方式でNon-Blocking IOに対応して…」のような
ElasticsearchとKibela APIを使ってSlackでのCSお問い合わせ対応業務を改善した話 - BASEプロダクトチームブログ
この記事はBASE Advent Calendar 2020の11日目の記事です。 devblog.thebase.in BASE株式会社 Data Strategy チームの@tawamuraです。 BASEではオーナーの皆様や購入者様のお問い合わせに対して、Customer Supportチームが主となって対応をしています。その中でもいくつかの技術的なお問い合わせに対しては、以下のようにSlackの専用チャンネルを通して開発エンジニアに質問を投げて回答を作成することになっています。 CSチームから調査を依頼されるお問い合わせの例 これらのCS問い合わせ対応は日々いくつも発生しており、CSお問い合わせ対応を当番制にして運用してみた話 でもあるように週ごとに持ち回り制で各部門のエンジニアが対応しているのですが、どうしても調査や対応に時間が取られてしまうという問題が発生していました。 dev
はじめまして。エンタメ領域のDXを推進するブロックチェーンスタートアップ、Gaudiyでエンジニアをしている@kaa_a_zuです。 早速ですが、質問です。みなさんは、所属している組織のコードを誇りに思い、この先数十年間に渡って使い続けることができると確信していますか？ 私は、この質問をされた場合、顔を背ける自信があります。今回は、私と同じようにこの質問に対して "YES" と答えることが出来なかった人たち、そして 「リファクタリングをしたい」と思っているエンジニアが在籍する組織の偉い人たち に読んでもらいたい内容を書こうと思います。 テーマは、技術的負債の返済方法と技術的負債をためない方法についてです。（かなり長いので、HOWだけ知りたい方は4章から読んでいただけたらと思います。） 1. 一般的な技術的負債とは 2. なぜ技術的負債が発生するのか 3. 技術的負債がもたらす問題点 3-1
Back and forward cache Stay organized with collections Save and categorize content based on your preferences. Back/forward cache (or bfcache) is a browser optimization that enables instant back and forward navigation. It significantly improves the browsing experience, especially for users with slower networks or devices. This page outlines how to optimize your pages for bfcache across all browsers
Google Apps Script で緊急対応時の Slack 操作を自動化してみた | DevelopersIO
GAS（Google Apps Script）と Slack API の組み合わせでよく使いそうな関数をご紹介しています。 こんにちは。筧です。 クラスメソッドでは、2020年10月22日に発生した AWS 障害で検知後30分で以下を行いました。 クラスメソッドでAWS障害検知から30分でやったこと - AWS公式確認(SHD)、マニュアルに従い対応開始 - 社内slackチャンネル作成 - 体制構築、情報収集、顧客向け文面作成、レビュー - 顧客向けポータルに情報を掲載 - 顧客向けにメール送信完了 今後も継続してサポート品質上げていきます!! #aws障害 — Jun Chiba (@iron_breaker) October 22, 2020 そしてこの度、さらに迅速に情報をお届けしたい・・・！という想いから、下記を自動化する AWS 障害時の緊急対応支援ツールを新たに開発しました。
このブログはこんな方におすすめ 緊急対応の初動を早めたい リモートワーク中心になり、緊急対応中の作業分担や進捗確認が難しい Google Apps Script で緊急対応時の Slack 操作を自動化してみた の Python 版がほしい 2021年6月11日に以下のセッションに登壇しました。本ブログでは登壇中に紹介するとお伝えした関数をご紹介します。また背景についても改めて少し記載しています。 業界特化事例紹介セッション SIer編 | Slack はじめに クラスメソッドでは Slack API を活用することで、いくつかある緊急対応の初動が約30分早くなりました。 では、どのように活用して初動対応を迅速化したのでしょうか。 本ブログでは、クラスメソッドの緊急対応の一つである、AWS 不正利用対応を例に紹介します。 AWS 不正利用とは、AWS アクセスキーの漏洩などが原因で発生しま
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
面白Web API 100連発 - pastak-pub
Spectre の脅威とウェブサイトが設定すべきヘッダーについて
社内slackにVIPチャンネルを作った話 - Qiita
JavaScriptの非同期処理をじっくり理解する (1) 実行モデルとタスクキュー
setTimeout を完璧に理解する
今Partytownがヤバい。JavaScript Sandboxの未来はどっちだ？
はてなスターのひみつ - Hatena Developer Blog
フロントエンド開発のためのセキュリティ入門 知らなかったでは済まされない脆弱性対策の必須知識 | 翔泳社
SlackをGo製ツールのGUIフロントエンドとして使う（#1: データの登録と表示） - ほんじゃらねっと
最新の論文をChatGPTで要約して毎朝Slackに共有してくれるbotを作る！
本当に役立つFAQ検索システムを目指して - Nota TechConf
ドアホンが鳴ったらGoogleHome,Slack,Discordに通知する (ESP32) - Qiita
ID連携の標準化仕様紹介とセキュアな実装のためのアプローチ ~ 2021 - r-weblife
リアルタイム通信用のコネクションをタブ間で共有してまとめる
Slack絵文字による川柳を効率化するためのスラッシュコマンドを開発しました | DevelopersIO
SharedArrayBuffer と過渡期な cross-origin isolation の話
アクセストークンをWebWorkerで扱う - console.lealog();
Optimize long tasks | Articles | web.dev
JavaScriptとイベントループ | NHN Cloud Meetup
借りたものはきっちり返す。技術的負債への向き合い方 - Gaudiy Tech Blog
Back and forward cache | Articles | web.dev
Python で緊急対応時の Slack 操作を自動化してみた | DevelopersIO