「1.1.1.1 は一部の多段 CNAME を解決してくれない」改め「makeshop.jp は 1.1.1.1 をブロックしている」
2023/09/20 追記 以下で有識者からコメントをいただきました。 makeshop.jp は 1.1.1.1 を遮断しているらしく、本記事はまさに makeshop.jp で制作したページが見れないことに起因した話題であったため、多段 CNAME は無関係でした。 コメント頂いた皆様、ありがとうございました！ 1.1.1.1 をブロックしている SaaS があると思わずに首を傾げていた頃の記事 disclaimer Dig Web Interface を用いて振る舞いを観測した結果、 1.1.1.1 のみ異なる結果を返したことから本記事のようなタイトルを付けていますが、 1.1.1.1 の振る舞いが正しい可能性もあります。 ことのはじまり とある SaaS でカスタムドメインを利用するため、 CNAME を以下のように設定したところ、 1.1.1.1 もしくは 1.0.0.1 をネー
フロントエンド開発の変遷③ SPAの登場とMVC/MVVMフレームワーク - Qiita
ページ遷移をクライアントサイドで行う。Ajaxを使用して必要な時に必要な部分だけデータを取得してViewを表示するため、オーバーヘッドが軽減される 従来型のWebアプリケーションよりも、より高速なUIの動作を実現でき、ネイティブアプリのような、より滑らかなユーザー体験を提供できる。現在では多くのWebアプリケーションがSPAで実装されている。 また、SPAの流行に合わせてサーバーサイドの実装も変化しています。SPA以前はJavaのStrutsや、Ruby on RailsなどのサーバーサイドのMVCフレームワークが備えているビューの機能によってUIを実装するのが一般的でした。この形式では、サーバーサイドがビュー（HTMLの生成）までを担当し、都度HTMLをクライアントサイドに渡していた。 SPAの登場によりJSON形式のAPIがサーバーサイドとフロントエンドのつなぎを担うという設計が普及し
HTTPとHTTPSが混ざった安全ではないコンテンツ、見つけ方と対策
Sucuriはこのほど、「How to Quickly Find & Fix Mixed Content Issues (SSL/HTTPS) ｜ Sucuri Blog」において、混合コンテンツ(Mixed Content)の迅速な見つけ方とその修正方法を伝えた。 How to Quickly Find & Fix Mixed Content Issues (SSL/HTTPS) ｜ Sucuri Blog 近年のWebサイトは高いセキュリティが求められるため、ほとんどのWebサイトはHTTPSプロトコルで運用されている。Sucuriによると、WebサイトをHTTPからHTTPSへ移行した際に「混合コンテンツの問題と警告」という意図しない結果をもたらす可能性があるという。 混合コンテンツに関するSucuriの説明を要約すると、「HTTPS接続でのWebサイト読み込み中にHTTPを介した読
2023年下半期に他人に勧めたいWeb技術まとめ
はじめに Web技術は日進月歩で新しい技術が増えているが、実務でそれらすべてを触る機会はない。そこで、今回の記事では2023年下半期に赤の他人に勧めたいWeb技術を個人の独断と偏見で解説する。 対象者 これから何をすればいいのかわからないプログラマー 新しい技術に興味があるひと スキルセットを拡大したいひと タイトルでなんとなく気になったひと フレームワーク FastAPI FastAPIはPythonでAPIを開発するために開発された軽量のWebフレームワークだ。FastAPIでは、主に以下の特徴がある。 Node.jsやGo言語に匹敵する高速なアプリケーションを開発できる 構造が簡単(Flaskの影響を受けている) Pythonに型定義を含められる 環境構築がコマンド一つで終了する 非同期処理を簡単に実装できる Pythonで開発されているので、機械学習との相性が抜群 RESTとGra
【W3Techs】2023年8月にWebで最も使われている技術はjQuery・Bootstrap・PHP・WordPress - Qiita
【W3Techs】2023年8月にWebで最も使われている技術はjQuery・Bootstrap・PHP・WordPressPHPJavaScriptランキングW3TechsQ-Success コンサル会社Q-Successは、World Wide Web Technology Surveysという分析サービスを提供しています。 なんかいかにもW3Cとかと関係ありそうな名前ですが、特に関係はないみたいです。 W3Techsでは、Webサイトを収集し、それらがどのような技術で作られているかといった調査結果を無料で分析・公開してくれています。 こんなに公開していて生計はどうやって立てているのかというと、過去の履歴や細かいレポートなどを有料で売っているみたいです。 6450ページのPDFとか細かすぎて逆に使いこなせそうにもなさそうですが、興味のある方は手を出してみてはどうでしょうか。 データを覗
Chromeの検証ツール（DevTools）入門 - Qiita
記事を書いた経緯としては、フロントエンジニアやWeb開発している人かかわらず、利用する必要性が高いツールだと感じたことと、特に学ぶ機会が自分はなかったため、まとめてみました！ はじめに この記事では、Google Chromeの検証ツール（DevTools）について詳しく解説します。DevToolsは、Web開発者やデザイナーにとって非常に強力なツールであり、デバッグやパフォーマンス評価、コードの改善などに活用されます。本記事では、DevToolsの基本的な機能や使い方をわかりやすく解説します。 対象者 エンジニア初学者 フロントエンド技術の学習者 1. DevToolsの起動方法 DevToolsは簡単に起動できます。以下の方法でアクセスします。 Google Chromeを開く。 ページの任意の部分で右クリックして、「検証」を選択する。 キーボードショートカット（Windows: Ct
ウェブサイトを保護する「WAF」と次世代型ソリューション「WAAP」はどこが違うのか
日常生活やビジネスで必要不可欠な存在となっているインターネット。その利便性を高めるために、ウェブアプリケーション、ウェブサイト間でAPI連携するケースが増えている。この記事では、ウェブアプリケーション、ウェブサイトを保護するためのソリューションであるWAFと次世代型のWAAPについて、それぞれの機能と違いを解説する。 WAFとは？ 日常生活やビジネスにおいてインターネットは必要不可欠になっており、SNSや動画視聴、オンラインバンキングをはじめとした利便性の高いウェブアプリケーションが数多く提供されている。そうしたウェブアプリケーションをサイバー攻撃から保護するのがWAFだ。 WAFは「Web Application Firewall」の頭文字からなる略称であり、ウェブアプリケーションの防御を目的とするファイアウォールである。ハードウェア、あるいはソフトウェアとして導入することで、SQLイン
Auth0で脆弱なWebアプリケーションを作る~設計編~ - Qiita
はじめに 今から1つ大きな脆弱なポイントがあるアプリケーション(フィクション)の設計を紹介します。どこに問題があるか考えながら読んでみいただけると楽しめるかもしれません。 事業会社のCIOとベンダー企業のある話。 注 : この話はフィクションです CIO: 「ウチのECサイトにAuth0を導入しようと思う」 ベンダー: 「Auth0ですか、最近Oktaに買収されたIDaaSですよね」 CIO: 「そーそー、これを機にセキュリティリスクを転嫁してしまった方がええんやと思う。ということで認証システムのリプレースよろしく」 ベンダー: 「はい!!!」 数ヶ月後 ベンダー: できました！ CIO: 「おー、じゃあテキトーにシーケンス図でも見せて」 ベンダー: 「はい、ではまずログインのところから。現在SPAで構築されているWebアプリケーションを認可コードフロー+PKCEで認証しトークンを取得しま
実はサーブレットの勉強もSpring Bootを使うほうが楽なのでは - きしだのHatena
サーブレットで面倒なのはTomcatとの付き合いです。 Spring BootでSpring Webを使うと組み込みTomcatが動くので、Tomcatのことを気にしなくてよくなりますね。 そこでサーブレット動かすと勉強しやすいんでは、と思ったので試してみます。 まず、spring initializrでSpring Webを追加したプロジェクトを作ります。 https://start.spring.io/ このリンクから、設定済みのspring initializrを開けます。Mavenにしているので、Gradleがいい人は選択しなおしてください。 https://start.spring.io/#!type=maven-project&language=java&platformVersion=3.1.1&packaging=jar&jvmVersion=17&groupId=com.
WEBマンガ更新情報まとめアプリを作ってみた - Qiita
作ろうと思った経緯 前回のレシピガチャを作ってみたと同様、会社のメンバーで個人開発をやっていこうというイベントで作りました。 マンガが好きなのでマンガに関連するものを作りたかった スクレイピングで何かやってみたかった 案件でvue.jsを触る機会があり、vue.jsで開発してみようと考えた という感じです。 技術スタック ruby 3.2.2 Rails 7.0.4.3 vue.js 3.2.47 nuxt.js 3.4.2 vuetify 楽天レシピAPI Github Actions どんなものができたか Webマンガ更新情報まとめアプリです。下記URLにアクセス頂くと表示できます。フロントエンドとバックエンドのサーバが分かれていて、初回アクセスはページ自体はすぐ表示されますがバックエンドのサーバが寝てるので起きるまでコンテンツ表示にはだいぶ時間がかかりますのでご了承ください。 → サ
【1.導入編】ここから始めようWebアクセシビリティ - Qiita
関連記事 【0.気持ち整理編】 いまここ 【1.導入編】 概要 前回の記事は気持ち整理編でした。 この記事は「じゃあどこからやる？」の部分を書いたものです。 どこから何をやればいいのか 何をやればいいのかざっくり見ていきましょう。 どのくらいの時間をかけられるか確認する 知識をつける ★ 正しいタグでマークアップする キーボードで操作できるか確認し、改善する スクリーンリーダーの使い方を知る スクリーンリーダーでの読み上げで問題ないか確認し、改善する モーダルやタブなど、通常のマークアップだけでは対応できないものについて対応する まずこの辺から始めるといいと思います。 詳しく見ていきましょう。 （この記事では「★ 正しいタグでマークアップする」まで説明します。） どのくらいの時間をかけられるか確認する 個人開発なら自由に時間を使うことができますが、仕事だとそうもいきません。 （特に受託制作
最適化はCDNがやればいい
題名に「CDN」と書きましたが、いわゆる「エッジ」のことです。オリジンありきなのであえてCDNと呼びました。とはいえ、オリジン自身がエッジにある可能性もあります。 メタフレームワークを作る Sonikというメタフレームワークを作っています。まだDevステージなんでどんなことができるか可能性を探っている最中です。 このフレームワークの特徴はとにかくエッジファーストです。 SSRしたバンドルの大きさを極力小さくする。 Islandsアーキテクチャを採用する。 DenoのFreshを参考にする。 CloudflareのBindingsを扱いやすくする。 Honoの上に乗せる。 とりあえずStreamingはサポートしない。 で、こういうのを作っていると、フレームワークは最小限にして、Core Web Vitalsのスコアを上げるために身を削る最後の部分はCDNに任せてしまった方がいいってことです
1次元の場合でも flex-shrink, flex-grow が必要なら CSS Grid でもいいんじゃない？ - Qiita
1次元の場合でも flex-shrink, flex-grow が必要なら CSS Grid でもいいんじゃない？CSS 「１次元なら Flexbox, ２次元なら CSS Grid」 のように Flexbox と CSS Grid を使い分けると考えている人は多いのではないでしょうか？ じつは、１次元であっても、中身の文字列等の幅に関係ない(つまり 幅 が hug contents じゃない) 要素が含まれるときには、 Flexbox で書くよりも CSS Grid のほうが簡潔になる場合があります。 たとえば、「左側は幅固定で、右側はあまった幅を埋める (ともに中身に左右されない)」のように領域を左右に分ける場合です。 (CodeSandbox のプレビュー画面のサイズを変化させると、左側領域の幅は変わらず、右側だけが変わっていることが分かります。) 1. Flexbox で実装する
HTMLメールの最近の実装方法を解説、tableは不要になりました
HTMLメールの実装で「tableか、、、」とため息をついていた人に朗報です。 tableを使用しなくてはいけなかった理由はWindows上のOutlookだったのですが、新しいOutlookではレンダリングエンジンがEdgeに切り替わります。これにより、tableによる実装は不要になります。 HTMLメールの最近の実装方法を解説します。 Modern HTML email (tables no longer required) by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLメールの実装でもっとも頭を悩ませている問題 今日、HTMLメールをどのように実装すべきか？ 電子メール用のAMPについて 終わりに はじめに MailChimpによるHTMLメール実装のベストプラクティ
Web開発チームなのに何故かゲーム作ることになった話 - Qiita
TL; DR 恋活マッチングアプリの1コンテンツとしてソリティアを作ることに JSのゲームライブラリ「Phaser3」（＋Vue構文でゲームを作れる「Phavuer」）で実装 作ったもの 弊社が運営している恋活・婚活マッチングアプリ「CoupLink」の中の機能の1つとして、「ソリティア」を実装しました！ ゲーム自体は、一般的なソリティアのルールに沿ったものです。 付随して、他のユーザーのハイスコアがタイムラインで表示されるような、ちょっとしたコミュニティ要素を設けています。 ゲーム部分は、未登録ユーザーも遊べる形で公開されていますので、お試しいただけます！ なぜマッチングアプリにゲーム？ 以下のようなねらいで、アプリ内にゲームを設置することになりました。 「お相手にチャット送って、相手からの返事を待つ時間」など、マッチングアプリには待ち時間が存在する。その時間にアプリを閉じて離脱してしま
セキュリティの問題を見つけ警告する慈善団体から連絡が来た - Qiita
ある日、、 「Repo Lookout」という団体から、僕個人のemailに「君のサイト脆弱性あるよ」といった旨の連絡が来ました。 開くと本文には、確かに僕が書いたであろうprivateなgitリポジトリへのコミットメッセージが記載されていたので、事実であることはすぐに分かりました。 問題 どうやら、僕がずっと昔に作った個人のWebサイトに、.gitディレクトリ配下へWeb上からアクセスできてしまう問題があるようです。 当時、プロジェクト直下をそのままドキュメントルートに設定してしまっていたため起きていました。 見られて問題になるようなプロジェクトではなかったのは幸いです。 Repo Lookout この連絡を送ってきた団体は、脆弱性を突いて脅しをかけよう、といったような悪意のある団体ではなく、むしろその逆のようです。 このケースの脆弱性に特化して、世の中のWebサイトから同様の問題を持つ
「.zip」ドメインの悪用サンプルをセキュリティ研究者が公開 WinRARを模倣
Googleは2023年5月、「.dad」「.phd」「.prof」「.esq」「.foo」「.zip」「.mov」「.nexus」と新たに8つのジェネリックトップレベルドメイン（以下、gTLD）を導入した。特に追加ドメインの中でも「.zip」が問題視されており、ファイル拡張子と同じ名前のドメインを悪用した詐欺が懸念されている。 セキュリティ研究者のmr.d0xは2023年5月22日（現地時間）、「WinRAR」を模倣したWebページを作成して実際に詐欺に悪用可能であることを指摘した。作成されたHTMLなどはGitHub.comに公開されている。 WinRARを模倣する「.zip」ドメインの具体的悪用例 セキュリティ研究者のmr.d0xは、「.zip」ドメインを悪用したサンプルをGitHub.comに公開した。 mr.d0xは.zipの悪用が可能であることを示すために、Webページを作成し
約７５００種の汎用ピクトグラムアイコン集「Phosphor Icons」:phpspot開発日誌
Phosphor Icons 約７５００種の汎用ピクトグラムアイコン集「Phosphor Icons」。 サイト上で検索やサイズ変更、色変更をし、コードを発行してすぐに使えて便利な形式になっています。
Web標準に新たなステータス「Baseline」が登場。変化し続けるWeb標準のうちWeb開発者が安心して使える機能群を示す。MDNドキュメントなどで表示開始
Web標準に新たなステータス「Baseline」が登場。変化し続けるWeb標準のうちWeb開発者が安心して使える機能群を示す。MDNドキュメントなどで表示開始 Web開発者の開発体験を改善することなどを目的としたW3CのWebDX Community Groupは、つねに新たな機能などが登場し変化し続けるWeb標準のうち、Web開発者が安心して使える機能群を示す新たなステータス「Baseline」を発表しました（Googleによる発表、MDNによる発表）。 現在、Web標準はリビングスタンダードとしてつねにアップデートが行われており、ChromeやFirefox、Safariなどの主要なWebブラウザは、Web標準で新たに策定される機能をそれぞれ実装し、最新版に反映させています。 そのため、それぞれのWebブラウザがWeb標準のどの機能をいつ頃実装し、最新版に反映させるのかは時期が異なりま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DBやめてみた / DNS water torture attack and countermeasures
