← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 9 of 20

HTML Iframe सिक्योरिटी

Iframes आपको अपने page के अंदर external content — maps, videos, widgets — embed करने देते हैं। लेकिन इनसे security risks भी खुलते हैं। कोई malicious iframe scripts चला सकता है, आपके cookies access कर सकता है, या आपके users को redirect कर सकता है। sandbox attribute आपकी मुख्य defence है।
Syntax
markup
<iframe src="url" sandbox="allow-scripts allow-same-origin"></iframe>

sandbox एट्रिब्यूट

sandbox attribute किसी iframe के लिए डिफ़ॉल्ट रूप से सभी permissions disable कर देता है। फिर आप selectively सिर्फ वही permissions फिर से enable करते हैं जिनकी ज़रूरत है। यह embedded content पर पूरी तरह भरोसा करने से कहीं ज़्यादा सुरक्षित है।

Note:
  • sandbox से शुरू करें और जब तक embedded content काम न करे, permissions एक-एक करके जोड़ते जाएं।
  • Accepted values:
  • sandbox (empty) — apply all restrictions
  • allow-scripts — permit JavaScript
  • allow-same-origin — keep the origin
  • allow-forms — permit form submission
  • allow-popups — permit popups
  • allow-top-navigation — permit navigating the top page
  • allow-modals — permit alert, confirm, prompt
Warning: allow-same-origin और allow-scripts को कभी साथ न जोड़ें — इससे sandbox protection पूरी तरह बेअसर हो जाती है।

उदाहरण: The sandbox Attribute

markup
<iframe src="https://example.com" sandbox></iframe>

allow एट्रिब्यूट

allow attribute यह control करता है कि कोई iframe कौन-से browser features access कर सकता है — camera, microphone, geolocation, fullscreen। सिर्फ वही दें जिसकी embedded content को असल में ज़रूरत है।

Note:
  • YouTube embeds को allow=fullscreen चाहिए होता है — इसके बिना fullscreen button कुछ नहीं करता।
  • Accepted values:
  • allow — semicolon-separated Permissions Policy features
  • camera; microphone; geolocation; fullscreen; autoplay; payment; clipboard-write
  • Each feature may take an origin list, e.g. geolocation self
Warning: किसी untrusted iframe को camera या microphone access देना एक गंभीर privacy risk है।

उदाहरण: The allow Attribute

markup
<iframe src="https://youtube.com/embed/xyz" allow="fullscreen"></iframe>

referrerpolicy एट्रिब्यूट

referrerpolicy यह control करता है कि आपके page के बारे में कितनी जानकारी Referer header के ज़रिए embedded iframe के destination तक भेजी जाए, और no-referrer जैसी सख्त values आपकी site के URL structure को third-party embeds तक leak होने से रोकती हैं।

Note:
  • Accepted values:
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin
  • strict-origin-when-cross-origin
  • unsafe-url

उदाहरण: The referrerpolicy Attribute

markup
<iframe src="https://example.com" referrerpolicy="no-referrer"></iframe>

कंटेंट सिक्योरिटी पॉलिसी और frame-src

किसी page के Content-Security-Policy header में frame-src directive यह restrict करता है कि कौन-से domains iframe के ज़रिए embed किए जा सकते हैं, जिससे malicious या unexpected iframe sources block हो जाते हैं, भले ही कोई attacker page में iframe tag inject करने में सफल हो जाए।

उदाहरण: Content Security Policy and frame-src

markup
<meta http-equiv="Content-Security-Policy" content="frame-src https://trusted.com">

X-Frame-Options से क्लिकजैकिंग से बचाव

X-Frame-Options response header दूसरी sites को आपका page अपने खुद के iframe में embed करने से रोकता है, जिससे clickjacking attack रुक जाता है जहाँ कोई attacker आपके असली page के ऊपर invisible buttons overlay करके users को कुछ ऐसा click करने के लिए धोखा देता है जो वे नहीं करना चाहते थे।

उदाहरण: Avoiding Clickjacking with X-Frame-Options

markup
<!-- Server response header: X-Frame-Options: DENY -->
<iframe src="https://example.com"></iframe>
Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.