Vueで埋め込みiframeのURLおよび内部DOM操作の実装
外部の可視化ダッシュボード（例：Grafana）をVueアプリケーション内にiframeとして埋め込む際、動的に変化するURLの取得やiframe内のDOM要素に対する操作（非表示・削除・追加）が必要になるケースがある。これらの操作は同源ポリシーにより制限されるため、事前にバックエンド側でプロキシ設定を行い、iframeのドメインを現在のVueアプリケーションと同一オリジンにする ...
7月31日 17:30 投稿
JavaScriptによるカーソル位置検出ライブラリ「Caret Pos」の実用ガイド
ライブラリ概要
Caret Pos は、テキスト入力要素やiframe内のコンテンツ編集領域におけるカーソル（挿入ポイント）の位置を取得・設定するための軽量JavaScriptライブラリです。特にWYSIWYGエディタや動的フォームの開発において、正確なカーソル座標の取得が求められる場面で活用されます。本ライブラリはモダンなブラウザ環境を前提としており、SelectionおよびRange API ...
7月16日 19:08 投稿
Webアプリケーションにおけるクロスオリジン通信の実践的対策
同源ポリシーの基本メカニズム
ブラウザのセキュリティ制約により、異なるオリジン（スキーム・ドメイン・ポートの組み合わせ）へのXMLHttpRequest/fetch要求がブロックされる現象を指します。オリジンの一致判定は以下の通りです：
リクエスト元URL
リクエスト先URL
通信可否
https://app.example.co.jp/main.js
https://app.example.co.jp ...
6月1日 00:14 投稿
iframeのクロスドメイン対応と要素取得手法
要件としてiframeによるページ埋め込みを実現し、スクロールバーを非表示にすることで、二つのページが連結されたような効果を得る
クロスドメイン問題の対処には、プロキシ設定を利用
proxy: {
'/medical': {
target: 'https://example.com',
changeOrigin: true,
pathRewrite: {
'^/medical': '',
},
},
}
iframe ...
5月20日 16:41 投稿