目次
?§セキュリティ:逆タブナビングを防ぎます
⚡パフォーマンス:CPUスロットリングを回避します
いつ使用する必要がありますか?
結論
ホームページ ウェブフロントエンド htmlチュートリアル HTMLリンクのREL = 'NOOPENER'の目的は何ですか

HTMLリンクのREL = 'NOOPENER'の目的は何ですか

Aug 01, 2025 am 06:09 AM

REL = "NOOPENER"を使用して、新しいタブのページがWindow.openerを介して元のページを操作し、逆タグハイジャックなどのセキュリティリスクを回避し、ブラウザが独立したプロセスとしてパフォーマンスを改善するための新しいタブを実行できるようにします。

rel = \の目的は何ですか

HTMLリンクのrel="noopener"属性は、 target="_blank"を使用して新しいタブまたはウィンドウでリンクを開くときにセキュリティとパフォーマンスの理由に使用されます。

rel =の目的は何ですか

このようなリンクがある場合:

 <a href = "https://example.com"ターゲット= "_ blank">例</a>にアクセスしてください

新しいページは別のタブに開きますが、元のページのwindow.openerプロパティに完全にアクセスできます。これは、新しいページが技術的に元のページを操作できることを意味します( window.opener.location.replace()を介して場所を変更するなど)。

rel =の目的は何ですか

?§セキュリティ:逆タブナビングを防ぎます

rel="noopener"がなければ、新しいタブで開かれた悪意のあるサイトはJavaScriptを使用して元のページを変更できます。たとえば、ユーザーをだましてログインページのように見せます。この攻撃は、逆タブナビングとして知られています。

rel="noopener"を追加すると、このリスクが排除されます。

rel =の目的は何ですか
 <a href = "https://example.com"ターゲット= "_ blank" rel = "noopener">
  例をご覧ください
</a>

これで、 window.opener新しいタブでnullあるため、元のページにアクセスまたは変更できません。

⚡パフォーマンス:CPUスロットリングを回避します

window.openerを介して接続されている場合、ブラウザは多くの場合、同じプロセスでタブを実行します。つまり、新しいページの重いスクリプトまたは遅いスクリプトにより、元のページが遅くなる可能性があります。 rel="noopener"を使用すると、ブラウザは新しいタブを完全に個別のように扱い、パフォーマンスと応答性を向上させることができます。

ボーナス: rel="noreferrer" vs rel="noopener"

  • rel="noopener"window.openerへのアクセスをブロックしますが、リファラー情報はまだ送信されます。
  • rel="noreferrer" :リファラー情報が新しいページに送信されることもブロックします。それはnoopenerを意味するので、あなたは両方を必要としません。

ソースURLも非表示にしたい場合はnoreferrer使用しますが、分析に影響することに注意してください(例:リファラーの統計)。

いつ使用する必要がありますか?

when常にrel="noopener" (またはnoreferrer )を使用します。

  • target="_blank"を使用しています
  • あなたは外部の信頼されていないサイトにリンクしています

あなたはそれを必要としません:

  • 内部リンク(まだ含めても大丈夫ですが、リスクが低い)
  • target="_blank"

結論

rel="noopener"を使用することは、新しいタブで開く外部リンクのベストプラクティスです。セキュリティのエクスプロイトからサイトを保護し、ページのパフォーマンスを維持するのに役立ちます。

基本的に:
target="_blank"を使用する場合は、常にrel="noopener"を追加します

以上がHTMLリンクのREL = 'NOOPENER'の目的は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

ホットトピック

初心者向けの不可欠なHTMLタグ 初心者向けの不可欠なHTMLタグ Jul 27, 2025 am 03:45 AM

HTMLをすばやく開始するには、Webスケルトンを構築するためにいくつかの基本的なタグをマスターするだけです。 1.ページ構造は不可欠であり、ルート要素であり、メタ情報が含まれ、コンテンツディスプレイ領域です。 2。タイトルを使用します。レベルが高いほど、数が小さくなります。タグを使用してテキストをセグメント化して、レベルをスキップしないようにします。 3.リンクはタグを使用してHREF属性を一致させ、画像はタグを使用し、SRCおよびALT属性が含まれます。 4.リストは、順序付けられていないリストと順序付けリストに分割されます。各エントリは表され、リストにネストする必要があります。 5.初心者は、すべてのタグを強制的に記憶する必要はありません。あなたが書いている間にそれらを書いてチェックする方がより効率的です。構造、テキスト、リンク、写真、リストをマスターして、基本的なWebページを作成します。

入力タグの名前属性は何ですか? 入力タグの名前属性は何ですか? Jul 27, 2025 am 04:14 AM

thenAmeattributeTheTogisusedisedifytheTheInputisputisUbsisubmitted; itstheasthekey-key-key-valuepairsenttotheserver、wheretheuser'sinputisthevalue.1.whenaformissubmitted、thenameattributebecomesthe keyanttheinputtheinupthe becomesthevalueintas

別のタグ内にタグを入れることはできますか? 別のタグ内にタグを入れることはできますか? Jul 27, 2025 am 04:15 AM

youcannotnesttagsinsisideantagbecuseit’sinvalidhtml; browsersautomatelycloseThefirsteforeopeningthenext、spedinginselementsied、useinlineelements like like like、orforstylingwithinaparagraph、またはblockainerslikegoriveparagragh

Shadow Domの概念とHTML統合 Shadow Domの概念とHTML統合 Jul 24, 2025 am 01:39 AM

Shadowdomは、孤立したDOMサブツリーを作成するためにWebコンポーネントテクノロジーで使用されるテクノロジーです。 1.独自のスタイルと行動を備えた通常のHTML要素上の独立したDOM構造のマウントを可能にし、メインドキュメントに影響しません。 2。AttachShadowメソッドの使用やモードの設定など、JavaScriptを介して作成されました。 3。HTMLと組み合わせて使用すると、3つの主要な機能があります。クリア構造、スタイル分離、コンテンツプロジェクション(スロット)。 4。ノートには、複雑なデバッグ、スタイルスコープ制御、パフォーマンスオーバーヘッド、フレームワークの互換性の問題が含まれます。要するに、Shadowdomは、再利用可能で汚染されていないUIコンポーネントを構築するためのネイティブカプセル化機能を提供します。

html `style`タグ:インラインと内部css html `style`タグ:インラインと内部css Jul 26, 2025 am 07:23 AM

シーンに従ってスタイル配置方法を選択する必要があります。 1。インラインは、操作によるボタンの色の変更など、単一要素または動的JS制御の一時的な変更に適しています。 2。内部CSSは、ページが少ないプロジェクトと単純な構造に適しています。これは、ログインページの基本スタイル設定など、スタイルの集中管理に便利です。 3。再利用、メンテナンス、パフォーマンスが優先され、大規模なプロジェクトの外部リンクCSSファイルを分割することをお勧めします。

HTMLにPDFドキュメントを埋め込む方法は? HTMLにPDFドキュメントを埋め込む方法は? Aug 01, 2025 am 06:52 AM

タグを使用することは、最も簡単で推奨される方法です。構文は、最新のブラウザがPDFを直接埋め込むのに適しています。 2.タグを使用すると、より良いコントロールおよびバックアップコンテンツのサポートを提供できます。Syntaxはサポートされていない場合にバックアップソリューションとしてタグのダウンロードリンクを提供します。 3. Google DocsViewerを介して組み込むことはできますが、プライバシーとパフォーマンスの問題のために広く使用することはお勧めしません。 4.ユーザーエクスペリエンスを改善するには、適切な高さを設定する必要があります。レスポンシブサイズ(高さ:80VHなど)およびPDFダウンロードリンクを提供して、ユーザーが自分でダウンロードして表示できるようにする必要があります。

HTMLで順序付けられていないリストを作成する方法は? HTMLで順序付けられていないリストを作成する方法は? Jul 30, 2025 am 04:50 AM

HTML Unoderedリストを作成するには、タグを使用してリストコンテナを定義する必要があります。各リストアイテムはタグで包まれており、ブラウザは自動的に弾丸を追加します。 1.タグを使用してリストを作成します。 2。各リスト項目はタグで定義されています。 3.ブラウザは、デフォルトのドットシンボルを自動的に生成します。 4。サブリストはネスティングを通じて実装できます。 5。CSSのリストスタイルタイプの属性を使用して、ディスク、サークル、スクエア、またはなしなどのシンボルスタイルを変更します。これらのタグを正しく使用して、標準の非秩序化リストを生成します。

コンテンツ誘導性の属性を使用する方法は? コンテンツ誘導性の属性を使用する方法は? Jul 28, 2025 am 02:24 AM

thecontentEdentedItedItableattributemakesanyhtmlementedabledaitbyaddingcontenteditable = "true"、avainusErstodirectlymodifyContentinthebrowser.2.ItiscommonlyLichTexteditors、note-takingApps、およびin-place-placeditingintingintingintingintingintingtintingtintingtediv

See all articles