Chrome、FireFox、Safariといった主要ブラウザにおけるIPアドレス「0.0.0.0」の扱い方に問題があり、問題を悪用することで攻撃者が攻撃対象のローカル環境にアクセスできることが明らかになりました。問題を発見したセキュリティ企業のOligo Securityは、この脆弱(ぜいじゃく)性を「0.0.0.0 Day」と名付けて注意喚起しています。 0.0.0.0 Day: Exploiting Localhost APIs From the Browser | Oligo Security https://www.oligo.security/blog/0-0-0-0-day-exploiting-localhost-apis-from-the-browser Oligo Securityによると、主要なブラウザでは「『0.0.0.0』へのアクセスを『localhost (12
JavaScript エンジンの高速化
これらの JavaScript エンジンのうち、以下では特に JavaScriptCore を扱います。 最適化の基本戦略 JavaScript をはじめとする動的言語は、主にインタープリタにおいて実行されます。しかし、インタープリタはコンパイルされたコードと比較して実行に時間を要するという欠点があります。そこで、インタープリタの最適化では、バイトコードの JIT コンパイルが最初に行われます。 しかし、コンパイルには当然時間がかかります。少しでも高速化されたコードを生成するには、より多くの時間をコンパイルにかけなければなりません。コンパイルによる速度向上とコンパイルのレイテンシはトレードオフの関係にあります。 そこで、多くの JavaScript エンジンは、インタープリタと多階層の JIT コンパイラの組み合わせで構成されています。次の図は、主要な JavaScript エンジンの設計
Rust製ブラウザエンジン「Servo」搭載、新たなWebブラウザ「Verso」の開発プロジェクトが立ち上がる
欧州を基盤にオープンでセキュアなインターネットの実現を支援しているNLnet Foundationは、Rust製ブラウザエンジン「Servo」を用いたWebブラウザ「Verso」の開発プロジェクトの立ち上げを発表しました。 Versoの開発は、Electron代替を目指すフレームワーク「Tauri」の開発チームが主導することが、下記のポストで示されています。 We've stopped waiting for other people to solve our problems with webviews and kicked off a browser+webview project called Verso (and we've already gotten a bit of funding from NLNET.)https://t.co/PMOV7YbGtE https://t.c
テキストをホバーしたときの変化やアニメーションをつくることは、どのようなサイトをつくっていてもほぼ必ず行う工程ではないでしょうか。 テキストがリンクであることをユーザーに伝えるという点では、ブラウザのデフォルトスタイルのような下線のみで十分な場合もあると思います。 しかしそれだけではなく、変化をつけてよりわかりやすくしたい場合や、サイト全体の雰囲気に合わせたい場合にちょっとしたアニメーションが効果的です。 今回はHTMLとCSSのみで作成できる、シンプルながら少し目を引くアニメーションをテーマに実装例を紹介します。 ▼今回紹介する実装例一覧 とくに、以下のようなデザイナー／エンジニアにとって参考になれば嬉しいです。 HTMLとCSSのみでどのようなホバー時のアニメーションができるのか知りたい 透明度の変化や、下線のつけ外し以外の実装例の引き出しを増やしたい ※今回の実装例では主にヘッダー／
Electron代替を目指す「Tauri 2.0」リリース候補版が公開。Windows/Mac/Linuxに加えてiOS/Androidアプリ開発も可能に
Electron代替を目指す「Tauri 2.0」リリース候補版が公開。Windows/Mac/Linuxに加えてiOS/Androidアプリ開発も可能に Electronの代替を目指すRust製のアプリケーションフレームワーク「Tauri」の開発チームは、「Tauri 2.0」リリース候補版の公開を発表しました。 Everyone assumes your dev environment and network are safe. Tauri doesn't assume that & protects you as a dev. Tauri 2.0 RC for Mobile and Desktop available right now. Read the announcement:https://t.co/SXv1tgNHGm — Tauri (@TauriApps) August
WebKitのコミッターになった
WebKitのcommitterになった。僕はAppleやIgaliaやSonyの従業員ではなく、完全に趣味である。 I'm officially a WebKit (@webkit) committer! Thank you to the JSC reviewers who have been reviewing my patches. — sosuke (@__sosukesuzuki) August 18, 2024 WebKitの開発者のステータスのポリシーは https://webkit.org/commit-and-review-policy/ を参照してほしい。Committerよりも強い権限を持つreviewerという人たちもいる。人のパッチを正式に承認したり拒否したりすることはreviewerにしか出来ない。 2024年2月からパッチを投げ始めて、6月の半ばくらいにcom
box-shadow で実装されたフォーカスリングはハイコントラストモードで表示されない 2024.08.11 フォーカスリングとは、キーボード操作でフォーカスが当たった要素を視覚的に示すための UI デザインのことです。フォーカスリングのカスタマイズに `box-shadow` プロパティを使うことがありますが、ハイコントラストモードではフォーカスリングが表示されない問題があります。この記事では、ハイコントラストモードでフォーカスリングを表示する方法について解説します。 フォーカスリングとは、キーボード操作でフォーカスが当たった要素を視覚的に示すための UI デザインのことです。フォーカスリングはキーボード操作をしているユーザーにとって現在のフォーカス位置を把握するための重要な要素です。このことは WCAG 2.2 の 2.4.7 項目で要求されています。 (レベル AA) キーボード操
0.0.0.0 Day: Exploiting Localhost APIs From the Browser | Oligo Security
Oligo Security's research team recently disclosed the “0.0.0.0 Day” vulnerability. This vulnerability allows malicious websites to bypass browser security and interact with services running on an organization’s local network, potentially leading to unauthorized access and remote code execution on local services by attackers outside the network. The issue stems from the inconsistent implementation
WebAssembly Type Reflection JavaScript APIの一部をWebKitに実装したので紹介します。 WebAssembly Type Reflection JavaScript API とは WebAssembly Type Reflection JavaScript APIは、Memory・Table・Global・関数の型に関する情報をJavaScriptから取得するAPIを追加する提案です。https://github.com/WebAssembly/js-types で管理されています。 たとえば、MemoryやTableであればサイズの制限、Globalであれば値の型とミュータビリティ、FunctionであればそのシグネチャをJavaScriptから取得できます。 この提案は、既存のAPIに対して３つの変更を加えます。 1. Memory、Glob
【セキュリティ ニュース】「macOS Sonoma 14.6」をリリース - 脆弱性69件を修正（1ページ目 / 全1ページ）：Security NEXT
Appleは、Mac向け最新OSとなる「macOS Sonoma 14.6」をリリースした。複数の脆弱性を解消している。 「macOS Sonoma 14.6」では、CVEベースであわせて69件の脆弱性を修正。 カーネルに関する脆弱性3件、セキュリティに関する3件をはじめ、キーチェーン、サンドボックスのほか、ショートカット、Siri、WebKitなど多岐にわたる脆弱性へ対処した。 サードパーティ製ソフトウェアに関する脆弱性の修正も含まれる。「OpenSSH」に明らかとなった別名「regreSSHion」としても知られる「CVE-2024-6387」を修正。「curl」に関する脆弱性4件のほか、「Apache HTTP Server」に関する脆弱性3件なども修正した。 同日「macOS Ventura 13.6.8」「macOS Monterey 12.7.6」をリリースしており、それぞれ4
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
WebKit have recently announced their intent to implement the blocking=render attribute for <script> and <style> elements, bringing them in line with support already available in Blink and generally positive sentiment in Firefox. The blocking=render attribute allows developers to explicitly mark a resource as render blocking, but… why on earth would you want to do that?! The short answer is: genera
本記事では、Clipboard APIのブラウザ間での仕様の違いと、非同期処理を含む操作をする際の注意点とその対策をまとめました。 Clipboard APIとは Clipboard APIは、Webアプリケーションがシステムクリップボードにアクセスするためのインターフェースを提供します。 例えば、Clipboard.writeTextを使用すると、クリップボードを特定の文字列で上書きすることができます。 // テキストをクリップボードにコピー navigator.clipboard.writeText("コピーしたいテキスト").then(() => { console.log("コピー成功"); }).catch(err => { console.error("コピー失敗:", err); }); Clipboard APIは、現在W3CのWorking Draftとして公開されていま
Apple、最新プラットフォーム「iOS 17.6」と「iPadOS 17.6」を提供開始！日本で衛星通信による緊急SOSが利用可能に。不具合・脆弱性の修正も 2024年07月30日14:55 posted by memn0ck カテゴリiPhoneiPad list AppleがiPhoneなど向けiOS 17.6とiPadOS 17.6をリリース！ Appleは29日（現地時間）、同社が販売するスマートフォン（スマホ）「iPhone」シリーズ向けプラットフォーム「iOS」とタブレット「iPad」シリーズ向けプラットフォーム「iPadOS」の最新バージョン「iOS 17.6（21G80）」および「iPadOS 17.6（21G80）」を提供開始したとお知らせしています。 変更点はiPhone 15シリーズおよびiPhone 14シリーズにおいて日本にて携帯電話ネットワークや無線LAN（W
来月COSCUP 2024で "Catching up trends in audio app development" というタイトルでセッション発表することになっているので、ここ1, 2年くらいでトレンドとなったオーディオアプリ開発技術について、いろいろおさらいしておかないといけなくなった。というわけでこれはメモ書き程度にいろいろまとめていこうというものだ。 いろいろ考えをまとめていたら、だいぶ長くなってしまったので、3部作くらいにして公開すると思う。2部になるかも。 WebView オーディオプラグインのUIにWebViewを採用しようという動きが活発になっている。C++のアプリケーションビルドモデルは、hot reloadingが不可能であるという点だけでも現代のGUI開発ツールの要求事項とは相性が悪い。RADが可能でデスクトップもサポートしているものとしては、JavaScript
Life with Web Browser Engine (Gecko, WebKit and etc), Mobile and etc. DroidKaigiにココらへんの話をしようと思って、CfP書いたけど落ちたので、自分用の覚書。 Firefox (GeckoView) AndroidでCredentail Managerの対応を入れたのが、GeckoViewとしてはバイナリサイズを大きくしたくないため、JetPackを一切使わずにCredential Manager経由でWebAuthn対応を行うコードをJavaでスクラッチで書いた。おそらくJavaでスクラッチで書いたのはChromeとGeckoViewだけだし、おそらくこの2つの製品以外でスクラッチ実装がされることは今後もないと思う。 しかもGeckoViewはWebブラウザエンジンなわけだから、いろんなWebサイトで実行可能な
Letter Spacing Is Broken And There's Nothing We Can Do About It... Maybe | CSS-Tricks
This post came up following a conversation I had with Emilio Cobos — a senior developer at Mozilla and member of the CSSWG — about the last CSSWG group meeting. I wanted to know what he thought were the most exciting and interesting topics discussed at their last meeting, and with 2024 packed with so many new or coming flashy things like masonry layout, if() conditionals, anchor positioning, view
Third Party Cookies Must Be Removed W3C TAG Finding 26 July 2024 More details about this document This version: https://www.w3.org/2001/tag/doc/finding-web-without-3p-cookies-20240726 Latest published version: https://www.w3.org/2001/tag/doc/web-without-3p-cookies/ Latest editor's draft:https://w3ctag.github.io/web-without-3p-cookies/ History: Commit history Editors: Amy Guy (Digital Bazaar) Danie
てんてんてん(..., 3点リーダー)をいい感じにしたい！ フロントエンドの画面表示を実装していて、「数行(コンポーネントを使う側から指定)かつ溢れたら3点リーダーを付けれるコンポーネント」を実装したくなることがあるかと思います。この記事ではそのやり方をメモ程度にまとめていきます。 具体的なUI こちらは実装後のStorybookのキャプチャです。 どうやるの？実際のコードは？ React, MUIを用いて.tsxに実装する場合の一例を残しておきます。 MUIでなくても、コードを適宜修正すればchakraなどでも大体同じようにして使えるはず！ 追記：chakraにはnoOfLinesというpropsがあると同僚エンジニアが教えてくれました！ /** * テキストを指定行数で省略表示するコンポーネント * @param param0 lineLength: 表示行数 * @returns T
PCだとマウスでテキストをダブルクリックや、 基点となる箇所をクリックしてマウスを動かして範囲選択ができる。 スマホだと基点となる箇所をタップし、テキストを指でなぞることで範囲選択ができる。 コピーされたくない文字や画像などのコンテンツがある場合、 サイト側でCSSを設定することで、文字や画像の選択を防ぎコピーを禁止することができます。 対処方法 選択させたくないコンテンツを持つ要素にCSSで「user-select」を設定してやります。 以下のコードをCSSで設定します。 ※1{ user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } ※1：選択させたくないテキストを子に持つ要素（div, p, td）など サンプル
普段はiOS向けにazooKeyという日本語入力キーボードアプリを作っています。少し前からazooKey on macOSの開発を始めました。 といっても、独自実装した変換エンジンのAzooKeyKanaKanjiConverter自体は既にmacOSで動作確認していたので、macOSの入力メソッドフレームワークであるInputMethodKitとAzooKeyKanaKanjiConverterを繋ぐのがメインの開発内容です。以前にも一度チャレンジしてInputMethodKitで挫折していたのですが、この度ついにまともに動くものができました。 出来たもの 作り方 大人しく先人の知恵に縋りました。1000円で全てが分かります。 何年も前のものですが、InputMethodKitの側の変更が皆無であることもあり、ほとんど書いてあるとおりに実装できました。参考実装のEmojiIMは当時との環
![[InputMethodKit] azooKey on macOSの開発知見](https://cdn-ak-scissors.b.st-hatena.com/image/square/bb3db8c12720c2dbd6193277571ef5a088ece36c/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--h4nru4X2--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BInputMethodKit%25255D%252520azooKey%252520on%252520macOS%2525E3%252581%2525AE%2525E9%252596%25258B%2525E7%252599%2525BA%2525E7%25259F%2525A5%2525E8%2525A6%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3AMiwa%252520%25252F%252520Ensan%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzRmOTgwNWI4OGIuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AazooKey%252520blogs%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzkyNDQ4NzBlMTUuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
本投稿は TECOTEC Advent Calendar 2023 の 12 日目の記事です。 はじめに こんにちは。決済認証システム開発事業部 の 牛越 嵩 です。10月頭に、iOS エンジニアとして入社しました。 (入社前までは React 中心にやっておりました。初の iOS 実務です。) さて、最近、WKWebView を使う機会があり、UIViewRepresentable を使用して SwiftUI で使えるようにしたのですが、その際に得た知見を紹介しようと思います。 ただ、UIViewRepresentable でラップしただけの話だと二番煎じになってしまい、面白みがないので、SwiftUI では難しそうな WKWebView.reload() の実行等のやり方を紹介したいと思います。 (前提) SwiftUI で UIViewRepresentable を使用してコンポーネ
【デモあり】Swiper.js(v.8)でサムネイル付きスライドショーをWordPressで使ってみます | WordPress |ドイツでホームページ・ウェブサイト制作｜Himpotan web
サムネイル付きスライドショーを簡単に実装できるというSwiper.js（2022年2月現在：最新Ver.8.0.6）を、WordPress上で実装してみました。コピペしてサクっと使いたい！という方向けに使い方をご紹介します。まずは以下のデモをご覧ください。 Swiper.js(v.8) #Thumbs gallery loop のデモ Swiper.jsの使い方＠WordPressいかがですか、サムネイル付きスライドショーになっていますね。Swiper.jsはjQuery不要で手軽に多様なスライダーを実装できるということで、色々なサイトを参考にしてやってみたのですが、どうもちゃんと動きません。バージョンが新しくなる度に設定方法などちょいちょい変わるそうなので、最新版を使う場合は頑張って英語を読みながら本家サイトを参考にするのが一番良さそうです。 では上記のサムネ付きスライダーの実装方法をご
こんにちは、エンジニアのぱやぴです！ 前回は「Playwright 実践～超簡単 4Step～」を解説しました。今回は、Microsoft Visual Studio Code（以下VSCode）とPlaywrightを使って、ウェブサイトのテスト自動化を実現する方法をご紹介します。具体的には、こちらのウェ... Playwrightとは まずPlaywrightについて、簡単に記載しようと思います。 Playwrightは、End to Endテスト（以下、E2E）が行えるオープンソースライブラリで、 Microsoft が開発しました。 そして、E2Eが行えるのはもちろんですが、その他以下のような特徴があります。 UIモード レコーディング機能 HTMLレポート生成 APIテスト クロスブラウザ・クロスプラットフォーム CI/CD その他諸々・・・ 詳しくは後述しますが、非エンジニアで
KNOWLEDGE WORK Dev Talk #02 「エンジニアは何か尖った部分をひとつ持っていることが大事」@mayah｜Knowledge Work Developers blog
KNOWLEDGE WORK Dev Talk #02 「エンジニアは何か尖った部分をひとつ持っていることが大事」@mayah ナレッジワークで働くエンジニアたちのパーソナリティに迫るインタビューシリーズ、「KNOWLEDGE WORK Dev Talk」。これまでのキャリアの歩みや価値観、現在取り組んでいるプロジェクトなどについて質問していくコーナーです。ナレッジワークのVPoE（VP of Engineering）である木村 秀夫（hidek）と一緒に、ナレッジワークのエンジニアのイネーブルメントの源泉に切り込んでいきます。 第2回目となる今回は、創業からナレッジワークのエンジニアリングを牽引する、CTOの川中 真耶(mayah)に話を聞きました。 川中 真耶 (mayah) / CTO 2006年、東京大学大学院情報理工学系研究科コンピュータ科学専攻修士課程修了。日本IBM東京基礎研
【輪読会レポート】［入門］Webフロントエンド E2E テスト PlaywrightによるWebアプリの自動テストから良いテストの書き方まで 第6章「実践的なテクニック」｜たぐち
【輪読会レポート】［入門］Webフロントエンド E2E テスト PlaywrightによるWebアプリの自動テストから良いテストの書き方まで 第6章「実践的なテクニック」 はじめにこんにちは。ラクス フロントエンドチームのたぐちです。 今回は輪読会の実施レポートvol.4です。 書籍と読書範囲 ［入門］Webフロントエンド E2E テスト PlaywrightによるWebアプリの自動テストから良いテストの書き方まで(画像はこちらより引用)今回の読書範囲は第6章 実践的なテクニックのP100～P134です。 議論・意見交換 議論の様子(miro)学び、ギモン、その他の三軸で付箋を張り付け、付箋の内容を左上から順に読んで議論していきました。 実際の議論順で内容を確認していきます。 学び6.2 認証処理を跨がずにテストをしたいけど、検証環境でフェイクの認証を用意することはできるのか？ 認証が不要
Apple、｢macOS Monterey/Ventura｣向けに｢Safari 17.6｣をリリース | 気になる、記になる…
本日、Appleが、「macOS Monterey」と「macOS Ventura」向けに「Safari 17.6」をリリースしています。 このアップデートには、重大な問題の修正およびセキュリティアップデートが含まれており、WebKitに関する脆弱性など、7件の脆弱性が修正されます。 なお、対象のユーザーは「システム環境設定＞ソフトウェアアップデート」よりアップデート可能です。 ・About the security content of Safari 17.6 – Apple
Appleが重要な脆弱性を修正した「iOS・iPadOS 16.7.9」を提供開始！iOS・iPadOS 17非対応のiPhone X・8・8 PlusやiPad（第5世代）など向け 2024年07月30日15:25 posted by memn0ck カテゴリiPhoneiPad list AppleがiPhoneやiPadなど向けiOS 16.7.9とiPadOS 16.7.9をリリース！ Appleは29日（現地時間）、iPhoneおよびiPod touch向けプラットフォーム「iOS」とiPad向けプラットフォーム「iPadOS」において前バージョン「iOS 16」や「iPadOS 16」の最新版「iOS 16.7.9（20H330）」および「iPadOS 16.7.9（20H330）」を提供開始したとお知らせしています。 対象機種はiOS 16やiPadOS 16の対応機種でiP
ブラウザの仕組みを学ぶ
Web フロントエンジニアたるもの、ブラウザの仕組みに興味を持つのは自然の摂理です。本記事では、私がブラウザの仕組みを学んでいく過程を備忘録として残します。 みんな大好き Chrome Web フロントエンジニアに愛されているブラウザといえば、IEChrome ですよね。 ブラウザで HTML,CSS,JS の動作確認するのは、日常茶飯事です。 ブラウザによって動作が異なることは、Web フロントエンジニアなら周知の事実です。 じゃあ、なんで動作が違うのかというと、 「レンダリングエンジンが違うから〜」 「Javascript エンジンが違うから〜」 ぐらいは知っているんじゃないかなと思います。 じゃあ、そのレンダリングエンジンってどういう仕組みで動いているのでしょうか。 気になりますよね。 Chromium について Chromium も、たぶんご存じの方多いのかなと思いますので、簡単に
ネットに落ちてる情報１つではダメで、いくつか組み合わせないと実現しなかった。 プロジェクト一式はこちら GetWebViewHtml オリジナルのWebViewClientクラスを作ってviewSource関数で受信するのが定番だが、 @JavascriptInterfaceプロトコルをつけなくては動作しない。 さらに明示的なimport文が必要なのがハマりどころ。Auto Importの機能は重要。 import android.webkit.JavascriptInterface; @JavascriptInterface public void viewSource(final String src) { 作ったサンプルがこちら。 // アクティビティ package net.servernote.getwebviewhtml; import android.app.Activity
JavaScript エンジンの高速化
これらの JavaScript エンジンのうち、以下では特に JavaScriptCore を扱います。 最適化の基本戦略 JavaScript をはじめとする動的言語は、主にインタープリタにおいて実行されます。しかし、インタープリタはコンパイルされたコードと比較して実行に時間を要するという欠点があります。そこで、インタープリタの最適化では、バイトコードの JIT コンパイルが最初に行われます。 しかし、コンパイルには当然時間がかかります。少しでも高速化されたコードを生成するには、より多くの時間をコンパイルにかけなければなりません。コンパイルによる速度向上とコンパイルのレイテンシはトレードオフの関係にあります。 そこで、多くの JavaScript エンジンは、インタープリタと多階層の JIT コンパイラの組み合わせで構成されています。次の図は、主要な JavaScript エンジンの設計
Chrome、FireFox、Safariといった主要ブラウザにおけるIPアドレス「0.0.0.0」の扱い方に問題があり、問題を悪用することで攻撃者が攻撃対象のローカル環境にアクセスできることが明らかになりました。問題を発見したセキュリティ企業のOligo Securityは、この脆弱(ぜいじゃく)性を「0.0.0.0 Day」と名付けて注意喚起しています。 0.0.0.0 Day: Exploiting Localhost APIs From the Browser | Oligo Security https://www.oligo.security/blog/0-0-0-0-day-exploiting-localhost-apis-from-the-browser Oligo Securityによると、主要なブラウザでは「『0.0.0.0』へのアクセスを『localhost (12
前回、PMTilesに複数のレイヤ 行政区画 ハザードマップ をまとめて、maplibre-gl-jsから表示するところまでやりました 今回は、表示するレイヤを制御する実装をしていきます 実装サンプルを調べるとプレーンなjsでの実装が多いのですが今回はReactを使います それと、複数レイヤを制御するにあたって実装を少しいじりました この実装であれば新しいレイヤを後で追加したいとなったときにもスムーズにできると思います 実装サンプル import React, { useRef, useEffect, useState } from 'react'; import maplibregl, { RasterSourceSpecification, VectorSourceSpecification, SourceSpecification } from 'maplibre-gl'; impo
欧州を基盤にオープンでセキュアなインターネットの実現を支援しているNLnet Foundationは、Rust製ブラウザエンジン「Servo」を用いたWebブラウザ「Verso」の開発プロジェクトの立ち上げを発表しました。 Versoの開発は、Electron代替を目指すフレームワーク「Tauri」の開発チームが主導することが、下記のポストで示されています。 We've stopped waiting for other people to solve our problems with webviews and kicked off a browser+webview project called Verso (and we've already gotten a bit of funding from NLNET.)https://t.co/PMOV7YbGtE https://t.c
「0.0.0.0」へのアクセスを悪用してローカル環境に侵入できる脆弱性「0.0.0.0 Day」が発見される - ライブドアニュース
Chrome、FireFox、Safariといった主要ブラウザにおけるIPアドレス「0.0.0.0」の扱い方に問題があり、問題を悪用することで攻撃者が攻撃対象のローカル環境にアクセスできることが明らかになりました。問題を発見したセキュリティ企業のOligo Securityは、この脆弱(ぜいじゃく)性を「0.0.0.0 Day」と名付けて注意喚起しています。 0.0.0.0 Day: Exploiting Localhost APIs From the Browser | Oligo Security https://www.oligo.security/blog/0-0-0-0-day-exploiting-localhost-apis-from-the-browser Oligo Securityによると、主要なブラウザでは「『0.0.0.0』へのアクセスを『localhost (12
Chrome、FireFox、Safariといった主要ブラウザにおけるIPアドレス「0.0.0.0」の扱い方に問題があり、問題を悪用することで攻撃者が攻撃対象のローカル環境にアクセスできることが明らかになりました。問題を発見したセキュリティ企業のOligo Securityは、この脆弱(ぜいじゃく)性を「0.0.0.0 Day」と名付けて注意喚起しています。 0.0.0.0 Day: Exploiting Localhost APIs From the Browser | Oligo Security https://www.oligo.security/blog/0-0-0-0-day-exploiting-localhost-apis-from-the-browser Oligo Securityによると、主要なブラウザでは「『0.0.0.0』へのアクセスを『localhost (12
概要 ここでは、一般的なデスクトップ環境の構築、dotfilesをnixで管理する方法をまとめようと思います。 ArchLinuxやUbuntuほどメジャーでないため日本語記事が少なく、海外の記事を呼んでも微妙にわからないことが多くて辛かった。 NixOSを使ってる人は多分真っ先にコードを読んで理解できる人しか使ってないんじゃないかと思ったくらい。 モチベーション 日常使いのOSとしてArchLinuxを使っていて特に不自由なく今日まで来ました。 各マシンで微妙に環境に差異があることからは目を背けていましたが、最近マシンを増やすことになり環境構築について再度見直す機運が高まりました。 更にこの前のアプデでlightdm-webkit2-greeterが起動しないということにも見舞われたのでこれを気に、1.どのマシンでも同じ環境で 2.たとえパッケージが壊れたとしても即座に復旧でき（少なくと
【文字の縁取り】CSSでテキストに境界線をつける方法
ウェブデザインにおいて、サイト訪問者に効果的に訴求するためには、視覚的な要素の調整が欠かせません。ウェブサイトの全体的な美しさや読みやすさに大きく影響する要素のひとつが、テキストのスタイルです。 テキストのスタイリングは、単にフォントの種類やフォントの色を選ぶだけでは終わりません。たとえば、境界線を利用して印象的な文字にするなど、さまざまなCSSプロパティを組み合わせて好みの効果を実現することができます。 この記事では、CSSを使用して文字を縁取りする方法をご紹介します。 ウェブテキストを理解する ウェブテキストとは、ウェブページに表示されるテキストのことです。フォントは、ウェブ上でテキストを表示する上で重要な役割を果たします。フォントは基本的にベクターベースのグラフィックであるため、ピクセルデータによる制限がなく、鮮明さを維持したままさまざまなサイズでレンダリングすることができます。 フ
日本語の文字詰めに利用できるfont-feature-settings:"palt"でおしゃれに魅せる 更新日：2023年01月09日 日本語で文章を打ったり、デザインを作っているときに、文字幅を詰めたいなと思ったことはありませんか？ そんなときに使えるCSSがfont-feature-settingsです。 letter-spacingでも設定はできるのですが、letter-spacingよりも使いやすいと思いますので、場面に分けて使うのがおすすめです。 日本語をいい感じで文字詰めできるfont-feature-settings:"palt"font-feature-settings: "palt"を設定することで、各文字に合わせた文字幅で調整されいい感じに文字詰めができます。 実際に見ていただいた方がわかりやすいので、まずは見てみてください。 ▼ 例文 上の文章が通常の設定で表示される
ながらみパパの妥当ブログ
以下の記事でヘッダーメニューをChatGPTを利用して作成する方法を記載しました。 その中でヘッダーに追記するCSSを載せていますが、各行ごとの設定内容について 解説していきたいと思います。 以前の記事 nagarami-kurokiri.hatenablog.com どうせならCSSの内容を理解して応用できるようにしたいよね 本記事の概要 ・はてなブログでヘッダーメニューを表示するCSSの内容を解説 ・フォントや背景色、サイズなどを変えたい人は必見 ・サクッと対話形式を実装したい人はこちらの記事を見てね！ ・今回はCSSを上からある程度の行数ごとに説明を入れていくので、一気に全文知りたい方も過去記事参照してください CSSの上から順にわかりやすく解説していきます！ HTML文書の開始部分 背景色、テキストカラーの設定 カテゴリボックスの基本設定 カテゴリのテキストとアイコンの基本設定 ホ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「0.0.0.0」へのアクセスを悪用してローカル環境に侵入できる脆弱性「0.0.0.0 Day」が発見される
HTMLとCSSでつくる！ リンクテキストのホバー時アニメーション11選 - ICS MEDIA
box-shadow で実装されたフォーカスリングはハイコントラストモードで表示されない
WebKitにWasm Type Reflection API（の一部）を実装してみた
@starting-style - CSS: カスケーディングスタイルシート | MDN
blocking=render: Why would you do that?! – CSS Wizardry
Clipboard APIで非同期処理を含む操作をする際の注意点とその対策
Apple、最新プラットフォーム「iOS 17.6」と「iPadOS 17.6」を提供開始！日本で衛星通信による緊急SOSが利用可能に。不具合・脆弱性の修正も : S-MAX
2024年のオーディオアプリケーション開発技術の動向に関する私的見解 (1)
Android 14 (Credential Manager) におけるパスキー対応が面倒すぎる
Third Party Cookies Must Be Removed
【React/MUI/CSS】複数行かつ溢れたら3 点リーダーを付けれるコンポーネントを作ろう！
【CSS】サイト内のテキストを選択できないようにしたい
[InputMethodKit] azooKey on macOSの開発知見
WKWebView.reload() を SwiftUI でもできるようにする - テコテック開発者ブログ
Playwrightはじめました ～E2Eテストを4Stepで自動化～ | Sqripts
Appleが重要な脆弱性を修正した「iOS・iPadOS 16.7.9」を提供開始！iOS・iPadOS 17非対応のiPhone X・8・8 PlusやiPad（第5世代）など向け : S-MAX
【2023年最新版】【Android】WebViewに表示中のHTMLソースを取得する【最終版】
「0.0.0.0」へのアクセスを悪用してローカル環境に侵入できる脆弱性「0.0.0.0 Day」が発見される
React + maplibre-gl-jsで複数レイヤの表示・非表示を制御する
Rust製ブラウザエンジン「Servo」搭載、新たなWebブラウザ「Verso」の開発プロジェクトが立ち上がる
「0.0.0.0」へのアクセスを悪用してローカル環境に侵入できる脆弱性「0.0.0.0 Day」が発見される
ArchLinuxからNixOSに移行してみる - Qiita
日本語の文字詰めに利用できるfont-feature-settings:"palt"でおしゃれに魅せる