YouTube 動画埋め込みのレスポンシブ対応方法 - by Takumi Hirashima
YouTube 動画の埋め込みをレスポンシブ対応する方法を紹介します。 埋め込みコードをブロック要素で囲み、CSS の aspect-ratio プロパティを使い、アスペクト比を 16:9 に固定することで対応します。縦型動画の場合はアスペクト比を任意の値に変更してください。 また、古いブラウザーでも対応できる padding-top ハックを使った方法も紹介します。 動画の埋め込みをレスポンシブ対応する方法 aspect-ratio を使った方法 padding-top ハックを使った方法 動画の埋め込みをレスポンシブ対応する方法 まずは YouTube からコピーした「動画の埋め込みのコード（iframe）」をブロック要素（<div class="youtube">〜</div>）で囲みます。 <div class="youtube"> <iframe width="560" heig
安全なウェブサイトの作り方 - 1.9 クリックジャッキング | 情報セキュリティ | IPA 独立行政法人 情報処理推進機構
安全なウェブサイトの作り方 - 1.9 クリックジャッキング 概要 ウェブサイトの中には、ログイン機能を設け、ログインしている利用者のみが使用可能な機能を提供しているものがあります。該当する機能がマウス操作のみで使用可能な場合、細工された外部サイトを閲覧し操作することにより、利用者が誤操作し、意図しない機能を実行させられる可能性があります。このような問題を「クリックジャッキングの脆弱性」と呼び、問題を悪用した攻撃を、「クリックジャッキング攻撃」と呼びます。 発生しうる脅威 クリックジャッキング攻撃により、発生しうる脅威は次のとおりです。マウス操作のみで実行可能な処理に限定される点以外は、CSRF攻撃による脅威と同様です。 ログイン後の利用者のみが利用可能なサービスの悪用 利用者が意図しない情報発信、利用者が意図しない退会処理 等 ログイン後の利用者のみが編集可能な設定の変更 利用者情報の公
X-Frame-Options について簡単に調べてみた - Qiita
はじめに 最近担当している対応で、外部サイトから読み込んだhtmlページを iframe 内で表示しようとしたときに、X-Frame-Options というレスポンスヘッダーが無いと読み込みができないという事象に出くわしました。 X-Frame-Options は今まで扱ったことがなかったため、後学のために理解も兼ねて調べてみました。 X-Frame-Options とは X-Frame-Options - HTTP | MDN から引用します。 X-Frame-Options は HTTP のレスポンスヘッダーで、ブラウザーがページを <frame>, <iframe>, <embed>, <object> の中に表示することを許可するかどうかを示すために使用されます。 サイトはコンテンツが他のサイトに埋め込まれないよう保証することで、クリックジャッキング攻撃を防ぐために使用することがで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
